flexlayout-react 0.8.12 → 0.8.13

package/package.json

@@ -1,9 +1,25 @@
 {
   "name": "flexlayout-react",
-  "version": "0.8.12",
+  "version": "0.8.13",
   "description": "A multi-tab docking layout manager",
-  "main": "lib/index.js",
+  "author": "Caplin Systems Ltd",
+  "repository": "https://github.com/caplin/FlexLayout",
+  "license": "ISC",
+  "type":"module",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
   "types": "./declarations/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js"
+    },
+    "./style/*": "./style/*"
+  },
+  "files": [
+    "declarations/",
+    "lib/",
+    "style/"
+  ],
   "keywords": [
     "react",
     "layout",
@@ -24,29 +40,26 @@
     "docking layout"
   ],
   "scripts": {
-    "start": "webpack serve",
-    "start:production": "webpack serve  --mode=production",
-    "build": "npm run css && npm run doc && npm run build:demo && npm run build:esm && npm run build:umd && npm run build:umd:min",
-    "build:esm": "tsc -p tsconfig2.json",
-    "build:umd": "webpack --mode=development --config webpack_build.config.js",
-    "build:umd:min": "webpack --mode=production --config webpack_build_min.config.js",
-    "build:demo": "webpack --mode=production",
+    "dev": "vite",
+    "preview": "vite preview",
+    "build": "npm run build:clean && npm run css && npm run doc && npm run build:demo && npm run build:types && npm run build:libs",
+    "build:clean": "rimraf lib/ declarations/ typedoc/",
+    "build:demo": "vite build",
+    "build:types": "tsc -p tsconfig-types.json",
+    "build:libs": "vite build --config vite.config.lib.ts",
     "test": "vitest",
     "playwright": "playwright test --ui",
     "lint": "eslint src/*",
-    "doc": "typedoc --out typedoc --exclude \"**/examples/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
+    "doc": "typedoc --out typedoc --exclude \"**/demo/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
     "css": "sass style/rounded.scss  style/rounded.css && 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  && sass style/combined.scss style/combined.css"
   },
-  "author": "Caplin Systems Ltd",
-  "repository": "https://github.com/caplin/FlexLayout",
-  "license": "ISC",
+  "eslintConfig": {
+    "extends": "react-app"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
@@ -58,14 +71,13 @@
     "@types/prismjs": "^1.26.5",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.0",
     "ag-grid-community": "^33.2.3",
     "ag-grid-react": "^33.2.3",
     "chart.js": "^4.4.9",
-    "css-loader": "^7.1.2",
     "eslint": "^9.24.0",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^16.0.0",
-    "html-webpack-plugin": "^5.6.3",
     "ol": "^10.5.0",
     "prettier": "^3.5.3",
     "prismjs": "^1.30.0",
@@ -73,17 +85,13 @@
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",
+    "rimraf": "^6.0.1",
     "sass": "^1.86.3",
-    "source-map-loader": "^5.0.0",
-    "style-loader": "^4.0.0",
     "styled-components": "^6.1.17",
-    "ts-loader": "~9.5.2",
     "typedoc": "^0.28.2",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.30.1",
-    "vitest": "^3.1.1",
-    "webpack": "^5.99.5",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.1"
+    "vite": "^6.3.0",
+    "vitest": "^3.1.1"
   }
-}
+}

package/ChangeLog.txt

@@ -1,372 +0,0 @@
-0.8.12
-Updated dependencies
-Fix for initial tab flash
-Disabled popout of MUI tabs in demo (because Emotion generated styles (in production) cannot be copied to popout window)
-Converted Cypress tests to Playwright
-Updated demo app to use React hooks
-
-0.8.11 - deprecated - published with additional files by mistake
-
-0.8.10
-Fix for #481 Numpad Enter doesn't confirm rename
-Work around <StrictMode> issue in React 19 (https://github.com/facebook/react/issues/29585) causing
-  tabs to re-mount when moved
-
-0.8.9
-Fix for #480 Actions.selectTab is called when closing Tab 
-Added isVisible() method to TabNode
-
-0.8.8
-Enable esc to close overflow menu 
-Prevent initial reposition flash when there are hidden tabs
-Removed Roboto font from demo
-
-0.8.7
-Improved tab scrolling into visible area
-Added sections about tab and tabset customization to readme
-
-0.8.6
-Restructured scss files to remove use of deprecated @import rule
-Added combined.css containing all themes.
-Updated demo to use combined.css for simple theme switching using class names
-Added option in demo to show the layout structure
-
-0.8.5
-Changed the mini scrollbar to only show when tabs are hovered over 
-
-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
-Removed strict mode from demo due to bug in React 19 (https://github.com/facebook/react/issues/29585) causing
-  tabs to re-mount when moved
-Used CodeSandbox in README.md since react 19 doesn't create UMD versions needed by JSFiddle.
-
-0.8.1
-Fixed enableDrag on tab and tabset nodes.
-Fixed calc for min/max tabset height from min/max tab height.
-Modified style sheet code in demo to reduce flash.
-
-0.8.0
-New:
-  * Wrap tabs option
-  * improved popouts, no longer keep placeholder tab
-  * drag from overflow menu
-  * improved splitter resizing
-  * now uses html drag and drop to allow cross window dragging
-  * rendering now uses flexbox rather than absolute positions, this should make
-    styling easier
-  * rounded theme
-  * updated dependencies
-
-Breaking Changes:
-  * addTabWithDragAndDrop signature has changed, must now be called from a drag start handler
-  * moveTabWithDragAndDrop signature has changed, must now be called from a drag start handler
-  * removed addTabWithDragAndDropIndirect 
-  * removed onTabDrag (custom internal drag)
-  * removed font prop, use css variables --font-size and --font-family instead
-  * removed titleFactory, iconFactory props, use onRenderTab instead
-  * removed tabset header option
-  * removed attributes: for insets, tabset header, row/tabset width and height, legacymenu, ...
-  * several css changes ref use of flexbox
-
-0.7.15
-Added arrow icon to edge indicators
-
-0.7.14
-Added attribute tabsetClassName to tab nodes, this will add the classname to the parent
-tabset when there is a single stretched tab. Updated mosaic layout in demo to use this to color headers.  
-
-0.7.13
-New attribute on tabset: enableSingleTabStretch will stretch a single tab to take up
-all the remaining space and change the style to look like a header, combined with enableDrop
-this can be used to create a Mosaic style layout (headed panels without tabs), see the new
-Mosaic Style layout in the Demo.
-The layout methods addTabToTabSet and addTabToActiveTabSet now return the added TabNode.
-Fixed #352 - Layout.getDomRect returning null.
-
-0.7.12
-Action.setActiveTabset can now take undefined to unset the active tabset.
-Added Tab attribute contentClassName to add a class to the tab content.
-
-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
-
-0.7.8
-Fix popout size of tab with individual border size
-Hide edge handles when disabled
-Update version of Cypress
-
-0.7.7
-Fix for #379 - uuid could only be generated in secure contexts
-
-0.7.6
-Remove dependency on uuid package
-Add action arg to onModelChange callback
-
-0.7.5
-Fix for #340 - error dragging a tabset into an empty tabset
-
-0.7.4
-Fixed popout windows when using </React.StrictMode>
-Output now targets ES6
-
-0.7.3
-Fixed right edge marker location when border enableAutoHide
-Dragging out a selected border tab will now leave the border unselected
-
-0.7.2
-New Layout JSON tabs to demo
-Added --color-icon css rootOrientationVertical
-
-0.7.1
-Fix for #310 - Added new layout method: moveTabWithDragAndDrop(node) to allow tab dragging to be
-started from custom code.
-
-0.7.0
-Updated dependencies, in particular changed React peer dependency to React 18
-Made changes for React 18
-
-0.6.10
-fix for #312, chrome warning for wheel event listener 
-
-0.6.9
-fix for #308, Allow dragging within a maximized tabset
-
-0.6.8
-Added onTabSetPlaceHolder prop to render the tabset area when there are no tabs.
-
-0.6.7
-More css variables, added Underline theme, updated dependencies
-
-0.6.6 
-fix for #296
-
-0.6.5
-fix for #289, allow setting attributes to undefined value
-
-0.6.4
-Code tidy
-Updated dependencies
-
-0.6.3
-Changed to using named rather than default import/exports, 
-this will require changing top level imports 
-  from:
-    import FlexLayout from 'flexlayout-react'; 
-  to
-    import * as FlexLayout from 'flexlayout-react';
-
-Added typedoc link to readme
-
-0.6.2
-Extended icons prop to allow use of functions to set icons.
-Added onShowOverflowMenu callback for handling the display of the tab overflow menu.
-
-0.6.1
-Use portal for drag rectangle to preserve React context in onRenderTab.
-
-0.6.0
-Changed icons to use svg images, these will now scale with the font size.
-Improved element spacing, removed most margin/padding spacers.
-The overflow menu and drag rectangle will now show the tab icon and content as rendered in the tab.
-Added altName attribute to TabNode, this will be used as the name in the overflow menu if there is no
-name attribute (e.g the tab has just an icon).
-Changed the drag outline colors from red/green to light blue/green.
-Removed closeIcon prop from Layout, use the icons property instead.
-Changed onRenderDragRect callback to take a ReactElement rather than a string, the content now
-contains the tabbutton as rendered.
-
-0.5.21
-Fixed copying stylesheet links for popout windows when cssRules throw exception.
-Added option, enableUseVisibility, to allow use of visibility: hidden rather than display:none for hiding elements.
-
-0.5.20
-Added Cypress Tests 
-Fixed bug with tab icon not showing
-
-0.5.19
-Added onRenderFloatingTabPlaceholder callback prop for rendering the floating tab placeholder.
-Changed style sheets to use CSS custom properties (variables) for several values.
-Fix selected index in single empty tabset.
-Added onContextMenu callback prop for handling context menus on tabs and tabsets.
-Added onAuxMouseClick callback prop for handling mouse clicks on tabs and tabsets 
-with alt, meta, shift keys, also handles center mouse clicks
-
-0.5.18
-Added onRenderDragRect callback prop for rendering the drag rectangles
-New border attribute: enableAutoHide, to hide border if it has zero tabs
-
-0.5.17
-New global option, splitterExtra, to allow splitters to have an extended hit test areas. 
-This makes it easier to use narrow splitters.
-Added new TabNode attributes: borderWidth and borderHeight, these allow for individual border sizes for certain tabs.
-Fix for #263 - borders splitters not taking minimum size of center into account
-Improved algorithm for finding drop location 
-Additional parameter: cursor, for onTabDrag
-
-0.5.16
-Added 'New Features' layout to demo.
-New tab attribute, helpText, to show tooltip over tabs.
-New model action, deleteTabset, to delete a tabset and all it's child tabs.
-New tabset attribute, enableClose, to close the tabset
-
-0.5.15
-Added new Layout prop: onTabDrag that allows tab dragging to be intercepted.
-Added example of onTabDrag in demo app, example shows a list where tabs can be dragged into, 
-moved in the list and dragged back out into the layout. 
-Node id's that are not assigned a value are now auto-generated using a uuid rather than a rolling number
-(for example: previous id: #3, new id: #0c459064-8dee-444e-8636-eb9ab910fb27).
-Made toJson method of node public.
-
-0.5.14
-Fix an issue with copying styles for a floating window when using a CSS-in-JS solution 
-Fix for #227 - edge rects are not moved if window is resized while dragging
-
-0.5.13
-Added prop (realtimeResize) to make tabs resize as their splitters are dragged.
-Warning: this can cause resizing to become choppy when tabs are slow to draw.
-
-0.5.12
-New callback on Model to allow TabSet attributes to be set when a tab is moved in such a way 
-that it creates a new TabSet.
-Added config attributes to TabSet and Border
-Added headerButtons to ITabSetRenderValues, to allow different set of buttons to be applied to headed
-TabSets.
-
-0.5.11
-Added StickyButtons to onRenderTabSet render values to allow for implementation of Chrome style + button 
-Added example of + button to default layout in demo app
-
-0.5.10
-Adjust selected tab when tabs popped out to an external window
-
-0.5.9
-TitleFactory can now return object with titleContent and name (name is used for tab overflow menu).
-Corrected position of rootOrientationVertical in typescript json model
-
-0.5.8
-Fix for #172 - Added global rootOrientationVertical attribute to allow vertical layout for root 'row'
-Added missing exports for typescript json model
-Moved CRA example to separate repo
-
-0.5.7
-Added typescript typings for the model json
-Fixed drag rectangle showing as dot before first position found (when dragging into the layout)
-Fix for #191 - Global Attributes for classNames not working
-Fix for #212 - TypeScript issue with ILayoutState
-
-0.5.6
-Added external drag drop into layout, see new onExternalDrag prop
-Updated demo to accept dragged links, html and text.
-Tab scrolling direction changed to match VSCode
-Improved positioning of single tab when overflow menu shown
-Some small changes to theme colors
-
-0.5.5
-Fix for #170 - Closing the last tab of a maximized tabset crashes the layout
-
-0.5.4
-Fix issue running with React 17.0.1
-Window title now updates when tab renamed
-
-0.5.3
-Change classname strings to enum values
-TSLint replaced with ESLint
-Added Create-React-App (CRA) example
-New 'light' theme (lighter and without box shadows, gradients), 
-    existing light theme renamed to 'gray'
-
-0.5.2
-Fixed issues caused by double touch/mouse events in IOS
-Prevented IOS scroll during drag in demo app.
-Added extra option to onRenderTab to allow name of item in overflow menu to be set.
-New closeType option for tabs
-The maximized tabset now sets others to display:none rather than use z-index
-Disable maximize if only one tabset
-Splitters will now default to 8 on desktop and 12 on mobile (so they can be tapped more easily)
-Close element is enlarged on mobile 
-
-0.5.1
-Various small fixes
-
-0.5.0
-Overflowing tabs now scroll to keep the selected tab in view, 
-they can also be manually scrolled using the mouse wheel.
-Now works on scrolling page.
-NOTE: several css classes with names starting with flexlayout__tabset_header... have
-been renamed to flexlayout__tabset_tabbar...
-
-0.4.9
-Keep selected tab in tabset/border when another tab is moved out.
-
-0.4.8
-Minimum size attributes on tabset and border.
-Extra css classes on elements for border and splitter styling.
-
-0.4.7
-Added font property.
-Font now defaults to medium.
-Tabs now auto adjust to the current font.
-Added fontSize dropdown to demo.
-Modified css for above fontSize changes and to remove some fixed sizes.
-New attributes to control auto selection of tabs.
-
-0.4.6
-Added icons prop to allow default icons to be replaced.
-Added tabLocation attribute to tabsets to allow top and bottom tab placement.
-Modified css, default font is now 14px.
-
-0.4.5
-Fixed use of global objects for use when serverside rendering
-Added error boundary around tab contents to prevent tab rendering exception crashing the app
-
-0.4.4
-Changed all components except Layout to use React Hooks.
-Popouts now wait for style sheets to load.
-Fixed problem rendering popouts in Safari.
-
-0.4.3
-Fix addTabWithDragAndDrop not working since 0.4.0
-
-0.4.2
-Use Sass to generate light and dark themes
-
-0.4.1
-Copy styles into popout tabs
-
-0.4.0
-Added ability to popout tabs into new browser windows.
-Press the 'reload from file' button in the demo app to load new layouts with the popout attribute.
-
-0.3.11
-Added overflow menu to border tabs
-Fixed issues running on IE11
-
-0.3.10
-Removed deprecated React lifecycle methods, will now work
-in React strict mode without warnings (for example, in apps
-created with Create React App).

package/declarations/DragDrop.d.ts

@@ -1,15 +0,0 @@
-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/PopupMenu.d.ts

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

package/declarations/model/SplitterNode.d.ts

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

package/declarations/model/WindowLayout.d.ts

@@ -1,24 +0,0 @@
-import { Rect } from "../Rect";
-import { IJsonPopout } from "./IJsonModel";
-import { Model } from "./Model";
-import { RowNode } from "./RowNode";
-import { Node } from "./Node";
-import { TabSetNode } from "./TabSetNode";
-export declare class WindowLayout {
-    private _windowId;
-    private _rect;
-    private _window?;
-    private _root?;
-    private _maximizedTabSet?;
-    private _activeTabSet?;
-    constructor(windowId: string, rect: Rect);
-    visitNodes(fn: (node: Node, level: number) => void): void;
-    get windowId(): string;
-    get rect(): Rect;
-    get window(): Window | undefined;
-    get root(): RowNode | undefined;
-    get maximizedTabSet(): TabSetNode | undefined;
-    get activeTabSet(): TabSetNode | undefined;
-    toJson(): IJsonPopout;
-    static fromJson(windowJson: IJsonPopout, model: Model, windowId: string): WindowLayout;
-}

package/declarations/src/Attribute.d.ts

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

package/declarations/src/AttributeDefinitions.d.ts

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

package/declarations/src/DockLocation.d.ts

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

package/declarations/src/DropInfo.d.ts

@@ -1,12 +0,0 @@
-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/declarations/src/I18nLabel.d.ts

@@ -1,10 +0,0 @@
-export declare enum I18nLabel {
-    Close_Tab = "Close",
-    Close_Tabset = "Close tabset",
-    Move_Tabset = "Move tabset",
-    Maximize = "Maximize tabset",
-    Restore = "Restore tabset",
-    Popout_Tab = "Show selected tab in a floating window",
-    Overflow_Menu_Tooltip = "Hidden tabs",
-    Error_rendering_component = "Error rendering component"
-}

package/declarations/src/Orientation.d.ts

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

package/declarations/src/PopupMenu.d.ts

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

package/declarations/src/Rect.d.ts

@@ -1,31 +0,0 @@
-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 getBoundingClientRect(element: Element): Rect;
-    static getContentRect(element: HTMLDivElement): Rect;
-    static fromDomRect(domRect: DOMRect): Rect;
-    relativeTo(r: Rect | DOMRect): 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;
-}