flexlayout-react 0.8.9 → 0.8.11

package/ChangeLog.txt

@@ -1,3 +1,15 @@
+0.8.11
+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.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

package/README.md

@@ -4,7 +4,7 @@
 ![npm](https://img.shields.io/npm/dw/flexlayout-react)
 [![npm](https://img.shields.io/npm/v/flexlayout-react)](https://www.npmjs.com/package/flexlayout-react)
 
-FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved.
+FlexLayout is a layout manager that arranges React components in multiple tabsets, tabs can be resized and moved.
 
 ![FlexLayout Demo Screenshot](screenshots/Screenshot_light.png?raw=true "FlexLayout Demo Screenshot")
 
@@ -22,20 +22,21 @@ Features:
 *	splitters
 *	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
-*	maximize tab set (double click tab set header or use icon)
+*	tabset dragging (move all the tabs in a tabset in one operation)
+*	dock to tabset or edge of frame
+*	maximize tabset (double click tabset header or use icon)
 *	tab overflow (show menu when tabs overflow, scroll tabs using mouse wheel)
-*   border tab sets
+*   border tabsets
 *   popout tabs into new browser windows
 *	submodels, allow layouts inside layouts
 *	tab renaming (double click tab text to rename)
 *	theming - light, dark, underline, gray, rounded and combined
 *	works on mobile devices (iPad, Android)
-*   add tabs using drag, add to active tab set, add to tab set by id
-*	tab and tab set attributes: enableTabStrip, enableDock, enableDrop...
-*	customizable tabs and tab set rendering
+*   add tabs using drag, add to active tabset, add to tabset by id
+*	tab and tabset attributes: enableTabStrip, enableDock, enableDrop...
+*	customizable tabs and tabset rendering
 *   component state is preserved when tabs are moved
+*   Playwright tests
 *	typescript type declarations
 
 ## Installation
@@ -71,7 +72,7 @@ or by adding the css to your html:
 
 ## Usage
 
-The `<Layout>` component renders the tab sets and splitters, it takes the following props:
+The `<Layout>` component renders the tabsets and splitters, it takes the following props:
 
 
 #### Required props:
@@ -150,9 +151,9 @@ function App() {
 }
 ```		
 
-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.
+The above code would render two tabsets 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.
 
-<img src="screenshots/Screenshot_two_tabs.png?raw=true" alt="Simple layout" title="Generated Layout" style="border: 1px solid #ccc;" />
+<img src="screenshots/Screenshot_two_tabs.png?raw=true" alt="Simple layout" title="Generated Layout"/>
 
 
 Try it now using [CodeSandbox](https://codesandbox.io/p/sandbox/yvjzqf)
@@ -233,8 +234,7 @@ You can use the `<Layout>` prop onRenderTab to customize the tab rendering:
 
 <img src="screenshots/Screenshot_customize_tab.png?raw=true"
      alt="FlexLayout Tab structure"
-     title="Tab structure"
-     style="border: 1px solid #ccc;" />
+     title="Tab structure"/>
 
 Update the renderValues parameter as needed:
 
@@ -254,15 +254,14 @@ onRenderTab = (node: TabNode, renderValues: ITabRenderValues) => {
 }
 ```
 
-## Customizing Tab sets
+## Customizing Tabsets
 
-You can use the `<Layout>` prop onRenderTabSet to customize the tab set rendering:
+You can use the `<Layout>` prop onRenderTabSet to customize the tabset rendering:
 
 
 <img src="screenshots/Screenshot_customize_tabset.png?raw=true"
      alt="FlexLayout Tab structure"
-     title="Tab set structure"
-     style="border: 1px solid #ccc;" />
+     title="Tabset structure" />
 
 Update the renderValues parameter as needed:
 
@@ -342,11 +341,11 @@ The JSON model is well defined as a set of TypeScript interfaces, see the doc fo
 
 [Row Attributes doc](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.8/typedoc/interfaces/IJsonRowNode.html)
 
-## Tab Set Config Attributes
+## TabSet Config Attributes
 
-[Tab set Attributes doc](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.8/typedoc/interfaces/IJsonTabSetNode.html)
+[Tabset Attributes doc](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.8/typedoc/interfaces/IJsonTabSetNode.html)
 
-Note: tab sets will be dynamically created as tabs are moved, and deleted when all their tabs are removed (unless enableDeleteWhenEmpty is false).
+Note: tabsets will be dynamically created as tabs are moved, and deleted when all their tabs are removed (unless enableDeleteWhenEmpty is false).
 
 ## Tab Config attributes
 
@@ -371,7 +370,7 @@ Example:
 ```
 layoutRef.current.addTabToTabSet("NAVIGATION", {type:"tab", component:"grid", name:"a grid"});
 ```
-This would add a new grid component to the tab set with id "NAVIGATION" (where layoutRef is a ref to the Layout element, see https://reactjs.org/docs/refs-and-the-dom.html ).
+This would add a new grid component to the tabset with id "NAVIGATION" (where layoutRef is a ref to the Layout element, see https://reactjs.org/docs/refs-and-the-dom.html ).
 
 
 
@@ -439,7 +438,7 @@ for example see the getDocument() callback in agGrid at https://www.ag-grid.com/
     these will not work correctly without modification
 * Some third party controls will suspend when the global document is hidden
     you can use the tab overlay attribute to 'gray out' these tabs when the main window is hidden
-* Resize observers may be throttled (or stay attached to the main window), so you may need to use some other way to resize the component when in a popout (see aggrid component in demo).
+* Resize observers may be throttled (or stay attached to the main window), so you may need to use some other way to resize the component when in a popout.
 * Popouts will not size and position correctly when the browser is zoomed (ie set to 50% zoom)
 * Popouts cannot reload in maximized or minimized states
 * by default flexlayout will maintain react state when moving tabs between windows, but you can use the 
@@ -463,8 +462,15 @@ pnpm start
 
 Open your browser at http://localhost:8080/examples/ to show the examples directory, click on the examples to run them.
 
-The 'pnpm start' command will watch for changes to flexlayout and example source, so you can make changes to the code
-and then refresh the browser to see the result.
+The 'pnpm start' command will watch for changes to flexlayout and example source, so you can make changes to the code and then refresh the browser to see the result.
+
+Once the demo is running you can run the Playwright tests by running (in another terminal window)
+
+```
+pnpm playwright
+```
+
+<img src="screenshots/PlaywrightUI.png?raw=true" alt="PlaywrightUI" title="PlaywrightUI screenshot"/>
 
 To build the npm distribution run 'pnpm build', this will create the artifacts in the dist dir.
 

package/declarations/view/BorderTab.d.ts

@@ -1,2 +1 @@
-import * as React from "react";
-export declare function BorderTab(props: IBorderTabProps): React.JSX.Element;
+export declare function BorderTab(props: IBorderTabProps): import("react/jsx-runtime").JSX.Element;

package/declarations/view/Icons.d.ts

@@ -1,8 +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;
-export declare const AsterickIcon: () => React.JSX.Element;
+export declare const CloseIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const MaximizeIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const OverflowIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const EdgeIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const PopoutIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const RestoreIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const AsterickIcon: () => import("react/jsx-runtime").JSX.Element;

package/declarations/view/Layout.d.ts

@@ -98,7 +98,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.9";
+export declare const FlexLayoutVersion = "0.8.11";
 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/SizeTracker.d.ts

@@ -7,4 +7,4 @@ export interface ISizeTrackerProps {
     tabsRevision: number;
     children: React.ReactNode;
 }
-export declare const SizeTracker: React.MemoExoticComponent<({ children }: ISizeTrackerProps) => React.JSX.Element>;
+export declare const SizeTracker: React.MemoExoticComponent<({ children }: ISizeTrackerProps) => import("react/jsx-runtime").JSX.Element>;