flexlayout-react 0.6.8 → 0.7.0

package/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,104 @@
+name: '🐛 Bug report'
+description: Create a report to help us improve
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for reporting an issue :pray:.
+
+        This issue tracker is for reporting bugs found in `FlexLayout` (https://github.com/caplin/FlexLayout).
+        If you have a question about how to achieve something and are struggling, please post a question
+        inside of `FlexLayout` Discussions tab: https://github.com/caplin/FlexLayout/discussions
+
+        Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already:
+         - `FlexLayout` Issues tab: https://github.com/caplin/FlexLayout/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
+         - `FlexLayout` closed issues tab: https://github.com/caplin/FlexLayout/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed
+         - `FlexLayout` Discussions tab: https://github.com/caplin/FlexLayout/discussions
+
+        The more information you fill in, the better the community can help you.
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: Provide a clear and concise description of the challenge you are running into.
+    validations:
+      required: true
+  - type: input
+    id: link
+    attributes:
+      label: Your Example Website or App
+      description: |
+        Which website or app were you using when the bug happened?
+        Note:
+        - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the `FlexLayout` npm package.
+        - To create a shareable code example you can use Stackblitz (https://stackblitz.com/). Please no localhost URLs.
+        - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve.
+      placeholder: |
+        e.g. https://stackblitz.com/edit/...... OR Github Repo
+    validations:
+      required: false
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to Reproduce the Bug or Issue
+      description: Describe the steps we have to take to reproduce the behavior.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behavior
+      description: Provide a clear and concise description of what you expected to happen.
+      placeholder: |
+        As a user, I expected ___ behavior, but I am seeing ___
+    validations:
+      required: true
+  - type: input
+    id: os
+    attributes:
+      label: Operating System
+      description: What opearting system are you using?
+      placeholder: |
+        - OS: [e.g. macOS, Windows, Linux]
+    validations:
+      required: true
+  - type: input
+    id: browsers
+    attributes:
+      label: Browser Type?
+      description: What browsers are you seeing the problem on?
+      placeholder: |
+        - OS: [e.g. Google Chrome, Safari, Firefox, Opera etc]
+    validations:
+      required: true
+  - type: input
+    id: browser_version
+    attributes:
+      label: Browser Version
+      description: What browser version are you using?
+      placeholder: |
+        - Version: [e.g. 91.1]
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots_or_videos
+    attributes:
+      label: Screenshots or Videos
+      description: |
+        If applicable, add screenshots or a video to help explain your problem.
+        For more information on the supported file image/file types and the file size limits, please refer
+        to the following link: https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files
+      placeholder: |
+        You can drag your video or image files inside of this editor ↓
+    validations:
+      required: true
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: 🤔 Feature Requests & Questions
+    url: https://github.com/caplin/FlexLayout/discussions
+    about: Please ask and answer questions here.

package/ChangeLog.txt

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

package/README.md

@@ -8,11 +8,11 @@ FlexLayout is a layout manager that arranges React components in multiple tab se
 
 ![FlexLayout Demo Screenshot](/../screenshots/github_images/v0.5/demo1.png?raw=true "FlexLayout Demo Screenshot")
 
-[Run the Demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.6/demo/index.html)
+[Run the Demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.7/demo/index.html)
 
-Try it now using [JSFiddle](https://jsfiddle.net/18zfp0qm/)
+Try it now using [JSFiddle](https://jsfiddle.net/10kmLzvu/)
 
-[API Doc](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.6/typedoc/index.html)
+[API Doc](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.7/typedoc/index.html)
 
 [Screenshot of Caplin Liberator Explorer using FlexLayout](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.20/images/LiberatorExplorerV3_3.PNG)
 
@@ -55,7 +55,7 @@ Import React and FlexLayout in your modules:
 
 ```
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import * as FlexLayout from "flexlayout-react";
 ```
 
@@ -161,7 +161,7 @@ var json = {
 
 ```
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import * as FlexLayout from "flexlayout-react";
 
 class Main extends React.Component {
@@ -185,13 +185,15 @@ class Main extends React.Component {
     }
 }
 
-ReactDOM.render(<Main/>, document.getElementById("container"));
+const container = document.getElementById("container");
+const root = createRoot(container);
+root.render(<Main/>);
 ```		
 (See the examples for full source code)
 
 The above code would render two tabsets 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.
 
-Try it now using [JSFiddle](https://jsfiddle.net/18zfp0qm/) 
+Try it now using [JSFiddle](https://jsfiddle.net/10kmLzvu/) 
 
 A simple Create React App (CRA) example (using typescript) can be found here:
 
@@ -219,7 +221,7 @@ The model json contains 3 top level elements:
 
 Weights on rows and tabsets specify the relative weight of these nodes within the parent row, the actual values do not matter just their relative values (ie two tabsets of weights 30,70 would render the same if they had weights of 3,7).
 
-NOTE: the easiest way to create your initial layout JSON is to use the [demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.6/demo/index.html) app, modify one of the 
+NOTE: the easiest way to create your initial layout JSON is to use the [demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.7/demo/index.html) app, modify one of the 
 existing layouts by dragging/dropping and adding nodes then press the 'Show Layout JSON in console' button to print the JSON to the browser developer console.
 
 
@@ -611,5 +613,14 @@ yarn cypress
 
 To build the npm distribution run 'yarn build', this will create the artifacts in the dist dir.
 
+## Alternative Layout Managers
+
+| Name | Repository |
+| ------------- |:-------------|
+| rc-dock | https://github.com/ticlo/rc-dock | 
+| 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/view/Icons.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const CloseIcon: () => JSX.Element;
 export declare const MaximizeIcon: () => JSX.Element;
 export declare const OverflowIcon: () => JSX.Element;

package/declarations/view/Layout.d.ts

@@ -21,13 +21,15 @@ export declare type ShowOverflowMenuCallback = (node: TabSetNode | BorderNode, m
     node: TabNode;
 }) => void) => void;
 export declare type TabSetPlaceHolderCallback = (node: TabSetNode) => React.ReactNode;
+export declare type IconFactory = (node: TabNode) => React.ReactNode;
+export declare type TitleFactory = (node: TabNode) => ITitleObject | React.ReactNode;
 export interface ILayoutProps {
     model: Model;
     factory: (node: TabNode) => React.ReactNode;
     font?: IFontValues;
     fontFamily?: string;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => ITitleObject | React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
     icons?: IIcons;
     onAction?: (action: Action) => Action | undefined;
     onRenderTab?: (node: TabNode, renderValues: ITabRenderValues) => void;
@@ -89,7 +91,7 @@ export interface ILayoutState {
     calculatedBorderBarSize: number;
     editingTab?: TabNode;
     showHiddenBorder: DockLocation;
-    portal?: React.ReactNode;
+    portal?: React.ReactPortal;
 }
 export interface IIcons {
     close?: (React.ReactNode | ((tabNode: TabNode) => React.ReactNode));