react-simple-dock 0.1.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2023 Perceval Wajsbürt
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,61 @@
+# React-Simple-Dock
+
+A set of React components to create a dockable interface, allowing to arrange and resize tabs.
+
+## Installation
+
+```bash
+npm install react-simple-dock
+```
+
+## Usage
+
+```tsx
+import React from "react";
+import { Layout, Panel } from "react-simple-dock";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
+const DEFAULT_CONFIG = {
+    kind: "row",
+    size: 100,
+    children: [
+        {
+            kind: "column",
+            size: 50,
+            children: [
+                { kind: "leaf", tabs: ["Panel 1"], tabIndex: 0, size: 50 },
+                { kind: "leaf", tabs: ["Panel 2"], tabIndex: 0, size: 50 },
+            ],
+        },
+        { kind: "leaf", tabs: ["Panel 3"], tabIndex: 0, size: 50 },
+    ],
+};
+
+const App = () => (
+    <DndProvider backend={HTML5Backend}>
+        <div style={{ background: "#bdbdbd", width: "100vw", height: "100vh" }}>
+            <Layout
+                /* optional initial layout config */
+                defaultConfig={DEFAULT_CONFIG}
+            >
+                <Panel key="Panel 1">
+                    <p>Content 1</p>
+                </Panel>
+                <Panel key="Panel 2" header={<i>Italic title</i>}>
+                    <p>Content 2</p>
+                </Panel>
+                <Panel key="Panel 3">
+                    <p>Content 3</p>
+                </Panel>
+            </Layout>
+        </div>
+    </DndProvider>
+);
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(<App />);
+```
+
+## Demo
+
+[![Edit react-simple-dock](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-simple-dock-1j2j2?fontsize=14&hidenavigation=1&theme=dark)

package/dist/index.css

@@ -0,0 +1,192 @@
+/* Light Theme, feel free to override */
+:root {
+    --sd-grid-gap: 3px;
+}
+
+:root[data-theme="light"] {
+    --sd-background-color: #fff;
+    --sd-text-color: #000;
+    --sd-tab-border-color: #bdbdbd;
+    --sd-tab-background-color: white;
+    --sd-header-background-color: white;
+    --sd-header-border-color: #cecece;
+    --sd-overlay-color: rgba(69, 159, 232, 0.51);
+    --sd-highlight-color: #4591e8;
+}
+
+/* Dark Theme, feel free to override */
+:root[data-theme="dark"] {
+    --sd-background-color: #22272e;
+    --sd-text-color: #fff;
+    --sd-border-color: #666;
+    --sd-tab-border-color: #111;
+    --sd-highlight-color: #4591e8;
+    --sd-tab-background-color: #1c2128;
+    --sd-header-background-color: #333;
+    --sd-header-border-color: #444;
+    --sd-overlay-color: rgba(105, 159, 232, 0.51);
+}
+
+body[data-jp-theme-light] {
+    /* don't care about the theme, just that we're in JupyterLab */
+    --sd-grid-gap: 7px;
+    --sd-background-color: var(--jp-layout-color3);
+}
+
+.resize-border {
+    position: absolute;
+    background-color: var(--sd-background-color, #fff);
+    opacity: 0;
+    z-index: 10;
+}
+
+.resize-border:hover {
+    opacity: 0.8;
+}
+
+.resize-border.bottom {
+    bottom: calc(0px - var(--sd-grid-gap));
+    left: 0;
+    right: 0;
+    height: calc((var(--sd-grid-gap)));
+    cursor: row-resize;
+}
+
+.resize-border.right {
+    top: 0;
+    bottom: 0;
+    right: calc(0px - var(--sd-grid-gap));
+    width: calc((var(--sd-grid-gap)));
+    cursor: col-resize;
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+}
+
+.tab-handle-overlay {
+    position: absolute;
+    box-sizing: border-box;
+    display: none;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+    background: var(--sd-overlay-color, rgba(69, 159, 232, 0.51));
+    border: 2px dashed var(--sd-highlight-color, #4591e8);
+
+    pointer-events: none;
+    transition: 0s linear;
+    transition-property: left, right, top, bottom, width, height;
+}
+
+.panel {
+    position: relative;
+    display: flex;
+    flex: 1 100000000 0;
+    align-self: stretch;
+    height: 100%;
+    width: 100%;
+    background: var(--sd-background-color);
+}
+
+.panel.leaf {
+    flex-direction: column;
+}
+
+.row > .panel-content,
+.column > .panel-content {
+    display: grid;
+    grid-gap: var(--sd-grid-gap);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.leaf > .panel-content {
+    position: relative;
+    flex: 1;
+}
+
+.leaf > .panel-content > div {
+    background: var(--sd-tab-background-color);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+}
+
+/* TAB HEADER */
+
+.tab-header {
+    display: flex;
+    flex-direction: row;
+    height: var(--sd-header-height);
+}
+
+.tab-header-border {
+    position: relative;
+    height: 1px;
+    background: var(--sd-tab-border-color, #cecece);
+    margin-top: -2px;
+    z-index: 0;
+}
+
+.tab-header-bottom {
+    position: relative;
+    background: var(--sd-tab-background-color, white);
+    height: 3px;
+    z-index: 2;
+    border: solid var(--sd-tab-border-color, #bdbdbd);
+    border-width: 0 1px 1px 1px;
+    /*
+    Why did I put this ? It messes up the overall width of the layout
+    margin-left: -1px;
+    margin-right: -1px;
+    */
+}
+
+.tab-placeholder {
+    width: 0;
+    transition: width 0.1s linear;
+    height: 0;
+}
+
+.tab-handle {
+    position: relative;
+    box-sizing: border-box;
+    padding: 5px;
+    color: var(--sd-text-color, #000);
+    background: var(--sd-tab-background-color, white);
+    font-size: calc((var(--sd-header-height) - 12px) * 0.8);
+    border: solid var(--sd-tab-border-color, #bdbdbd);
+    border-width: 1px 1px 1px 1px;
+    /* Too overlap the border of the next handle and avoid double borders */
+    margin-right: -1px;
+    z-index: 1;
+}
+
+.tab-handle:nth-child(2) {
+    border-left-width: 1px;
+}
+
+.tab-handle.tab-handle__hidden {
+    z-index: 0;
+}
+
+.tab-handle.tab-handle__visible:before {
+    content: "";
+    display: block;
+    background: var(--sd-highlight-color, #4591e8);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./index.css";
+import { LayoutConfig, PanelProps } from "./types";
+export declare const Panel: (props: PanelProps) => any;
+export declare function Layout(props: {
+    children: React.ReactElement<PanelProps>[] | React.ReactElement<PanelProps>;
+    defaultConfig?: LayoutConfig;
+    wrapDnd?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -0,0 +1,380 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import "./index.css";
+import { DndProvider, useDrag, useDragDropManager, useDrop } from "react-dnd";
+import { filterPanels, movePanel } from "./utils";
+import { HTML5Backend } from "react-dnd-html5-backend";
+export const Panel = (props) => {
+    return null;
+};
+function useForceUpdate() {
+    const [value, setValue] = useState(0); // integer state
+    return () => setValue((value) => value + 1); // update state to force render
+}
+const getPanelElementHeader = (node) => node.children[0];
+const TabHandle = ({ name, index, visible, onClick, children, }) => {
+    const getItem = () => ({
+        name,
+        handleElement: targetRef.current,
+        width: targetRef.current.offsetWidth,
+    });
+    const targetRef = useRef(null);
+    const [{}, dragRef] = useDrag(() => ({
+        type: "TabHeader",
+        collect: () => ({}),
+        item: getItem,
+    }), [name]);
+    return (_jsx("div", { className: `tab-handle tab-handle__${visible ? "visible" : "hidden"}`, ref: (element) => {
+            dragRef(element);
+            targetRef.current = element;
+        }, onClick: () => onClick(index), children: children }));
+};
+const TabHeader = ({ config, onClick, leaves, }) => {
+    return (_jsxs("div", { children: [_jsxs("div", { className: "tab-header", children: [config.tabs
+                        .map((tab, i) => [
+                        _jsx("div", { className: "tab-placeholder", style: { width: "0px" }, "data-panel-name": tab }, `${i}-placeholder`),
+                        _jsx(TabHandle, { name: tab, index: i, visible: config.tabIndex === i, onClick: onClick, children: leaves[tab].header || tab }, i),
+                    ])
+                        .flat(), _jsx("div", { className: "tab-placeholder" })] }), _jsx("div", { className: "tab-header-border" }), _jsx("div", { className: "tab-header-bottom" })] }));
+};
+const NestedPanel = React.memo(({ leaves, config, index, onResize, saveSizes, isLast, direction, style, panelElements, }) => {
+    const startEvent = useRef(null);
+    const savedSizes = useRef([]);
+    const forceUpdate = useForceUpdate();
+    useEffect(() => {
+        const handleMouseUp = (e) => {
+            document.removeEventListener("mousemove", startEvent.current?.handleMouseMove);
+            if (startEvent.current) {
+                e.preventDefault();
+            }
+            startEvent.current = null;
+        };
+        document.addEventListener("mouseup", handleMouseUp);
+        // Make sure to remove event listener on component unmount
+        return () => {
+            document.removeEventListener("mouseup", handleMouseUp);
+            document.removeEventListener("mousemove", startEvent.current?.handleMouseMove);
+        };
+    }, []);
+    useLayoutEffect(() => {
+        panelElements.set(config, panelRef.current);
+        return () => {
+            panelElements.delete(config);
+        };
+    }, [config]);
+    const handleMouseMove = useCallback((e) => {
+        if (!startEvent.current) {
+            return;
+        }
+        e.preventDefault();
+        const { clientX, clientY } = e;
+        // get Panel top left corner
+        const { top, left } = (startEvent.current?.target).parentElement.getBoundingClientRect();
+        let ratio;
+        if (startEvent.current.side === "bottom") {
+            ratio = (clientY - top) / startEvent.current.height;
+        }
+        else if (startEvent.current.side === "right") {
+            ratio = (clientX - left) / startEvent.current.width;
+        }
+        else {
+            return;
+        }
+        onResize && onResize(ratio, index, startEvent.current.target);
+    }, [onResize, index]);
+    const handleMouseDown = (e, side) => {
+        if (startEvent.current) {
+            return;
+        }
+        document.addEventListener("mousemove", handleMouseMove);
+        const { top, left } = e.currentTarget.parentElement.getBoundingClientRect();
+        e.preventDefault();
+        saveSizes && saveSizes();
+        startEvent.current = {
+            width: e.clientX - left,
+            height: e.clientY - top,
+            target: e.currentTarget,
+            side: side,
+            handleMouseMove,
+            size: config.size,
+        };
+    };
+    const makeStyle = () => {
+        if (config.kind === "row") {
+            // return {gridTemplateColumns: config.children.map(c => `calc((${100}% - var(--grid-gap) * ${config.children.length - 1}) * ${c.size / 100})`).join(" ")};
+            return {
+                gridTemplateColumns: config.children.map((c) => `${c.size}fr`).join(" "),
+            };
+        }
+        if (config.kind === "column") {
+            // return {gridTemplateRows: config.children.map(c => `calc((${100}% - var(--grid-gap) * ${config.children.length - 1}) * ${c.size / 100})`).join(" ")};
+            return {
+                gridTemplateRows: config.children.map((c) => `${c.size}fr`).join(" "),
+            };
+        }
+    };
+    const handleResize = useCallback((ratio, idx, target) => {
+        if (config.kind === "leaf")
+            return;
+        let size = savedSizes.current[idx] * ratio;
+        let nextSize = savedSizes.current[idx + 1] + (savedSizes.current[idx] - size);
+        const total = savedSizes.current.reduce((a, b) => a + b, 0);
+        const headerHeight = getPanelElementHeader(target.parentElement).offsetHeight;
+        if (config.kind === "column") {
+            const parentHeight = panelContentRef.current.offsetHeight;
+            if ((size * parentHeight) / total < headerHeight) {
+                size = (headerHeight / parentHeight) * total;
+                nextSize = savedSizes.current[idx + 1] + (savedSizes.current[idx] - size);
+            }
+            else if ((nextSize * parentHeight) / total < headerHeight) {
+                nextSize = (headerHeight / parentHeight) * total;
+                size = savedSizes.current[idx] + (savedSizes.current[idx + 1] - nextSize);
+            }
+        }
+        config.children[idx].size = size;
+        config.children[idx + 1].size = nextSize;
+        Object.assign(panelContentRef.current.style, makeStyle());
+    }, [config]);
+    const handleSaveSizes = useCallback(() => {
+        if (config.kind === "leaf")
+            return;
+        savedSizes.current = config.children.map((child) => child.size);
+    }, [config]);
+    const handleHeaderClick = (i) => {
+        if (config.kind === "leaf") {
+            forceUpdate();
+            config.tabIndex = i;
+        }
+    };
+    const panelContentRef = useRef(null);
+    const panelRef = useRef(null);
+    return (_jsxs("div", { className: `${config.kind} panel`, style: style, ref: panelRef, children: [config.kind === "leaf" ? (_jsx(TabHeader, { config: config, leaves: leaves, onClick: handleHeaderClick })) : null, _jsx("div", { className: "panel-content", ref: panelContentRef, style: makeStyle(), children: config.kind === "leaf" ? (config.tabIndex < config.tabs.length ? (_jsx("div", { children: leaves[config.tabs[config.tabIndex]].element })) : (_jsx("div", { style: { width: "100%", height: "100%" } }))) : (config.children.map((c, i) => (_jsx(NestedPanel, { config: c, leaves: leaves, saveSizes: handleSaveSizes, index: i, onResize: handleResize, isLast: i === config.children.length - 1, direction: config.kind, panelElements: panelElements }, i)))) }), !isLast && direction === "column" && (_jsx("div", { className: "resize-border bottom", onMouseDown: (e) => handleMouseDown(e, "bottom") })), !isLast && direction === "row" && (_jsx("div", { className: "resize-border right", onMouseDown: (e) => handleMouseDown(e, "right") }))] }));
+});
+const Overlay = ({ panelElements, onDrop, rootConfig, }) => {
+    const closestRef = useRef(null);
+    const lastItem = useRef(null);
+    let lastPlaceholder = useRef(null);
+    const clearDnDState = () => {
+        setTimeout(() => {
+            if (lastItem.current) {
+                lastItem.current.handleElement.style.display = "block";
+                lastItem.current = null;
+            }
+        }, 0);
+        if (lastPlaceholder.current) {
+            lastPlaceholder.current.style.width = "0px";
+            lastPlaceholder.current.style.transition = "0s linear";
+            setTimeout(() => {
+                lastPlaceholder.current.style.transition = "0.1s linear";
+            }, 0);
+        }
+    };
+    const dropRef = useDrop(() => ({
+        accept: "TabHeader",
+        drop: (item) => {
+            clearDnDState();
+            onDrop(closestRef.current, item.name);
+        },
+    }), [onDrop])[1];
+    const dragDropManager = useDragDropManager();
+    const monitor = dragDropManager.getMonitor();
+    const subscribeOffsetChangeRef = useRef(null);
+    const subscribeStateChangeRef = useRef(null);
+    useEffect(() => {
+        // print with uuid of rootConfig
+        if (subscribeStateChangeRef.current) {
+            subscribeStateChangeRef.current();
+            subscribeStateChangeRef.current = null;
+        }
+        subscribeStateChangeRef.current = monitor.subscribeToStateChange(() => {
+            const draggedItem = monitor.getItem();
+            if (!monitor.isDragging() && lastItem.current?.handleElement.previousSibling) {
+                lastItem.current.handleElement.previousSibling.style.height = "0px";
+                clearDnDState();
+            }
+            if (monitor.getItemType() === "TabHeader" && monitor.isDragging() && !subscribeOffsetChangeRef.current) {
+                const name = draggedItem.name;
+                const placeholder = draggedItem.handleElement.previousSibling;
+                if (placeholder) {
+                    placeholder.style.height = draggedItem.handleElement.offsetHeight + "px";
+                }
+                const overlay = overlayRef.current;
+                let zones = [];
+                for (const [config, element] of panelElements.current.entries()) {
+                    const rect = element.getBoundingClientRect();
+                    const { left, top, width, height } = rect;
+                    const pushZone = (index, left, top, width, height) => {
+                        const rect = { left, top, width, height };
+                        zones.push({ rect, config, index, element });
+                    };
+                    if (config.kind === "leaf") {
+                        if (!config.tabs.includes(name)) {
+                            pushZone("TOP", left, top, width, height / 2);
+                            pushZone("BOTTOM", left, top + height / 2, width, height / 2);
+                            pushZone("LEFT", left, top, width / 2, height);
+                            pushZone("RIGHT", left + width / 2, top, width / 2, height);
+                        }
+                        pushZone("CENTER", left, top, width, height);
+                        pushZone("TAB", left, top, width, getPanelElementHeader(element).offsetHeight);
+                    }
+                    else {
+                        const firstTabs = config.children?.[0]?.tabs || [null];
+                        const lastTabs = config.children?.[config.children.length - 1]?.tabs || [null];
+                        if (config.kind === "row" || config === rootConfig) {
+                            const zoneWidth = width / (config.kind === "row" ? config.children.length + 1 : 2);
+                            // check that the dragged item is not the last item in the row and a single tab
+                            if (lastTabs.length > 1 || lastTabs[0] !== name) {
+                                pushZone("RIGHT", left + width - zoneWidth, top, zoneWidth, height);
+                            }
+                            if (firstTabs.length > 1 || firstTabs[0] !== name) {
+                                pushZone("LEFT", left, top, zoneWidth, height);
+                            }
+                        }
+                        if (config.kind === "column" || config === rootConfig) {
+                            const zoneHeight = height / (config.kind === "column" ? config.children.length + 1 : 2);
+                            if (lastTabs.length > 1 || lastTabs[0] !== name) {
+                                pushZone("BOTTOM", left, top + height - zoneHeight, width, zoneHeight);
+                            }
+                            if (firstTabs.length > 1 || firstTabs[0] !== name) {
+                                pushZone("TOP", left, top, width, zoneHeight);
+                            }
+                        }
+                    }
+                }
+                if (!zones.length)
+                    return;
+                overlay.style.display = "block";
+                overlay.style.transition = "0s linear";
+                lastItem.current = draggedItem;
+                draggedItem.handleElement.nextSibling.style.transition = "0.0s linear";
+                draggedItem.handleElement.nextSibling.style.width =
+                    draggedItem.handleElement.getBoundingClientRect().offsetWidth + "px";
+                lastPlaceholder.current = draggedItem.handleElement.nextSibling;
+                subscribeOffsetChangeRef.current = monitor.subscribeToOffsetChange(() => {
+                    let candidateZones = zones;
+                    const offset = monitor.getClientOffset();
+                    const draggedItem = monitor.getItem();
+                    if (!offset || !draggedItem)
+                        return;
+                    const overlay = overlayRef.current;
+                    if (overlay.style.transition !== "0.1s linear") {
+                        setTimeout(() => {
+                            overlay.style.transition = "0.1s linear";
+                        }, 0);
+                    }
+                    draggedItem.handleElement.style.display = "none";
+                    if (draggedItem.handleElement.nextSibling.style.transition !== "0.1s linear") {
+                        setTimeout(() => {
+                            draggedItem.handleElement.nextSibling.style.transition = "0.1s linear";
+                        }, 0);
+                    }
+                    const { left: offsetX, top: offsetY } = overlay.parentElement.getBoundingClientRect();
+                    const closest = candidateZones
+                        .map((zone, i) => {
+                        if (zone.index === "TAB") {
+                            if (offset.x > zone.rect.left &&
+                                offset.x < zone.rect.left + zone.rect.width &&
+                                offset.y > zone.rect.top - zone.rect.height &&
+                                offset.y < zone.rect.top + zone.rect.height * 2) {
+                                return {
+                                    ...zone,
+                                    distance: -100000 + Math.abs(zone.rect.top - offset.y),
+                                };
+                            }
+                            else {
+                                return { ...zone, distance: 100000 };
+                            }
+                        }
+                        const center = {
+                            x: zone.rect.left + zone.rect.width / 2,
+                            y: zone.rect.top + zone.rect.height / 2,
+                        };
+                        // const area = (zone.rect.width * zone.rect.height) / (containerRef.current!.offsetWidth * containerRef.current!.offsetHeight);
+                        const distance = Math.sqrt(Math.pow(center.x - offset.x, 2) + Math.pow(center.y - offset.y, 2)); // / Math.sqrt(area);
+                        return { ...zone, distance };
+                    })
+                        .sort((a, b) => a.distance - b.distance)[0];
+                    closestRef.current = closest;
+                    dropRef(closest.element);
+                    overlay.style.left = `${closest.rect.left - offsetX}px`;
+                    overlay.style.top = `${closest.rect.top - offsetY}px`;
+                    overlay.style.width = `${closest.rect.width}px`;
+                    overlay.style.height = `${closest.rect.height}px`;
+                    if (closest.index === "TAB") {
+                        // Lookup tab-placeholder nodes in the closest.element dom node
+                        const tabPlaceholders = Array.from(closest.element.querySelectorAll(".tab-placeholder"));
+                        const closestPlaceholder = tabPlaceholders
+                            .filter((element) => element.getAttribute("data-panel-name") !== draggedItem.name)
+                            .map((element, i) => {
+                            const rect = element.getBoundingClientRect();
+                            return {
+                                before: element.getAttribute("data-panel-name"),
+                                element: element,
+                                distance: Math.abs(rect.left + rect.width / 2 - offset.x),
+                            };
+                        })
+                            .sort((a, b) => a.distance - b.distance)[0];
+                        if (lastPlaceholder.current && lastPlaceholder.current !== closestPlaceholder.element) {
+                            lastPlaceholder.current.style.width = "0px";
+                        }
+                        closestPlaceholder.element.style.width = draggedItem.width + "px";
+                        lastPlaceholder.current = closestPlaceholder.element;
+                        closest.before = closestPlaceholder.before;
+                    }
+                    else if (lastPlaceholder.current) {
+                        lastPlaceholder.current.style.width = "0px";
+                    }
+                });
+            }
+            else if (subscribeOffsetChangeRef.current && !monitor.isDragging()) {
+                subscribeOffsetChangeRef.current();
+                subscribeOffsetChangeRef.current = null;
+                overlayRef.current.style.display = "none";
+                overlayRef.current.style.left = "0";
+                overlayRef.current.style.top = "0";
+                overlayRef.current.style.width = "0";
+                overlayRef.current.style.height = "0";
+            }
+        });
+    }, [monitor, onDrop, rootConfig]);
+    const overlayRef = useRef(null);
+    return _jsx("div", { className: "tab-handle-overlay", ref: overlayRef });
+};
+export function Layout(props) {
+    const children = React.Children.toArray(props.children);
+    const namedChildren = Object.fromEntries(children.map((c, i) => [
+        c.props.name || (c.key !== null ? c.key.toString().slice(2) : `unnamed-${i}`),
+        {
+            element: c.props.children,
+            header: c.props.header,
+        },
+    ]));
+    const panelElements = useRef(new Map());
+    const [rootConfig, setRootConfig] = useState(props.defaultConfig || {
+        kind: "row",
+        size: 1,
+        children: children.map((c, i) => ({
+            kind: "leaf",
+            tabs: [c.props.name || (c.key !== null ? c.key.toString().slice(2) : `unnamed-${i}`)],
+            tabIndex: 0,
+            size: 100 / children.length,
+        })),
+    });
+    let config = rootConfig;
+    if (rootConfig.kind !== "leaf" || rootConfig.tabs.length > 0) {
+        const newConfig = filterPanels(Object.keys(namedChildren), rootConfig);
+        if (newConfig !== rootConfig) {
+            config = newConfig || { kind: "leaf", tabs: [], tabIndex: 0, size: 100 };
+            setRootConfig(config);
+        }
+    }
+    const handleDrop = (zone, name) => {
+        const newConfig = movePanel(zone, name, rootConfig);
+        setRootConfig(newConfig);
+    };
+    const container = (_jsxs("div", { className: "container", children: [_jsx(NestedPanel, { leaves: namedChildren, config: config, panelElements: panelElements.current }), _jsx(Overlay, { panelElements: panelElements, onDrop: handleDrop, rootConfig: config })] }));
+    if (props.wrapDnd) {
+        return _jsx(DndProvider, { backend: HTML5Backend, children: container });
+    }
+    return container;
+}

package/dist/types.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+/**
+ * Leaf layout configuration.
+ *
+ * Represents a panel that contains one or more tabs along with the current tab index and its size.
+ */
+export type LeafLayoutConfig = {
+    kind: "leaf";
+    tabs: string[];
+    tabIndex: number;
+    size: number;
+    nesting?: number;
+};
+/**
+ * Container layout configuration.
+ *
+ * Represents a container panel that arranges its child panels in either a row or a column.
+ */
+export type ContainerLayoutConfig = {
+    kind: "row" | "column";
+    children: LayoutConfig[];
+    size: number;
+    nesting?: number;
+};
+/**
+ * Layout configuration.
+ *
+ * A union type that represents either a leaf panel (with tabs) or a container panel (row/column with children).
+ */
+export type LayoutConfig = LeafLayoutConfig | ContainerLayoutConfig;
+/**
+ * Properties for a panel component.
+ *
+ * Defines the children to render within the panel, an optional name, and an optional header.
+ */
+export type PanelProps = {
+    children: React.ReactNode;
+    name?: string;
+    header?: React.ReactNode;
+};
+/**
+ * Represents a drop zone within the layout.
+ *
+ * Includes the rectangular coordinates, the associated layout configuration,
+ * an a to indicate the drop position, and a reference to the related DOM element.
+ */
+export type Zone = {
+    rect: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    config: LayoutConfig;
+    index: "LEFT" | "RIGHT" | "TOP" | "BOTTOM" | "CENTER" | "TAB";
+    element: HTMLElement;
+    before?: string;
+};
+/**
+ * Drag and drop item for tab header drag operations.
+ *
+ * Contains the panel name and a reference to the draggable element.
+ */
+export type DnDItem = {
+    name: string;
+    handleElement: HTMLDivElement;
+};

package/dist/types.js

@@ -0,0 +1,6 @@
+const LEFT = 0;
+const RIGHT = 1;
+const TOP = 2;
+const BOTTOM = 3;
+const TAB = 4;
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,26 @@
+import { Zone, LayoutConfig } from "./types";
+/**
+ * Moves a panel within the layout based on a drop zone and panel name.
+ *
+ * This function traverses the layout config tree, removing the panel from its original position,
+ * and re-inserting it based on the provided drop zone. It handles both leaf and container nodes,
+ * ensuring proper size calculations and layout updates.
+ *
+ * @param zone - The drop zone where the panel is to be moved.
+ * @param name - The name of the panel being moved.
+ * @param inside - The layout config in which the move operation takes place.
+ * @returns The updated layout config after moving the panel.
+ */
+export declare const movePanel: (zone: Zone | null, name: string, inside: LayoutConfig) => LayoutConfig;
+/**
+ * Filters panels from a layout configuration based on a provided list of panel names.
+ *
+ * Traverses the layout configuration tree and removes any panels (or tabs within panels)
+ * whose names are not included in the specified list. It simplifies nodes by filtering
+ * out unwanted tabs and recursively updating container nodes.
+ *
+ * @param names - An array of panel names that should remain in the layout.
+ * @param inside - The layout configuration to filter.
+ * @returns The updated layout configuration with only the specified panels, or null if empty.
+ */
+export declare const filterPanels: (names: string[], inside: LayoutConfig) => LayoutConfig;

package/dist/utils.js

@@ -0,0 +1,248 @@
+/**
+ * Simplifies a layout configuration by flattening nested layouts with the same kind.
+ *
+ * If the layout configuration is a row or column, this function will flatten any nested child configurations
+ * that have the same kind as the parent. It recalculates the size of nested items based on their parent's size.
+ *
+ * @param config - The layout configuration to simplify.
+ * @returns The simplified layout configuration.
+ */
+const simplifyLayout = (config) => {
+    if (config.kind === "row" || config.kind === "column") {
+        let expandedChildren = [];
+        let changed = false;
+        config.children.forEach((child) => {
+            if (child.kind === config.kind) {
+                changed = true;
+                const totalChildContainerSize = child.children.reduce((a, b) => a + b.size, 0);
+                child.children.forEach((grandChild) => {
+                    expandedChildren.push({
+                        ...grandChild,
+                        size: (child.size * grandChild.size) / totalChildContainerSize,
+                    });
+                });
+            }
+            else {
+                expandedChildren.push(child);
+            }
+        });
+        if (changed) {
+            config = { ...config, children: expandedChildren };
+        }
+    }
+    return config;
+};
+/**
+ * Moves a panel within the layout based on a drop zone and panel name.
+ *
+ * This function traverses the layout config tree, removing the panel from its original position,
+ * and re-inserting it based on the provided drop zone. It handles both leaf and container nodes,
+ * ensuring proper size calculations and layout updates.
+ *
+ * @param zone - The drop zone where the panel is to be moved.
+ * @param name - The name of the panel being moved.
+ * @param inside - The layout config in which the move operation takes place.
+ * @returns The updated layout config after moving the panel.
+ */
+export const movePanel = (zone, name, inside) => {
+    const editLayout = (visitedConfig) => {
+        let config = visitedConfig;
+        if (config.kind === "leaf" && config.tabs.includes(name)) {
+            /* If it's a simple leaf, try to remove the matching tab if it was
+             * the tab that was picked by the user (since we're moving it) */
+            const newTabs = config.tabs.filter((tabName) => tabName !== name);
+            config = {
+                ...config,
+                tabs: newTabs,
+                tabIndex: Math.min(newTabs.length - 1, config.tabIndex),
+            };
+            if (config.tabs.length === 0) {
+                config = null;
+            }
+        }
+        /* If this zone is the zone targeted as drop-zone by the user */
+        if (zone && visitedConfig === zone.config) {
+            if (config === null) {
+                return {
+                    kind: "leaf",
+                    tabs: [name],
+                    tabIndex: 0,
+                    size: visitedConfig.size,
+                };
+            }
+            // or it's a container zone
+            else if (config.kind === "row" || config.kind === "column") {
+                const totalSize = config.children.reduce((a, b) => a + b.size, 0);
+                const fraction = config.kind === "column"
+                    ? zone.rect.height / zone.element.parentElement.offsetHeight
+                    : zone.rect.width / zone.element.parentElement.offsetWidth;
+                // x / (y + x) = a
+                // x = a y + a x
+                // x = a y / ( 1 - a )
+                const newConfigKind = zone.index === "TOP" || zone.index === "BOTTOM" ? "column" : "row";
+                if (config.kind === newConfigKind) {
+                    const newZone = {
+                        kind: "leaf",
+                        tabs: [name],
+                        tabIndex: 0,
+                        size: (totalSize * fraction) / (1 - fraction),
+                    };
+                    config = {
+                        ...config,
+                        children: zone.index === "LEFT" || zone.index === "TOP"
+                            ? [newZone, ...config.children.map(editLayout).filter((c) => c !== null)]
+                            : [...config.children.map(editLayout).filter((c) => c !== null), newZone],
+                    };
+                }
+                else {
+                    const newZone = {
+                        kind: "leaf",
+                        tabs: [name],
+                        tabIndex: 0,
+                        size: 50,
+                    };
+                    const oldConfig = {
+                        ...config,
+                        // Remove the panel that is being moved
+                        children: config.children.map(editLayout).filter((c) => c !== null),
+                        size: 50,
+                    };
+                    config = {
+                        kind: newConfigKind,
+                        children: zone.index === "TOP" || zone.index === "LEFT" ? [newZone, oldConfig] : [oldConfig, newZone],
+                        size: config.size,
+                    };
+                }
+            }
+            // Or it's a leaf zone
+            else if (config.kind === "leaf") {
+                if (zone.index === "CENTER") {
+                    const newTabs = [...config.tabs.filter((tabName) => tabName !== name), name];
+                    config = {
+                        ...config,
+                        tabs: newTabs,
+                        tabIndex: newTabs.length - 1,
+                    };
+                }
+                else if (zone.index === "TAB") {
+                    const newTabs = [...config.tabs];
+                    let insertIndex = newTabs.findIndex((tabName) => tabName === zone.before);
+                    if (insertIndex === -1) {
+                        insertIndex = newTabs.length;
+                    }
+                    newTabs.splice(insertIndex, 0, name);
+                    config = {
+                        ...config,
+                        tabs: newTabs,
+                        tabIndex: insertIndex,
+                    };
+                }
+                else {
+                    const newZone = {
+                        kind: "leaf",
+                        tabs: [name],
+                        tabIndex: 0,
+                        size: 50,
+                    };
+                    config = {
+                        kind: zone.index === "TOP" || zone.index === "BOTTOM" ? "column" : "row",
+                        children: zone.index === "TOP" || zone.index === "LEFT"
+                            ? [newZone, { ...config, size: 50 }]
+                            : [{ ...config, size: 50, }, newZone],
+                        size: config.size,
+                    };
+                }
+            }
+        }
+        // If there is nothing left after removing the dropped zone
+        else if (config === null) {
+            return null;
+        }
+        // Otherwise, recurse into the node
+        else {
+            let hasChanged = false;
+            if (config.kind !== "leaf") {
+                const children = config.children
+                    .map((child) => {
+                    const updated = editLayout(child);
+                    if (updated !== child) {
+                        hasChanged = true;
+                    }
+                    return updated;
+                })
+                    .filter((child) => child !== null);
+                if (hasChanged) {
+                    config = { ...config, children };
+                }
+            }
+        }
+        if ((config.kind === "leaf" && config.tabs.length === 0) ||
+            (config.kind !== "leaf" && config.children.length === 0)) {
+            return null;
+        }
+        /* Simplify a node of the layout by flattening row children of rows
+         * or column children of columns */
+        config = simplifyLayout(config);
+        return config;
+    };
+    return editLayout(inside);
+};
+/**
+ * Filters panels from a layout configuration based on a provided list of panel names.
+ *
+ * Traverses the layout configuration tree and removes any panels (or tabs within panels)
+ * whose names are not included in the specified list. It simplifies nodes by filtering
+ * out unwanted tabs and recursively updating container nodes.
+ *
+ * @param names - An array of panel names that should remain in the layout.
+ * @param inside - The layout configuration to filter.
+ * @returns The updated layout configuration with only the specified panels, or null if empty.
+ */
+export const filterPanels = (names, inside) => {
+    const editLayout = (visitedConfig) => {
+        let config = visitedConfig;
+        if (config.kind === "leaf" && !config.tabs.every((name) => names.includes(name))) {
+            /* If it's a simple leaf, try to remove the matching tab if it was
+             * the tab that was picked by the user (since we're moving it) */
+            config = {
+                ...config,
+                tabs: config.tabs.filter((name) => names.includes(name)),
+                tabIndex: Math.min(config.tabs.length - 1, config.tabIndex),
+            };
+            if (config.tabs.length === 0) {
+                config = null;
+            }
+        }
+        // If there is nothing left after removing the dropped zone
+        if (config === null) {
+            return null;
+        }
+        // Otherwise, recurse into the node
+        else {
+            let hasChanged = false;
+            if (config.kind !== "leaf") {
+                const children = config.children
+                    .map((child) => {
+                    const updated = editLayout(child);
+                    if (updated !== child) {
+                        hasChanged = true;
+                    }
+                    return updated;
+                })
+                    .filter((child) => child !== null);
+                if (hasChanged) {
+                    config = { ...config, children };
+                }
+            }
+        }
+        if ((config.kind === "leaf" && config.tabs.length === 0) ||
+            (config.kind !== "leaf" && config.children.length === 0)) {
+            return null;
+        }
+        /* Simplify a node of the layout by flattening row children of rows
+         * or column children of columns */
+        config = simplifyLayout(config);
+        return config;
+    };
+    return editLayout(inside);
+};

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "react-simple-dock",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "description": "Simple dock component for React",
+  "repository": "https://github.com/percevalw/react-simple-dock",
+  "author": "Perceval Wajsbürt <perceval.wajsburt@gmail.com>",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "build:lib:babel": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__,*.md",
+    "build:lib": "rm -rf dist && tsc --build tsconfig.lib.json && cp src/lib/*.css dist && rm -rf lib/",
+    "prepublishOnly": "npm run build:lib",
+    "build:pret": "jlpm clean && jupyter labextension build .",
+    "build:pret:dev": "jlpm clean && jupyter labextension build --development True .",
+    "clean": "rm -rf pret/ui/simple_dock/js-extension lib",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "react-dnd": ">=16.0.1",
+    "react-dnd-html5-backend": ">=16.0.1"
+  },
+  "peerDependencies": {
+    "@types/react": ">= 16",
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.126",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "babel-cli": "^6.26.0",
+    "husky": ">=6",
+    "lint-staged": ">=10",
+    "prettier": "^3.5.3",
+    "react": "^19.0.0",
+    "react-app-rewired": "^2.2.1",
+    "react-dom": "^19.0.0",
+    "react-scripts": "5.0.1",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.2",
+    "web-vitals": "^2.1.4"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "jupyterlab": {
+    "extension": "src/plugin.ts",
+    "schemaDir": "src/schema",
+    "outputDir": "pret/ui/simple_dock/js-extension",
+    "webpackConfig": "./webpack.jupyter.js"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "prettier": {
+    "printWidth": 120,
+    "tabWidth": 4
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "lint-staged": {
+    "*.{js,css,md}": "prettier --write"
+  }
+}