@aptre/flex-layout 0.1.10 → 0.2.1

package/README.md

@@ -350,6 +350,7 @@ Inherited defaults will take their value from the associated global attributes (
 | floating | false | |
 | className | *inherited* | class applied to tab button |
 | contentClassName | *inherited* | class applied to tab content |
+| tabsetClassName | undefined | class applied to parent tabset when this is the only tab and it is stretched to fill the tabset |
 | icon | *inherited* | |
 | enableRenderOnDemand | *inherited* | whether to avoid rendering component until tab is visible |
 | borderWidth | *inherited* | width when added to border, -1 will use border size |

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/{declarations → dist}/DropInfo.d.ts

@@ -8,11 +8,5 @@ export declare class DropInfo {
     location: DockLocation;
     index: number;
     className: string;
-    constructor(
-        node: Node & IDropTarget,
-        rect: Rect,
-        location: DockLocation,
-        index: number,
-        className: string
-    );
+    constructor(node: Node & IDropTarget, rect: Rect, location: DockLocation, index: number, className: string);
 }

package/{declarations → dist}/I18nLabel.d.ts

@@ -1,7 +1,7 @@
 export declare enum I18nLabel {
     Close_Tab = "Close",
     Close_Tabset = "Close tabset",
-    Move_Tab = "Move: ",
+    Move_Tab = "Move: ",// no longer used
     Move_Tabset = "Move tabset",
     Maximize = "Maximize tabset",
     Restore = "Restore tabset",
@@ -10,5 +10,5 @@ export declare enum I18nLabel {
     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",
+    Error_rendering_component = "Error rendering component"
 }

package/{declarations → dist}/Rect.d.ts

@@ -7,7 +7,7 @@ export declare class Rect {
     constructor(x: number, y: number, width: number, height: number);
     static fromElement(element: Element): Rect;
     clone(): Rect;
-    equals(rect: Rect): boolean;
+    equals(rect: Rect | null | undefined): boolean;
     getBottom(): number;
     getRight(): number;
     getCenter(): {
@@ -15,10 +15,7 @@ export declare class Rect {
         y: number;
     };
     positionElement(element: HTMLElement, position?: string): void;
-    styleWithPosition(
-        style: Record<string, any>,
-        position?: string
-    ): Record<string, any>;
+    styleWithPosition(style: Record<string, any>, position?: string): Record<string, any>;
     contains(x: number, y: number): boolean;
     removeInsets(insets: {
         top: number;

package/{declarations → dist}/Types.d.ts

@@ -57,6 +57,7 @@ export declare enum CLASSES {
     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",
@@ -74,5 +75,5 @@ export declare enum CLASSES {
     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",
+    FLEXLAYOUT__POPUP_MENU = "flexlayout__popup_menu"
 }

package/dist/index.mjs

@@ -1225,6 +1225,7 @@ var TabNode = class _TabNode extends Node {
     attributeDefinitions.add("component", void 0).setType(Attribute.STRING);
     attributeDefinitions.add("config", void 0).setType("any");
     attributeDefinitions.add("floating", false).setType(Attribute.BOOLEAN);
+    attributeDefinitions.add("tabsetClassName", void 0).setType(Attribute.STRING);
     attributeDefinitions.addInherited("enableClose", "tabEnableClose").setType(Attribute.BOOLEAN);
     attributeDefinitions.addInherited("closeType", "tabCloseType").setType("ICloseType");
     attributeDefinitions.addInherited("enableDrag", "tabEnableDrag").setType(Attribute.BOOLEAN);
@@ -1313,6 +1314,9 @@ var TabNode = class _TabNode extends Node {
   getContentClassName() {
     return this._getAttr("contentClassName");
   }
+  getTabSetClassName() {
+    return this._getAttr("tabsetClassName");
+  }
   isEnableRenderOnDemand() {
     return this._getAttr("enableRenderOnDemand");
   }
@@ -2297,7 +2301,7 @@ function adjustSelectedIndex(parent, removedIndex) {
   }
 }
 function randomUUID() {
-  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
+  return ("10000000-1000-4000-8000" + -1e11).replace(/[018]/g, (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
 }
 
 // src/model/BorderNode.ts
@@ -3930,6 +3934,12 @@ var TabSet = (props) => {
   if (node.isMaximized() && !showHeader) {
     tabStripClasses += " " + cm("flexlayout__tabset-maximized" /* FLEXLAYOUT__TABSET_MAXIMIZED */);
   }
+  if (isTabStretch) {
+    const tabNode = node.getChildren()[0];
+    if (tabNode.getTabSetClassName() !== void 0) {
+      tabStripClasses += " " + tabNode.getTabSetClassName();
+    }
+  }
   if (showHeader) {
     const headerToolbar = /* @__PURE__ */ React11.createElement(
       "div",
@@ -4189,6 +4199,9 @@ var MaximizeIcon = () => {
 var OverflowIcon = () => {
   return /* @__PURE__ */ React15.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)" }, /* @__PURE__ */ React15.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ React15.createElement("path", { stroke: "var(--color-icon)", d: "M7 10l5 5 5-5z" }));
 };
+var EdgeIcon = () => {
+  return /* @__PURE__ */ React15.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "block", width: 10, height: 10 }, preserveAspectRatio: "none", viewBox: "0 0 100 100" }, /* @__PURE__ */ React15.createElement("path", { fill: "var(--color-edge-icon)", stroke: "var(--color-edge-icon)", d: "M10 30 L90 30 l-40 40 Z" }));
+};
 var PopoutIcon = () => {
   return (
     // <svg xmlns="http://www.w3.org/2000/svg"  style={style}  viewBox="0 0 24 24" fill="var(--color-icon)"><path d="M0 0h24v24H0z" fill="none"/><path stroke="var(--color-icon)" d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/></svg>
@@ -4209,7 +4222,8 @@ var defaultIcons = {
   popout: /* @__PURE__ */ React16.createElement(PopoutIcon, null),
   maximize: /* @__PURE__ */ React16.createElement(MaximizeIcon, null),
   restore: /* @__PURE__ */ React16.createElement(RestoreIcon, null),
-  more: /* @__PURE__ */ React16.createElement(OverflowIcon, null)
+  more: /* @__PURE__ */ React16.createElement(OverflowIcon, null),
+  edgeArrow: /* @__PURE__ */ React16.createElement(EdgeIcon, null)
 };
 var isDesktop = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
 var defaultSupportsPopout = isDesktop;
@@ -4670,6 +4684,7 @@ var Layout = class extends React16.Component {
       }
     }
     const edges = [];
+    const arrowIcon = this.icons.edgeArrow;
     if (this.state.showEdges) {
       const r = this.centerRect;
       const length = this.edgeRectLength;
@@ -4684,7 +4699,8 @@ var Layout = class extends React16.Component {
             key: "North",
             style: { top: r.y, left: r.x + r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius },
             className: className + " " + this.getClassName("flexlayout__edge_rect_top" /* FLEXLAYOUT__EDGE_RECT_TOP */)
-          }
+          },
+          /* @__PURE__ */ React16.createElement("div", { style: { transform: "rotate(180deg)" } }, arrowIcon)
         )
       );
       edges.push(
@@ -4694,7 +4710,8 @@ var Layout = class extends React16.Component {
             key: "West",
             style: { top: r.y + r.height / 2 - offset, left: r.x, width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius },
             className: className + " " + this.getClassName("flexlayout__edge_rect_left" /* FLEXLAYOUT__EDGE_RECT_LEFT */)
-          }
+          },
+          /* @__PURE__ */ React16.createElement("div", { style: { transform: "rotate(90deg)" } }, arrowIcon)
         )
       );
       edges.push(
@@ -4704,7 +4721,8 @@ var Layout = class extends React16.Component {
             key: "South",
             style: { top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius },
             className: className + " " + this.getClassName("flexlayout__edge_rect_bottom" /* FLEXLAYOUT__EDGE_RECT_BOTTOM */)
-          }
+          },
+          /* @__PURE__ */ React16.createElement("div", null, arrowIcon)
         )
       );
       edges.push(
@@ -4714,7 +4732,8 @@ var Layout = class extends React16.Component {
             key: "East",
             style: { top: r.y + r.height / 2 - offset, left: r.x + r.width - width, width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius },
             className: className + " " + this.getClassName("flexlayout__edge_rect_right" /* FLEXLAYOUT__EDGE_RECT_RIGHT */)
-          }
+          },
+          /* @__PURE__ */ React16.createElement("div", { style: { transform: "rotate(-90deg)" } }, arrowIcon)
         )
       );
     }

package/{declarations → dist}/model/Actions.d.ts

@@ -27,13 +27,7 @@ export declare class Actions {
      * @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;
+    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
@@ -43,13 +37,7 @@ export declare class Actions {
      * @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;
+    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

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/{declarations → dist}/model/IJsonModel.d.ts

@@ -24,7 +24,8 @@ export interface IJsonTabSetNode extends ITabSetAttributes {
     maximized?: boolean;
     children: IJsonTabNode[];
 }
-export interface IJsonTabNode extends ITabAttributes {}
+export interface IJsonTabNode extends ITabAttributes {
+}
 export interface IGlobalAttributes {
     borderAutoSelectTabWhenClosed?: boolean;
     borderAutoSelectTabWhenOpen?: boolean;
@@ -64,6 +65,7 @@ export interface IGlobalAttributes {
     tabSetEnableDrag?: boolean;
     tabSetEnableDrop?: boolean;
     tabSetEnableMaximize?: boolean;
+    tabSetEnableSingleTabStretch?: boolean;
     tabSetEnableTabStrip?: boolean;
     tabSetHeaderHeight?: number;
     tabSetMarginInsets?: IInsets;
@@ -91,6 +93,7 @@ export interface ITabSetAttributes {
     enableDrag?: boolean;
     enableDrop?: boolean;
     enableMaximize?: boolean;
+    enableSingleTabStretch?: boolean;
     enableTabStrip?: boolean;
     headerHeight?: number;
     height?: number;
@@ -117,6 +120,7 @@ export interface ITabAttributes {
     component?: string;
     config?: any;
     contentClassName?: string;
+    tabsetClassName?: string;
     enableClose?: boolean;
     enableDrag?: boolean;
     enableFloat?: boolean;

package/{declarations → dist}/model/Model.d.ts

@@ -73,18 +73,14 @@ export declare class Model {
      * 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;
+    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;
+    setOnCreateTabSet(onCreateTabSet: (tabNode?: TabNode) => ITabSetAttributes): void;
     static toTypescriptInterfaces(): void;
     toString(): string;
 }

package/{declarations → dist}/model/Node.d.ts

@@ -1,11 +1,6 @@
 import { Orientation } from "../Orientation";
 import { Rect } from "../Rect";
-import {
-    IJsonBorderNode,
-    IJsonRowNode,
-    IJsonTabNode,
-    IJsonTabSetNode,
-} from "./IJsonModel";
+import { IJsonBorderNode, IJsonRowNode, IJsonTabNode, IJsonTabSetNode } from "./IJsonModel";
 import { Model } from "./Model";
 export declare abstract class Node {
     getId(): string;
@@ -18,10 +13,5 @@ export declare abstract class Node {
     getOrientation(): Orientation;
     setEventListener(event: string, callback: (params: any) => void): void;
     removeEventListener(event: string): void;
-    abstract toJson():
-        | IJsonRowNode
-        | IJsonBorderNode
-        | IJsonTabSetNode
-        | IJsonTabNode
-        | undefined;
+    abstract toJson(): IJsonRowNode | IJsonBorderNode | IJsonTabSetNode | IJsonTabNode | undefined;
 }

package/{declarations → dist}/model/TabNode.d.ts

@@ -31,6 +31,7 @@ export declare class TabNode extends Node implements IDraggable {
     isEnableRename(): boolean;
     getClassName(): string | undefined;
     getContentClassName(): string | undefined;
+    getTabSetClassName(): string | undefined;
     isEnableRenderOnDemand(): boolean;
     toJson(): IJsonTabNode;
 }

package/{declarations → dist}/model/TabSetNode.d.ts

@@ -2,10 +2,7 @@ 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
-{
+export declare class TabSetNode extends Node implements IDraggable, IDropTarget {
     static readonly TYPE = "tabset";
     getName(): string | undefined;
     getSelected(): number;
@@ -31,6 +28,7 @@ export declare class TabSetNode
     isEnableDivide(): boolean;
     isEnableMaximize(): boolean;
     isEnableClose(): boolean;
+    isEnableSingleTabStretch(): boolean;
     canMaximize(): boolean;
     isEnableTabStrip(): boolean;
     isAutoSelectTab(): boolean;

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/{declarations → dist}/view/Layout.d.ts

@@ -9,35 +9,17 @@ 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 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;
@@ -51,41 +33,27 @@ export interface ILayoutProps {
     icons?: IIcons;
     onAction?: (action: Action) => Action | undefined;
     onRenderTab?: (node: TabNode, renderValues: ITabRenderValues) => void;
-    onRenderTabSet?: (
-        tabSetNode: TabSetNode | BorderNode,
-        renderValues: ITabSetRenderValues
-    ) => 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;
-          };
+    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;
-          };
+    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;
@@ -129,21 +97,15 @@ export interface ILayoutState {
 }
 export interface IIcons {
     close?: React.ReactNode | ((tabNode: TabNode) => React.ReactNode);
-    closeTabset?:
-        | React.ReactNode
-        | ((tabSetNode: TabSetNode) => 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);
+    more?: React.ReactNode | ((tabSetNode: TabSetNode | BorderNode, hiddenTabs: {
+        node: TabNode;
+        index: number;
+    }[]) => React.ReactNode);
+    edgeArrow?: React.ReactNode;
 }
 export interface ICustomDropDestination {
     rect: Rect;
@@ -159,33 +121,28 @@ export interface ICustomDropDestination {
 /**
  * A React component that hosts a multi-tabbed layout
  */
-export declare class Layout extends React.Component<
-    ILayoutProps,
-    ILayoutState
-> {
+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): void;
+    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): void;
+    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;
+    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
@@ -200,9 +157,5 @@ export declare class Layout extends React.Component<
      * @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;
+    addTabWithDragAndDropIndirect(dragText: string | undefined, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void): void;
 }

package/package.json

@@ -2,7 +2,7 @@
     "name": "@aptre/flex-layout",
     "author": "Caplin Systems Ltd",
     "description": "A multi-tab docking layout manager",
-    "version": "0.1.10",
+    "version": "0.2.1",
     "license": "ISC",
     "repository": {
         "type": "git",
@@ -14,17 +14,22 @@
         "dock",
         "popout",
         "tabs",
-        "drag-and-drop",
         "tabset",
         "splitter",
         "drag",
         "drop",
         "reactjs",
-        "react-dom"
+        "flexlayout",
+        "flex layout",
+        "layout manager",
+        "drag and drop",
+        "split view",
+        "docking library",
+        "docking layout"
     ],
     "main": "./dist/index.mjs",
     "module": "./dist/index.mjs",
-    "types": "./declarations/index.d.ts",
+    "types": "./dist/index.d.ts",
     "exports": {
         ".": "./dist/index.mjs",
         "./style": "./style/",
@@ -52,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"
@@ -80,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",

package/style/_base.scss

@@ -60,9 +60,11 @@
     &__edge_rect {
         position: absolute;
         z-index: 1000;
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
         background-color: var(--color-edge-marker);
         pointer-events: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 
     &__drag_rect {

package/style/dark.css

@@ -46,6 +46,7 @@
   --color-popup-selected: var(--color-text);
   --color-popup-selected-background: var(--color-4);
   --color-edge-marker: gray;
+  --color-edge-icon: #eee;
 }
 
 .flexlayout__layout {
@@ -97,9 +98,11 @@
 .flexlayout__edge_rect {
   position: absolute;
   z-index: 1000;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
   background-color: var(--color-edge-marker);
   pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .flexlayout__drag_rect {
   position: absolute;