flexlayout-react 0.8.2 → 0.8.4

package/ChangeLog.txt

@@ -1,3 +1,13 @@
+0.8.4
+Added attribute 'enableTabScrollbar' to TabSet and Border nodes 
+  Enabling this attribute will show a mini 'scrollbar' for the tabs to indicate the scroll position
+  See the Demo apps default layout for an example.
+
+0.8.3
+Prevent sticky buttons scrolling when there are no tabs
+Fix border 'show' attribute
+Removed code to adjust popout positions when loading
+
 0.8.2
 Updated dependencies 
 Enabled use with React 19

package/README.md

@@ -20,7 +20,7 @@ FlexLayout's only dependency is React.
 
 Features:
 *	splitters
-*	tabs
+*	tabs (scrolling or wrapped)
 *	tab dragging and ordering
 *	tab set dragging (move all the tabs in a tab set in one operation)
 *	dock to tab set or edge of frame
@@ -147,13 +147,13 @@ function App() {
 }
 ```		
 
-The above code would render two tab sets horizontally each containing a single tab that hosts a button component. The tabs could be moved and resized by dragging and dropping. Additional grids could be added to the layout by sending actions to the model.
+The above code would render two tab sets horizontally each containing a single tab that hosts a div component (returned from the factory). The tabs could be moved and resized by dragging and dropping. Additional tabs could be added to the layout by sending actions to the model.
 
 Try it now using [CodeSandbox](https://codesandbox.io/p/sandbox/yvjzqf)
 
 A simple Typescript example can be found here:
 
-https://github.com/nealus/FlexLayout_cra_example
+https://github.com/nealus/flexlayout-vite-example
 
 The model json contains 4 top level elements:
 

package/declarations/Types.d.ts

@@ -91,5 +91,7 @@ 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",
+    FLEXLAYOUT__MINI_SCROLLBAR = "flexlayout__mini_scrollbar",
+    FLEXLAYOUT__MINI_SCROLLBAR_HIDDEN = "flexlayout__mini_scrollbar_hidden"
 }

package/declarations/model/BorderNode.d.ts

@@ -27,4 +27,5 @@ export declare class BorderNode extends Node implements IDropTarget {
     isMaximized(): boolean;
     isShowing(): boolean;
     toJson(): IJsonBorderNode;
+    isEnableTabScrollbar(): boolean;
 }

package/declarations/model/IJsonModel.d.ts

@@ -76,6 +76,14 @@ export interface IGlobalAttributes {
       Default: true
      */
     borderEnableDrop?: boolean;
+    /**
+      Value for BorderNode attribute enableTabScrollbar if not overridden
+
+      whether to show a mini scrollbar for the tabs
+
+      Default: false
+     */
+    borderEnableTabScrollbar?: boolean;
     /**
       Value for BorderNode attribute maxSize if not overridden
 
@@ -359,6 +367,14 @@ export interface IGlobalAttributes {
       Default: false
      */
     tabSetEnableSingleTabStretch?: boolean;
+    /**
+      Value for TabSetNode attribute enableTabScrollbar if not overridden
+
+      whether to show a mini scrollbar for the tabs
+
+      Default: false
+     */
+    tabSetEnableTabScrollbar?: boolean;
     /**
       Value for TabSetNode attribute enableTabStrip if not overridden
 
@@ -370,7 +386,7 @@ export interface IGlobalAttributes {
     /**
       Value for TabSetNode attribute enableTabWrap if not overridden
 
-      show tabs in location top or bottom
+      wrap tabs onto multiple lines
 
       Default: false
      */
@@ -503,6 +519,12 @@ export interface ITabSetAttributes {
       Default: inherited from Global attribute tabSetEnableSingleTabStretch (default false)
      */
     enableSingleTabStretch?: boolean;
+    /**
+      whether to show a mini scrollbar for the tabs
+
+      Default: inherited from Global attribute tabSetEnableTabScrollbar (default false)
+     */
+    enableTabScrollbar?: boolean;
     /**
       enable tab strip and allow multiple tabs in this tabset
 
@@ -510,7 +532,7 @@ export interface ITabSetAttributes {
      */
     enableTabStrip?: boolean;
     /**
-      show tabs in location top or bottom
+      wrap tabs onto multiple lines
 
       Default: inherited from Global attribute tabSetEnableTabWrap (default false)
      */
@@ -772,6 +794,12 @@ export interface IBorderAttributes {
       Default: inherited from Global attribute borderEnableDrop (default true)
      */
     enableDrop?: boolean;
+    /**
+      whether to show a mini scrollbar for the tabs
+
+      Default: inherited from Global attribute borderEnableTabScrollbar (default false)
+     */
+    enableTabScrollbar?: boolean;
     /**
       the maximum size of the tab area
 

package/declarations/model/TabSetNode.d.ts

@@ -37,6 +37,7 @@ export declare class TabSetNode extends Node implements IDraggable, IDropTarget
     isEnableSingleTabStretch(): boolean;
     isEnableTabStrip(): boolean;
     isAutoSelectTab(): boolean;
+    isEnableTabScrollbar(): boolean;
     getClassNameTabStrip(): string | undefined;
     getTabLocation(): string;
     toJson(): IJsonTabSetNode;

package/declarations/view/Layout.d.ts

@@ -96,7 +96,7 @@ export declare class Layout extends React.Component<ILayoutProps> {
     /** Get the root div element of the layout */
     getRootDiv(): HTMLDivElement | null;
 }
-export declare const FlexLayoutVersion = "0.8.1";
+export declare const FlexLayoutVersion = "0.8.4";
 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: {

package/declarations/view/Utils.d.ts

@@ -1,11 +1,8 @@
 import * as React from "react";
 import { Node } from "../model/Node";
-import { Rect } from "../Rect";
 export declare function enablePointerOnIFrames(enable: boolean, currentDocument: Document): void;
 export declare function getElementsByTagName(tag: string, currentDocument: Document): Element[];
 export declare function startDrag(doc: Document, event: React.PointerEvent<HTMLElement>, drag: (x: number, y: number) => void, dragEnd: () => void, dragCancel: () => void): void;
 export declare function canDockToWindow(node: Node): boolean;
-export declare function keepOnScreen(rect: Rect): Rect;
-export declare function isOnScreen(rect: Rect): boolean;
 export declare function copyInlineStyles(source: HTMLElement, target: HTMLElement): boolean;
 export declare function isSafari(): boolean;