flexlayout-react 0.7.9 → 0.7.11

package/ChangeLog.txt

@@ -1,3 +1,16 @@
+0.7.11
+Added ITabSetRenderValues.overflowPosition to allow overflow button position to be 
+specified, if left undefined, position will be after sticky buttons as before.
+New model attribute enableRotateBorderIcons, this allows the tab icons in the left and
+right borders to rotate with the text or not, default is true.
+Added additional class names to edge indicators
+
+0.7.10
+Fix for #399 - the overflow button in a tabset is now placed after 
+any sticky buttons (additional buttons that stick to the last tab of a tabset)
+but before any other buttons.
+Enabled sticky buttons in border tabsets
+
 0.7.9
 Fix drag issue found when used in devtool extension
 Fix double render in popout when in strict mode

package/README.md

@@ -58,7 +58,15 @@ import { createRoot } from "react-dom/client";
 import * as FlexLayout from "flexlayout-react";
 ```
 
-Include the light, underline, gray or dark style in your html:
+Include the light, underline, gray or dark theme by either:
+
+Adding an additional import:
+
+```
+import 'flexlayout-react/style/light.css';  
+```
+
+or by adding the css to your html:
 
 ```
 <link rel="stylesheet" href="node_modules/flexlayout-react/style/light.css" />
@@ -340,6 +348,7 @@ Attributes allowed in the 'global' element
 | splitterExtra | 0 | additional width in pixels of the splitter hit test area |
 | legacyOverflowMenu | false | use the legacy text only overflow menu |
 | enableEdgeDock | true | |
+| enableRotateBorderIcons | true | boolean indicating if tab icons should rotate with the text in the left and right borders |
 | tabEnableClose | true | allow user to close all tabs via close button |
 | tabCloseType | 1 | see values in ICloseType |
 | tabEnableDrag | true | allow user to drag all tabs to new location |
@@ -438,6 +447,7 @@ Note: tabsets can be dynamically created as tabs are moved and deleted when all
 | name | null | named tabsets will show a header bar above the tabs |
 | config | null | a place to hold json config used in your own code |
 | selected | 0 | index of selected/visible tab in tabset |
+| active | false | whether tabset is currently active; this attribute can only be used in the initial configuration, to change the active tabset you should use the `setActiveTabset` action on the model |
 | maximized | false | whether tabset is currently maximized to fill view |
 | enableClose | false | allow user to close tabset via a close button |
 | id | auto generated | |
@@ -454,8 +464,8 @@ Note: tabsets can be dynamically created as tabs are moved and deleted when all
 | headerHeight | *inherited* | |
 | tabStripHeight | *inherited* | height in pixels of tab strip |
 | tabLocation | *inherited* | show tabs in location top or bottom |
-| minHeight | *inherited* | minimum width (in px) for this tabset |
-| minWidth | *inherited* | minimum height (in px) for this tabset |
+| minHeight | *inherited* | minimum height (in px) for this tabset |
+| minWidth | *inherited* | minimum width (in px) for this tabset |
 
 ## Border Attributes
 
@@ -614,6 +624,7 @@ To build the npm distribution run 'yarn build', this will create the artifacts i
 | Name | Repository |
 | ------------- |:-------------|
 | rc-dock | https://github.com/ticlo/rc-dock | 
+| Dockview | https://dockview.dev/ | 
 | lumino | https://github.com/jupyterlab/lumino | 
 | golden-layout | https://github.com/golden-layout/golden-layout |
 | react-mosaic | https://github.com/nomcopter/react-mosaic |

package/declarations/Types.d.ts

@@ -22,6 +22,10 @@ export declare enum CLASSES {
     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",

package/declarations/model/IJsonModel.d.ts

@@ -37,6 +37,7 @@ export interface IGlobalAttributes {
     borderSize?: number;
     enableEdgeDock?: boolean;
     enableUseVisibility?: boolean;
+    enableRotateBorderIcons?: boolean;
     legacyOverflowMenu?: boolean;
     marginInsets?: IInsets;
     rootOrientationVertical?: boolean;
@@ -104,6 +105,8 @@ export interface ITabSetAttributes {
     type: "tabset";
     weight?: number;
     width?: number;
+    maximized?: boolean;
+    active?: boolean;
 }
 export interface ITabAttributes {
     altName?: string;

package/declarations/model/Model.d.ts

@@ -31,6 +31,7 @@ export declare class Model {
     getRoot(): RowNode;
     isRootOrientationVertical(): boolean;
     isUseVisibility(): boolean;
+    isEnableRotateBorderIcons(): boolean;
     /**
      * Gets the
      * @returns {BorderSet|*}
@@ -46,6 +47,12 @@ export declare class Model {
      * @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

package/declarations/view/Layout.d.ts

@@ -73,6 +73,7 @@ export interface ITabSetRenderValues {
     stickyButtons: React.ReactNode[];
     buttons: React.ReactNode[];
     headerButtons: React.ReactNode[];
+    overflowPosition: number | undefined;
 }
 export interface ITabRenderValues {
     leading: React.ReactNode;