@finsemble/finsemble-ui 10.0.0-beta.3 → 10.0.0-iocd.2

package/react/components/windowTitleBar/TabRegion.js

@@ -0,0 +1,491 @@
+/**
+ * There are several UI aspects brought together in the tabbing implementation.
+ *
+ * 1) Rendering tab collections. A redux store in the window service provides the single source of truth for tab rendering. Each
+ * WindowTitleBar subscribes to that store via remote-redux. Activity (such as clicking on a tab) is then published back to the
+ * remote store via redux dispatch actions. There are no client side effects that use the FSBL library or FinsembleWindow.
+ *
+ * 2) Tab dragging - this includes re-ordering of tabs, moving tabs between windows, removing tabs from collections and using the tab
+ * drag to initiate tiling. Tab dragging uses the `dragging` section of the remote-redux store to coordinate actions between windows.
+ * The algorithm does not affect the permanent store until the dragging action is complete (when onDragEnd is triggered). The `Tabs` react
+ * component temporarily removes the tab that is being dragged. `Tabs` react components in any window will then create "gaps" in the tab
+ * collection to indicate where the tab will be relocated. Gaps are created with a CSS transform that shifts tabs to the right to make
+ * the gap. Note that extra space is added to the end of the tab collection to balance the space lost when the tab was removed (transform
+ * space is not accounted for by the browser).
+ *
+ * 3) scrolling - A tab collection can be scrolled either with the mousewheel or by clicking on scroll buttons (chevrons). The `useScroll()`
+ * hook performs all the calculations necessary. The entire tab collection is then transformed to the left or right to emulate a scrolling
+ * action.
+ *
+ * 4) Title editing - Double clicking on a title allows it to be edited by the user. When in editing mode, the tab is rendered with an
+ * input field. Enter or Escape can be used to complete the edit.
+ */
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { actions } from "../../../platform/services/window/modules/actions";
+import { WindowNameContext } from "./WindowTitleBarContext";
+import { TabTitle } from "./TabTitle";
+import { useDragRegion } from "../../hooks/useDragRegion";
+import { useMaximize } from "./useMaximize";
+import { TitleEdit } from "./TitleEdit";
+import { FEAGlobals } from "../../../common/Globals";
+const THROTTLE50MS = 50;
+const TabClose = ({ tabWindowName }) => {
+    const dispatch = useDispatch();
+    const closeThisTab = (e) => {
+        // Stop propagation to prevent the tab from being promoted while we're actually closing it
+        e.stopPropagation();
+        dispatch(actions.closeTab({
+            targetWindowName: tabWindowName,
+        }));
+    };
+    return (React.createElement("div", { className: "fsbl-tab-close", onClick: closeThisTab },
+        React.createElement("i", { className: "ff-close" })));
+};
+const TabInnards = ({ editing, title, tabWindowName, cancelEditing, saveTitle, }) => {
+    if (editing)
+        return React.createElement(TitleEdit, { title: title, cancelEditing: cancelEditing, saveTitle: saveTitle });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TabTitle, { tabWindowName: tabWindowName }),
+        React.createElement(TabClose, { tabWindowName: tabWindowName })));
+};
+/**
+ * Sets a custom drag image that is a standard size and semi-opaque. This makes it easier
+ * to see the tabs and gap below the cursor.
+ */
+const setDragImage = (transfer) => {
+    const width = 60;
+    const height = 20;
+    const border = 4;
+    const light = "rgba(255,255,255,.5)";
+    const dark = "rgba(0,0,0,.5)";
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    for (let x = 0; x < width / 2; x++) {
+        for (let y = 0; y < height / 2; y++) {
+            ctx.fillStyle = (x + y) % 2 ? light : dark;
+            ctx.fillRect(x * 2, y * 2, 2, 2);
+        }
+    }
+    ctx.clearRect(border, border, width - border * 2, height - border * 2);
+    // Add to browser body and then immediately remove in the timeout
+    // Position it way off the edge of the screen
+    Object.assign(canvas.style, {
+        position: "absolute",
+        left: "-4000px",
+        top: "-4000px",
+        width: `${width}px`,
+        height: `${height}}px`,
+    });
+    document.body.appendChild(canvas);
+    transfer.setDragImage(canvas, width / 2, height / 2);
+    setTimeout(() => {
+        canvas.remove();
+    });
+};
+/**
+ * Encapsulates logic relating to dragging an individual tab. This interacts with the remote redux store, turning dragging on
+ * and off when dragstart and dragend events are triggered on the tab.
+ */
+const useDragTab = ({ draggable, tabWindowName, windowName, index, domRef, }) => {
+    const dispatch = useDispatch();
+    const state = useSelector((currentState) => currentState);
+    const onDragStart = (e) => {
+        var _a, _b, _c, _d;
+        if (!draggable || !windowName)
+            return;
+        dispatch(actions.setDraggingStatus({
+            windowNameBeingDragged: tabWindowName,
+            inWindowName: windowName,
+            temporaryPosition: index,
+            tabWidth: (_c = (_b = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 60,
+        }));
+        // Not really used, but good housekeeping to have some data set
+        e.dataTransfer.setData("application/windowName", tabWindowName);
+        // Eliminates the default "+" that appears on the cursor
+        e.dataTransfer.effectAllowed = "move";
+        // Override the auto-generated image
+        setDragImage(e.dataTransfer);
+        /**
+         * We can't use React's onDragEnd event because we're temporarily removing our tab during the dragging. When
+         * we remove the tab, React loses its linkage to the orphaned DOM node. Instead, we manually set an HTML
+         * "dragend" event to capture the end of the drag action (and we're careful to also remove that event handler)
+         * after it triggers.
+         */
+        const onDragEnd = (dragEvent) => {
+            var _a;
+            (_a = dragEvent.currentTarget) === null || _a === void 0 ? void 0 : _a.removeEventListener("dragend", onDragEnd);
+            dispatch(actions.stopDragging());
+        };
+        (_d = domRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener("dragend", onDragEnd);
+    };
+    const onDragOver = (e) => {
+        var _a;
+        e.preventDefault();
+        if (!draggable || !windowName || !domRef || !state.dragging)
+            return;
+        const rect = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect)
+            return;
+        const midpoint = rect.x + rect.width / 2;
+        // If the mouse is over the left side of the tab then a gap should appear to the left of the tab. So if this tab is in position
+        // zero then the gap should take over that position. But if the mouse is over the right side of the tab then the gap should be
+        // to the right of this tab. So if this tab is in position zero then the gap should be in position 1.
+        const gapPosition = e.clientX < midpoint ? index : index + 1;
+        // Only dispatch if the position has changed. onDragOver fires continually as you're dragging (60 times per second) so we have
+        // to be careful not to do too much work in each cycle and not to trigger renders unless necessary
+        if (gapPosition !== state.dragging.temporaryPosition) {
+            dispatch(actions.setDraggingStatus(Object.assign(Object.assign({}, state.dragging), { inWindowName: windowName, temporaryPosition: gapPosition })));
+        }
+    };
+    return {
+        onDragStart,
+        onDragOver,
+    };
+};
+/**
+ * This hook encapsulates logic related to editing titles. Title editing is a local operation. It does
+ * not interact with the remote redux store until the title has been fully edited. The actual editing
+ * occurs in the TitleEdit component.
+ */
+const useEditTab = ({ allowEdit }) => {
+    const [editing, setEditing] = useState(false);
+    const dispatch = useDispatch();
+    // Only allow editing if the tab is wide enough
+    const maybeEditTitle = () => {
+        if (!allowEdit)
+            return;
+        setEditing(true);
+    };
+    const cancelEditing = () => {
+        setEditing(false);
+    };
+    const saveTitle = (title) => {
+        dispatch(actions.setUserDefinedTitle({
+            title,
+        }));
+        setEditing(false);
+    };
+    return {
+        maybeEditTitle,
+        cancelEditing,
+        saveTitle,
+        editing,
+    };
+};
+/**
+ * An individual tab. This handles dragging and clicking events.
+ *
+ * `index` is the tab's position in the tab list
+ * `gap` indicates a gap section for a possible drop
+ * `transform` the CSS transform that should be applied - which will create a gap when dragging tabs around
+ */
+const Tab = ({ tabWindowName, index, transform, tabMinWidth, }) => {
+    var _a, _b, _c, _d;
+    const dispatch = useDispatch();
+    const domRef = useRef(null);
+    const windowName = useContext(WindowNameContext);
+    const state = useSelector((currentState) => currentState);
+    const myState = state.windows[tabWindowName];
+    const title = (_a = myState === null || myState === void 0 ? void 0 : myState.title) !== null && _a !== void 0 ? _a : null;
+    const isThin = !!((_b = domRef === null || domRef === void 0 ? void 0 : domRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) && !state.dragging && ((_c = domRef === null || domRef === void 0 ? void 0 : domRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) < 80;
+    const isPromoted = (myState === null || myState === void 0 ? void 0 : myState.tabCollectionId)
+        ? ((_d = state.tabCollections[myState.tabCollectionId]) === null || _d === void 0 ? void 0 : _d.promotedWindowName) === tabWindowName
+        : true;
+    // Only show the close button on wide tabs. On thin tabs, only show the close button if it is the current promoted tab.
+    const showCloseButton = !state.dragging && (!isThin || isPromoted);
+    const { editing, maybeEditTitle, cancelEditing, saveTitle } = useEditTab({
+        allowEdit: (myState === null || myState === void 0 ? void 0 : myState.editable) && isPromoted,
+    });
+    const draggable = !!windowName && !editing;
+    const { onDragStart, onDragOver } = useDragTab({
+        draggable,
+        tabWindowName,
+        windowName,
+        index,
+        domRef,
+    });
+    const promoteTab = () => {
+        dispatch(actions.promoteTab({
+            targetWindowName: tabWindowName,
+        }));
+    };
+    const style = transform
+        ? {
+            transform,
+            minWidth: tabMinWidth,
+        }
+        : {
+            minWidth: tabMinWidth,
+        };
+    const className = isPromoted && !editing && !state.dragging ? "fsbl-tab fsbl-active-tab" : "fsbl-tab";
+    return (React.createElement("div", { ref: domRef, draggable: !editing, onDragStart: onDragStart, onDragOver: onDragOver, onDoubleClick: maybeEditTitle, onClick: promoteTab, className: className, style: style, title: title !== null && title !== void 0 ? title : "", "data-show-close-button": showCloseButton },
+        React.createElement(TabInnards, { title: title, tabWindowName: tabWindowName, editing: editing, cancelEditing: cancelEditing, saveTitle: saveTitle })));
+};
+const domNotReady = {
+    scrollLeft: 0,
+    scrollWidth: 0,
+    offsetWidth: 0,
+    clientWidth: 0,
+};
+/**
+ * Scroll algorithm:
+ *
+ * Scrolling is accomplished using the "translateX" CSS transform. This transform shifts the entire fsbl-tabs-container to the right
+ * or to the left, creating the illusion of scrolling. The "transition" CSS provides an animation. This is the primary reason for using
+ * this technique (rather than adjusting scrollBy).
+ *
+ * `scrollAmount` is the distance that the dom element is shifted from its normal position. Note that a transform moves left in order to
+ * give the illusion of scrolling to the right. Thus the transform is always the negative inverse of `scrollAmount`.
+ *
+ * The transition animation is applied by default, taking effect when the scroll buttons (chevrons) are pressed. The transition is
+ * disabled when a mousewheel event is received. Mousewheel events provide a precise pixel amount, incorporating their own heuristics
+ * for easing (such as touch pad gestures, which get translated into a stream of mousewheel events). Thus, the transition is disabled for
+ * 500 milliseconds whenever a mousewheel event is received.
+ *
+ * scrollAmount is synchronized via remote-redux so that all of the windows show the same scrolled distance when switching back and forth
+ * between tabs. When loading a tab collection from a workspace, the initial scrollAmount is estimated, but that estimated amount is only
+ * applied if the window is small enough to require scrolling.
+ */
+const useScroll = (scrollAmount) => {
+    var _a;
+    const dispatch = useDispatch();
+    const scrollAmountRef = useRef(scrollAmount);
+    const [transition, setTransition] = useState(true);
+    const [transitionTimeout, setTransitionTimeout] = useState(null);
+    const tabContainerRef = useRef(null);
+    scrollAmountRef.current = scrollAmount;
+    const { offsetWidth, scrollWidth } = (_a = tabContainerRef.current) !== null && _a !== void 0 ? _a : domNotReady;
+    const setScrollAmount = (newScrollAmount) => {
+        scrollAmountRef.current = newScrollAmount;
+        dispatch(actions.scroll({
+            scroll: newScrollAmount,
+        }));
+    };
+    const onWheel = (e) => {
+        if (e.deltaY < 0) {
+            setScrollAmount(Math.max(0, scrollAmount + e.deltaY));
+        }
+        else {
+            setScrollAmount(Math.min(scrollWidth - offsetWidth, scrollAmount + e.deltaY));
+        }
+        setTransition(false);
+        if (transitionTimeout)
+            clearTimeout(transitionTimeout);
+        setTransitionTimeout(setTimeout(() => {
+            setTransition(true);
+        }, 500));
+    };
+    const lessScroll = () => {
+        setScrollAmount(Math.max(0, scrollAmount - 200));
+    };
+    const moreScroll = () => {
+        setScrollAmount(Math.min(scrollWidth - offsetWidth, scrollAmount + 200));
+    };
+    // Only scroll the tabs if the window is small enough to require it
+    const allowedScrollAmount = scrollWidth - offsetWidth > 0 ? scrollAmount : 0;
+    const enableLeftScrollButton = allowedScrollAmount > 0;
+    // It's possible for scrollLeft to be a half pixel. Adding "1" ensures that it's over the scrollWidth when all the way to the right.
+    const enableRightScrollButton = allowedScrollAmount + offsetWidth + 1 < scrollWidth;
+    useEffect(() => {
+        // This code ensures that the scroll amount is never larged than the available space. Otherwise,
+        // when resizing to a smaller size, the tabs could end up scrolled out of view.
+        // Note, on MS Windows, hidden windows don't receive resize events until they are shown.
+        window.addEventListener("resize", () => {
+            var _a;
+            const { offsetWidth: updatedOffsetWidth, scrollWidth: updatedScrollWidth } = (_a = tabContainerRef.current) !== null && _a !== void 0 ? _a : domNotReady;
+            setScrollAmount(Math.min(updatedScrollWidth - updatedOffsetWidth, scrollAmountRef.current));
+        });
+    }, []);
+    const transforms = {
+        transform: `translateX(-${allowedScrollAmount}px)`,
+        transition: transition ? `1s all ease` : `none`,
+    };
+    return {
+        lessScroll,
+        moreScroll,
+        enableLeftScrollButton,
+        enableRightScrollButton,
+        transforms,
+        onWheel,
+        tabContainerRef,
+    };
+};
+/**
+ * Encapsulation of the scrollable section of the tab region, with chevrons.
+ *
+ * Pass the tabs in as children.
+ */
+const Scrollable = ({ children, noScroll, scroll, }) => {
+    const { lessScroll, moreScroll, enableLeftScrollButton, enableRightScrollButton, onWheel, transforms, tabContainerRef, } = useScroll(scroll);
+    const showScrollButtons = !noScroll && (enableLeftScrollButton || enableRightScrollButton);
+    return (React.createElement(React.Fragment, null,
+        showScrollButtons && (React.createElement("button", { className: "fsbl-tab-scroll-button", onClick: lessScroll, disabled: !enableLeftScrollButton }, "<")),
+        React.createElement("div", { className: "fsbl-tabs-scroll-surround", onWheel: onWheel },
+            React.createElement("div", { className: "fsbl-tabs-container", ref: tabContainerRef, style: transforms }, children)),
+        showScrollButtons && (React.createElement("button", { className: "fsbl-tab-scroll-button", onClick: moreScroll, disabled: !enableRightScrollButton }, ">"))));
+};
+const createTab = ({ transform, tabWindowName, index, tabMinWidth, }) => (React.createElement(Tab, { tabWindowName: tabWindowName, index: index, transform: transform, tabMinWidth: tabMinWidth, key: tabWindowName }));
+/**
+ * The collection of tabs
+ */
+const Tabs = ({ useDOMBasedMovement, children }) => {
+    var _a, _b, _c, _d, _e;
+    const dispatch = useDispatch();
+    const [throttle, setThrottle] = useState(Date.now() - THROTTLE50MS);
+    const domRef = useRef(null);
+    const state = useSelector((currentState) => currentState);
+    const windowName = useContext(WindowNameContext);
+    const myState = windowName ? state.windows[windowName] : null;
+    const { onMouseDown, onMouseMove } = useDragRegion((_a = myState === null || myState === void 0 ? void 0 : myState.maximized) !== null && _a !== void 0 ? _a : false);
+    const { toggle: toggleMaximize } = useMaximize();
+    const defaultMinWidth = 72;
+    const [tabMinWidth, setTabMinWidth] = useState(defaultMinWidth);
+    const tabCollectionId = (_b = myState === null || myState === void 0 ? void 0 : myState.tabCollectionId) !== null && _b !== void 0 ? _b : null;
+    const defaultTabs = [windowName !== null && windowName !== void 0 ? windowName : ""];
+    const tabCollection = tabCollectionId ? state.tabCollections[tabCollectionId] : null !== null && null !== void 0 ? null : null;
+    const tabs = (_c = tabCollection === null || tabCollection === void 0 ? void 0 : tabCollection.tabs) !== null && _c !== void 0 ? _c : defaultTabs;
+    const { scroll } = tabCollection !== null && tabCollection !== void 0 ? tabCollection : { scroll: 0 };
+    const gapPosition = (_e = (_d = state.dragging) === null || _d === void 0 ? void 0 : _d.temporaryPosition) !== null && _e !== void 0 ? _e : null;
+    const gapWidth = 60; // state.dragging?.tabWidth contains the actual width of the tab but 60px provides a better UX
+    // The default tab width is 72px, but you can change it by setting finsemble.servicesConfig.docking.tabbing.tabMinWidth in config.json.
+    FEAGlobals.FSBL.Clients.ConfigClient.get(["finsemble", "servicesConfig", "docking", "tabbing", "tabMinWidth"], (err, response) => {
+        setTabMinWidth(response !== undefined ? response : defaultMinWidth);
+    });
+    // If a window is being dragged then filter it out so that it isn't displayed, then convert from string to object and calculate the transform size to create a gap
+    const tabsWithTransform = tabs
+        .filter((tabWindowName) => { var _a; return tabWindowName !== ((_a = state.dragging) === null || _a === void 0 ? void 0 : _a.windowNameBeingDragged); })
+        .map((tabWindowName, index) => {
+        var _a;
+        return {
+            transform: ((_a = state.dragging) === null || _a === void 0 ? void 0 : _a.inWindowName) === windowName && gapPosition !== null && index >= gapPosition
+                ? `translateX(${gapWidth}px)`
+                : null,
+            tabWindowName,
+            index,
+            tabMinWidth,
+        };
+    });
+    /**
+     * When we remove the tab that is being dragged it causes the tab collection space to shrink, since it thinks there
+     * is one less element. So we add an equivalent amount of space to the end of the tab collection to prevent the
+     * shrinkage, providing UX feedback to the end user when the tab is inserted.
+     *
+     * We "display" the gap space only when the tab is going to be dropped into that space (when the tab is going to be)
+     * dropped into the final position.
+     */
+    const maybeAddGapSpace = () => {
+        var _a, _b;
+        const style = {
+            width: `${(_a = state.dragging) === null || _a === void 0 ? void 0 : _a.tabWidth}px`,
+        };
+        if (((_b = state.dragging) === null || _b === void 0 ? void 0 : _b.inWindowName) !== windowName)
+            return;
+        // Only "display" the gap if the drag action is occurring in our window and the gap should be in the final position
+        const dataDisplay = gapPosition === tabsWithTransform.length;
+        if (gapPosition !== null)
+            return React.createElement("div", { className: "fsbl-tab-gap", style: style, "data-display": dataDisplay });
+        return null;
+    };
+    /**
+     * This code is disabled due to a bug in Chromium on Windows. dragLeave events do not fire if
+     * the draggable object is moved too quickly out of the window. To work around this problem the
+     * docking system watches mouse movement during drag operations and detects when the mouse has
+     * moved outside of the _calculated_ tab area. This code is in dockingMain.ts.
+     *
+     * Normal comment for when this function can be used again:
+     * dragleave triggers when the dragged element leaves a valid drop target. This can therefore
+     * trigger as the mouse moves from tab to tab. We only want to catch the situation where the
+     * mouse leaves the tab area entirely, so we do some mouse location calculations to determine
+     * this.
+     *
+     * If we have definitely left the tabbing region then we set tabPosition to null in order
+     * that any gaps be closed.
+     */
+    const onDragLeave = (e) => {
+        /*
+        if (!state.dragging) return;
+        const rect = domRef.current?.getBoundingClientRect();
+        if (!rect) return;
+        if (e.clientX > rect.left && e.clientX < rect.right && e.clientY > rect.top && e.clientY < rect.bottom) return;
+        dispatch(
+            actions.setDraggingStatus({
+                ...state.dragging,
+                temporaryPosition: null,
+                inWindowName: null,
+            })
+        );*/
+    };
+    /**
+     * If the user enters the tab collection space from the outside then the temporary position will probably be null.
+     * We immediately set it to the end position of our current collection in order to indicate that it can now be
+     * dropped into this tab collection.
+     */
+    const onDragOver = () => {
+        var _a;
+        if (!state.dragging)
+            return;
+        if (!windowName)
+            return;
+        // ondragover can trigger rapidly when the mouse is hovering. This ensures that we don't flood the system.
+        if (throttle + THROTTLE50MS > Date.now())
+            return;
+        if (((_a = state.dragging) === null || _a === void 0 ? void 0 : _a.temporaryPosition) === null) {
+            setThrottle(Date.now());
+            dispatch(actions.setDraggingStatus(Object.assign(Object.assign({}, state.dragging), { temporaryPosition: tabsWithTransform.length, inWindowName: windowName })));
+        }
+    };
+    /**
+     * When dragging a tab over the right side of the WindowTitleBar, set the
+     * drag position to the last position. Without this, sometimes the gap gets
+     * stuck in the second to last position.
+     */
+    const dragOverDragRegion = () => {
+        var _a;
+        if (!state.dragging)
+            return;
+        if (!windowName)
+            return;
+        // ondragover can trigger rapidly when the mouse is hovering. This ensures that we don't flood the system.
+        if (throttle + THROTTLE50MS > Date.now())
+            return;
+        if (((_a = state.dragging) === null || _a === void 0 ? void 0 : _a.temporaryPosition) !== tabsWithTransform.length) {
+            setThrottle(Date.now());
+            dispatch(actions.setDraggingStatus(Object.assign(Object.assign({}, state.dragging), { temporaryPosition: tabsWithTransform.length, inWindowName: windowName })));
+        }
+    };
+    const className = useDOMBasedMovement
+        ? "fsbl-guaranteed-drag-area fsbl-app-region"
+        : "fsbl-guaranteed-drag-area fsbl-app-region fsbl-no-dom-movement";
+    // don't show scroll while dragging or the window is not in a stack
+    const noScroll = !!state.dragging || !(myState === null || myState === void 0 ? void 0 : myState.tabCollectionId);
+    return (React.createElement("div", { className: "fsbl-tab-region-tabbing-enabled", onDragLeave: onDragLeave, onDragOver: onDragOver, ref: domRef },
+        React.createElement(Scrollable, { noScroll: noScroll, scroll: scroll },
+            tabsWithTransform.map((tab) => createTab(tab)),
+            maybeAddGapSpace()),
+        React.createElement("div", { className: "fsbl-tab-region-control" }, children),
+        React.createElement("div", { className: className, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onDoubleClick: toggleMaximize, onDragOver: dragOverDragRegion })));
+};
+/**
+ * The "Tab Region", which is the area where tabs appear but also where just the title appears
+ * if tabbing is disabled.
+ */
+export const TabRegion = ({ children }) => {
+    var _a, _b;
+    const windowName = useContext(WindowNameContext);
+    const state = useSelector((currentState) => currentState);
+    const myState = windowName ? state.windows[windowName] : null;
+    const { useDOMBasedMovement = true } = state;
+    const enableTabbing = (_a = myState === null || myState === void 0 ? void 0 : myState.enableTabbing) !== null && _a !== void 0 ? _a : false;
+    const { onMouseDown, onMouseMove } = useDragRegion((_b = myState === null || myState === void 0 ? void 0 : myState.maximized) !== null && _b !== void 0 ? _b : false);
+    const { toggle: toggleMaximize } = useMaximize();
+    const className = useDOMBasedMovement
+        ? "fsbl-tab-region-tabbing-disabled fsbl-app-region"
+        : "fsbl-tab-region-tabbing-disabled fsbl-no-dom-movement fsbl-app-region";
+    const singleTitleOrTabs = () => enableTabbing ? (React.createElement(Tabs, { useDOMBasedMovement: useDOMBasedMovement }, children)) : (React.createElement("div", { className: className, onDoubleClick: toggleMaximize, onMouseDown: onMouseDown, onMouseMove: onMouseMove },
+        React.createElement(TabTitle, { tabWindowName: windowName })));
+    return React.createElement("div", { className: "fsbl-tab-region" }, singleTitleOrTabs());
+};
+//# sourceMappingURL=TabRegion.js.map

package/react/components/windowTitleBar/TabRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabRegion.js","sourceRoot":"","sources":["../../../../../src/ui/components/windowTitleBar/TabRegion.tsx"],"names":[],"mappings":"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"}

package/react/components/windowTitleBar/TabTitle.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * Displays the tab's icon and text. Editing of titles is handled within this component.
+ */
+export declare const TabTitle: ({ tabWindowName }: {
+    tabWindowName: string | null;
+}) => JSX.Element;
+//# sourceMappingURL=TabTitle.d.ts.map

package/react/components/windowTitleBar/TabTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabTitle.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/windowTitleBar/TabTitle.tsx"],"names":[],"mappings":";AAKA;;GAEG;AACH,eAAO,MAAM,QAAQ;mBAAwC,MAAM,GAAG,IAAI;iBAazE,CAAC"}

package/react/components/windowTitleBar/TabTitle.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Icon } from "../icon/Icon";
+import { useSelector } from "react-redux";
+/**
+ * Displays the tab's icon and text. Editing of titles is handled within this component.
+ */
+export const TabTitle = ({ tabWindowName }) => {
+    var _a;
+    const state = useSelector((currentState) => currentState);
+    const myState = tabWindowName ? state.windows[tabWindowName] : null;
+    const title = (_a = myState === null || myState === void 0 ? void 0 : myState.title) !== null && _a !== void 0 ? _a : "";
+    const icon = myState === null || myState === void 0 ? void 0 : myState.icon;
+    return (React.createElement("div", { className: "fsbl-tab-title" },
+        icon && React.createElement(Icon, Object.assign({}, icon, { category: "Application" })),
+        React.createElement("span", { className: "fsbl-tab-title-text" }, title)));
+};
+//# sourceMappingURL=TabTitle.js.map

package/react/components/windowTitleBar/TabTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabTitle.js","sourceRoot":"","sources":["../../../../../src/ui/components/windowTitleBar/TabTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,aAAa,EAAoC,EAAE,EAAE;;IAC/E,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,YAAiC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC;IAE/E,MAAM,OAAO,GAAG,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACpE,MAAM,KAAK,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,mCAAI,EAAE,CAAC;IACnC,MAAM,IAAI,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC;IAE3B,OAAO,CACN,6BAAK,SAAS,EAAC,gBAAgB;QAC7B,IAAI,IAAI,oBAAC,IAAI,oBAAK,IAAI,IAAE,QAAQ,EAAC,aAAa,IAAG;QAClD,8BAAM,SAAS,EAAC,qBAAqB,IAAE,KAAK,CAAQ,CAC/C,CACN,CAAC;AACH,CAAC,CAAC"}

package/react/components/windowTitleBar/TitleEdit.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * A simple React component for a user to set a custom title for a tab.
+ */
+export declare const TitleEdit: ({ title, cancelEditing, saveTitle, }: {
+    title: string | null;
+    cancelEditing: () => void;
+    saveTitle: (newTitle: string | null) => void;
+}) => JSX.Element;
+//# sourceMappingURL=TitleEdit.d.ts.map

package/react/components/windowTitleBar/TitleEdit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleEdit.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/windowTitleBar/TitleEdit.tsx"],"names":[],"mappings":";AAEA;;GAEG;AACH,eAAO,MAAM,SAAS;WAKd,MAAM,GAAG,IAAI;mBACL,MAAM,IAAI;0BACH,MAAM,GAAG,IAAI,KAAK,IAAI;iBAuC5C,CAAC"}

package/react/components/windowTitleBar/TitleEdit.js

@@ -0,0 +1,30 @@
+import React, { useState, useRef, useEffect } from "react";
+/**
+ * A simple React component for a user to set a custom title for a tab.
+ */
+export const TitleEdit = ({ title, cancelEditing, saveTitle, }) => {
+    const [newTitle, setNewTitle] = useState(title);
+    const ref = useRef(null);
+    // Sets the cursor focus in the input box
+    useEffect(() => {
+        var _a;
+        (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const onBlur = () => {
+        cancelEditing();
+    };
+    const onKeyDown = (e) => {
+        if (e.key === "Escape")
+            cancelEditing();
+        if (e.key === "Enter") {
+            // When the user erases the entire input then the title should revert back to its default
+            const replacementTitle = newTitle === "" ? null : newTitle;
+            saveTitle(replacementTitle);
+        }
+    };
+    const onChange = (e) => {
+        setNewTitle(e.target.value);
+    };
+    return (React.createElement("input", { ref: ref, value: newTitle !== null && newTitle !== void 0 ? newTitle : "", onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown, type: "text", className: "fsbl-tab-input", maxLength: 32 }));
+};
+//# sourceMappingURL=TitleEdit.js.map

package/react/components/windowTitleBar/TitleEdit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleEdit.js","sourceRoot":"","sources":["../../../../../src/ui/components/windowTitleBar/TitleEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3D;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACzB,KAAK,EACL,aAAa,EACb,SAAS,GAKT,EAAE,EAAE;IACJ,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,GAAG,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAElD,yCAAyC;IACzC,SAAS,CAAC,GAAG,EAAE;;QACd,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,GAAG,EAAE;QACnB,aAAa,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,CAAwC,EAAE,EAAE;QAC9D,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,aAAa,EAAE,CAAC;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACtB,yFAAyF;YACzF,MAAM,gBAAgB,GAAG,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;YAC3D,SAAS,CAAC,gBAAgB,CAAC,CAAC;SAC5B;IACF,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC3D,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACN,+BACC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,EACrB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,gBAAgB,EAC1B,SAAS,EAAE,EAAE,GACZ,CACF,CAAC;AACH,CAAC,CAAC"}

package/react/components/windowTitleBar/WindowTitleBarContext.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * Rendering of the WindowTitleBar is dependent on it knowing its own windowName. The windowName
+ * is retrieved asynchronously on initial render (by calling getWindowName()).
+ *
+ * The windowName is made available to sub-components via a ReactContext (WindowNameContext). With
+ * the windowName, the sub-components can then look inside the redux store for the values that pertain
+ * to them.
+ */
+export declare type WindowName = string | null;
+export declare const WindowNameContext: import("react").Context<WindowName>;
+//# sourceMappingURL=WindowTitleBarContext.d.ts.map

package/react/components/windowTitleBar/WindowTitleBarContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WindowTitleBarContext.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/windowTitleBar/WindowTitleBarContext.tsx"],"names":[],"mappings":";AAEA;;;;;;;GAOG;AAEH,oBAAY,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC;AAEvC,eAAO,MAAM,iBAAiB,qCAAkC,CAAC"}

package/react/components/windowTitleBar/WindowTitleBarContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+export const WindowNameContext = createContext(null);
+//# sourceMappingURL=WindowTitleBarContext.js.map

package/react/components/windowTitleBar/WindowTitleBarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WindowTitleBarContext.js","sourceRoot":"","sources":["../../../../../src/ui/components/windowTitleBar/WindowTitleBarContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAatC,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAa,IAAI,CAAC,CAAC"}