@finsemble/finsemble-ui 7.2.1 → 8.0.0-beta.1

package/react/components/windowTitleBar/components/center/TabList.js

@@ -1,616 +1,620 @@
-import * as React from "react";
-import Tab from "./Tab";
-import { FinsembleHoverDetector } from "../../../legacyControls/FinsembleHoverDetector";
-import { Store, Actions } from "../../stores/windowTitleBarStore";
-import { Title } from "../windowTitle";
-import _throttle from "lodash/throttle";
-let TAB_WIDTH = 300;
-// Next two items are for calculating how large the title should be within a tab.
-const ICON_AREA = 16;
-const CLOSE_BUTTON_MARGIN = 12;
-const MINIMUM_TAB_SIZE = 100;
-const stopTilingOrTabbing = (params, cb) => {
-    const transmitAndQueryStop = () => {
-        // docking service has a responder for the query
-        FSBL.Clients.RouterClient.query("DockingService.stopTilingOrTabbing", params, () => {
-            cb === null || cb === void 0 ? void 0 : cb();
-        });
-        // WindowTitleBarShell is listening for transmit events so that it knows when tiling/tabbing has stopped
-        FSBL.Clients.RouterClient.transmit("DockingService.stopTilingOrTabbing", params);
-    };
-    // Get the mouse position if not passed in.
-    if (!params.mousePosition) {
-        fin.desktop.System.getMousePosition((position) => {
-            params.mousePosition = position;
-            transmitAndQueryStop();
-            // If allowDropOnSelf is true, it came from a tab/window drop event. Run the callback.
-            if (!params.allowDropOnSelf)
-                cb === null || cb === void 0 ? void 0 : cb();
-        });
-    }
-    else {
-        transmitAndQueryStop();
-        // If allowDropOnSelf is true, it came from a tab/window drop event. Run the callback.
-        if (!params.allowDropOnSelf)
-            cb === null || cb === void 0 ? void 0 : cb();
-    }
-};
-const isPointInBox = (point, box) => {
-    if (!box.bottom)
-        box.bottom = box.top + box.height;
-    if (!box.right)
-        box.right = box.left + box.width;
-    return point.x > box.left && point.x < box.right && point.y < box.bottom && point.y > box.top;
-};
-export class TabList extends React.Component {
-    constructor(props) {
-        super(props);
-        let initialState = Store.getValues(["activeTab", "tabs"]);
-        let activeIdentifier = finsembleWindow.identifier;
-        if (activeIdentifier) {
-            activeIdentifier.title = finsembleWindow.windowOptions.title;
-        }
-        this.state = {
-            translateX: 0,
-            tabs: initialState.tabs,
-            activeTab: activeIdentifier,
-            boundingBox: {
-                right: 0,
-                left: 0,
-                top: 0,
-                bottom: 0,
-                height: 0,
-                width: 0,
-            },
-            iAmDragging: false,
-            hoverState: "false",
-            tabWidth: TAB_WIDTH,
-            hoveredTabIndex: undefined,
-        };
-        this.onWindowResizeThrottled = () => { };
-        this.bindCorrectContext();
-        this.mousePositionOnDragEnd = {
-            x: 0,
-            y: 0,
-        };
-    }
-    /**
-     * Make sure that _this_ is correct inside of our event handlers.
-     */
-    bindCorrectContext() {
-        this.startDrag = this.startDrag.bind(this);
-        this.stopDrag = this.stopDrag.bind(this);
-        this.cancelTabbing = this.cancelTabbing.bind(this);
-        this.drop = this.drop.bind(this);
-        this.dragOver = this.dragOver.bind(this);
-        this.dragLeave = this.dragLeave.bind(this);
-        this.onMouseWheel = this.onMouseWheel.bind(this);
-        this.renderTitle = this.renderTitle.bind(this);
-        this.renderTabs = this.renderTabs.bind(this);
-        this.findTabIndex = this.findTabIndex.bind(this);
-        this.setActiveTab = this.setActiveTab.bind(this);
-        this.onTabAdded = this.onTabAdded.bind(this);
-        this.onTabClosed = this.onTabClosed.bind(this);
-        this.setActiveTab = this.setActiveTab.bind(this);
-        this.onTabsChanged = this.onTabsChanged.bind(this);
-        this.onTabDraggedOver = this.onTabDraggedOver.bind(this);
-        this.isTabRegionOverflowing = this.isTabRegionOverflowing.bind(this);
-        this.onWindowResize = this.onWindowResize.bind(this);
-        this.onWindowResizeThrottled = _throttle(this.onWindowResize, 100);
-        this.getTabWidth = this.getTabWidth.bind(this);
-        this.setTabListTranslateX = this.setTabListTranslateX.bind(this);
-        this.onTabListTranslateChanged = this.onTabListTranslateChanged.bind(this);
-        this.changeTab = this.changeTab.bind(this);
-    }
-    getTabWidth(params = {}) {
-        let { boundingBox, tabList } = params;
-        if (typeof tabList === "undefined") {
-            tabList = this.state.tabs;
-        }
-        if (typeof boundingBox === "undefined") {
-            boundingBox = this.refs.Me.getBoundingClientRect();
-        }
-        if (typeof boundingBox.right === "undefined") {
-            return TAB_WIDTH;
-        }
-        let containerWidth = boundingBox.right - boundingBox.left;
-        let newTabWidth = containerWidth / tabList.length;
-        return newTabWidth < MINIMUM_TAB_SIZE ? MINIMUM_TAB_SIZE : newTabWidth;
-    }
-    /**
-     * Resize handler. Calculates the space that the center-region is taking up. May be used to scale tabs proportionally.
-     */
-    onWindowResize() {
-        let bounds = this.refs.Me.getBoundingClientRect();
-        this.setState({
-            boundingBox: bounds,
-            tabWidth: this.getTabWidth(),
-        });
-    }
-    findTabIndex(tab) {
-        return this.state.tabs.findIndex((el) => tab.windowName === el.windowName);
-    }
-    /**
-     *
-     * Function that's called when this component fires the onDragStart event, this will start the tiling or tabbing process
-     *
-     * @param e The SyntheticEvent created by React when the startdrag event is called
-     * @memberof windowTitleBar
-     */
-    startDrag(e, windowIdentifier) {
-        this.setState({
-            iAmDragging: true,
-        });
-        e.dataTransfer.setData("application/fsbl-tab-data", JSON.stringify(windowIdentifier));
-        FSBL.Clients.RouterClient.transmit("DockingService.startTilingOrTabbing", {
-            windowIdentifier,
-        });
-    }
-    /**
-     * Called when the react component detects a drop (or stop drag, which is equivalent)
-     *
-     * @param e The SyntheticEvent created by React when the stopdrag event is called
-     * @memberof windowTitleBar
-     */
-    stopDrag(e) {
-        // We don't want onDropHandler() in windowTitleBarComponent.jsx
-        // to handle this drop event, so we call event.stopPropagation().
-        e.stopPropagation();
-        FSBL.Clients.Logger.system.debug("Tab stopDrag.");
-        this.mousePositionOnDragEnd = {
-            x: e.nativeEvent.screenX,
-            y: e.nativeEvent.screenY,
-        };
-        const { boundingBox } = this.state;
-        finsembleWindow.getBounds((err, bounds) => {
-            var _a, _b, _c, _d;
-            // We ONLY want to know if we're in the tab region!
-            const tabRegion = {
-                top: boundingBox.top + ((_a = bounds === null || bounds === void 0 ? void 0 : bounds.top) !== null && _a !== void 0 ? _a : 0),
-                bottom: boundingBox.bottom + ((_b = bounds === null || bounds === void 0 ? void 0 : bounds.top) !== null && _b !== void 0 ? _b : 0),
-                left: boundingBox.left + ((_c = bounds === null || bounds === void 0 ? void 0 : bounds.left) !== null && _c !== void 0 ? _c : 0),
-                right: boundingBox.right + ((_d = bounds === null || bounds === void 0 ? void 0 : bounds.left) !== null && _d !== void 0 ? _d : 0),
-                width: 0,
-                height: 0,
-            };
-            if (!isPointInBox(this.mousePositionOnDragEnd, tabRegion)) {
-                // allow for a 50ms delay so this message goes after a drop message from a target window if tabbing
-                setTimeout(() => {
-                    stopTilingOrTabbing({
-                        mousePosition: this.mousePositionOnDragEnd,
-                    });
-                }, 50);
-                this.onWindowResize();
-            }
-            else {
-                // sometimes a tab gets dropped in a bad spot where no action gets taken and we get stuck in tiling mode
-                // to make sure nothing bad happens, call cancel after a similar 50ms delay
-                // If some action was taken, this will be ignored by Finsemble
-                setTimeout(() => {
-                    FSBL.Clients.RouterClient.transmit("DockingService.cancelTilingOrTabbing", {
-                        windowIdentifier: this.state.activeTab,
-                    });
-                }, 50);
-            }
-            // set the default state after dragging
-            this.setState({
-                iAmDragging: false,
-            });
-        });
-    }
-    /**
-     * Helper function that will pull data from a drop event, parse it, and return it.
-     * @param {event} e
-     */
-    extractWindowIdentifier(e) {
-        try {
-            let identifier = JSON.parse(e.dataTransfer.getData("application/fsbl-tab-data"));
-            // If the "identifier" is formed properly, it'll have this properly. Otherwise, it's something else (e.g., share data, image, etc).
-            if (typeof identifier.windowName !== "undefined") {
-                return identifier;
-            }
-            else if (identifier.waitForIdentifier) {
-                return identifier;
-            }
-            else {
-                FSBL.Clients.Logger.system.error("Malformed drop object detected in windowTitleBar. Check tab dropping code. Expected windowIdentifier, got ", identifier);
-                return null;
-            }
-        }
-        catch (e2) {
-            FSBL.Clients.Logger.system.error("Error in 'extractWindowIdentifier'. Check TabRegion.jsx. Either there was no data in the event, or it was a circular object that caused JSON.parse to fail. Javascript Error:", e2);
-            return null;
-        }
-    }
-    /**
-     * Called when a drop event occurs on the tab region. We (hope) that this came from a tab. Could be a share icon, an image, something else - that's why we check to see if the identifier exists before doing anything.
-     * @param {event} e
-     */
-    drop(e) {
-        let identifier;
-        if (e) {
-            e.preventDefault();
-            e.stopPropagation();
-            identifier = this.extractWindowIdentifier(e);
-        }
-        FSBL.Clients.Logger.system.debug("Tab drag drop.");
-        if (!identifier)
-            return; // the dropped item is not a tab
-        if (this.state.tabs.length === 1 && identifier.windowName === finsembleWindow.name) {
-            // The source and destination tabs are the same
-            //
-            // Cancel the tabbing event
-            FSBL.Clients.RouterClient.transmit("DockingService.cancelTilingOrTabbing", {
-                windowIdentifier: this.state.activeTab,
-            });
-            // But also set "iAmDragging" to false in order to allow other tabs to be dragged in here
-            this.setState({
-                iAmDragging: false,
-            });
-            return;
-        }
-        stopTilingOrTabbing({ allowDropOnSelf: true, action: "tabbing" }, () => {
-            FSBL.Clients.RouterClient.transmit("tabbingDragEnd", { success: true });
-            if (identifier && identifier.windowName) {
-                // Calls a method defined inside of windowTitleBar.jsx.
-                this.onTabAdded(identifier, this.state.hoveredTabIndex);
-            }
-            else if (identifier && identifier.waitForIdentifier) {
-                let subscribeId;
-                let tabIdentifierSubscriber = (err, response) => {
-                    if (!response.data.windowName)
-                        return;
-                    FSBL.Clients.RouterClient.unsubscribe(subscribeId);
-                    this.onTabAdded(response.data, this.state.hoveredTabIndex);
-                };
-                subscribeId = FSBL.Clients.RouterClient.subscribe(`Finsemble.${identifier.guid}`, tabIdentifierSubscriber);
-            }
-            else {
-                FSBL.Clients.Logger.system.error("Unexpected drop event on window title bar. Check the 'drop' method on TabRegion.jsx.");
-            }
-        });
-    }
-    isTabRegionOverflowing() {
-        let lastTab = {
-            right: this.state.tabs.length * this.state.tabWidth,
-        };
-        return lastTab.right + this.state.translateX > this.state.boundingBox.right - this.state.boundingBox.left;
-    }
-    /**
-     * Event handler for when a user wheels inside of the tab region. We translate the deltaY that the event provides into horizontal movement. The translateX value that we return will be used in the render method below.
-     * @param {event} e
-     * This should probably be refactored into separate handlers for scroll and mousewheel to account for the differences in event properties.
-     */
-    onMouseWheel(e) {
-        e.preventDefault();
-        let numTabs = this.state.tabs.length;
-        let translateX = 0;
-        // If there's more than one tab, do some calculations, otherwise we aren't going to scroll this region, no matter how much the user wants us to.
-        if (numTabs > 1) {
-            let currentX = this.refs.Me.scrollLeft;
-            let { boundingBox } = this.state;
-            // Figure out position of first tab and last tab.
-            let firstTab = {
-                left: 0 + boundingBox.left,
-            };
-            let lastTab = {
-                right: numTabs * this.state.tabWidth,
-            };
-            let deltaX = this.state.tabWidth / 3;
-            if (e.nativeEvent.deltaY < 0) {
-                deltaX = 0 - deltaX;
-            }
-            // Mouses with high sensitivity will cause massive scroll amounts. We don't want to scroll more than one tab's width in a single mouse wheel, otherwise you risk missing a tab.
-            if (Math.abs(deltaX) > this.state.tabWidth) {
-                let isNegative = false;
-                if (deltaX < 0) {
-                    isNegative = true;
-                }
-                deltaX = isNegative ? 0 - this.state.tabWidth : this.state.tabWidth;
-            }
-            // when we set scrollLeft on the element, this event fires. But there's no actual event. so stop.
-            if (!e.nativeEvent.deltaY) {
-                return;
-            }
-            let originalDeltaY = e.nativeEvent.deltaY;
-            let deltaY = originalDeltaY;
-            if (Math.abs(originalDeltaY) > this.state.tabWidth / 3) {
-                deltaY = this.state.tabWidth / 3;
-                if (originalDeltaY < 0) {
-                    deltaY = 0 - deltaY;
-                }
-            }
-            translateX = deltaY + currentX;
-            let newRightForLastTab = lastTab.right + translateX;
-            let newLeftForFirstTab = firstTab.left + translateX;
-            // Do not let the left of the first tab move to the right of the left edge of the bounding box.
-            if (newLeftForFirstTab < 0) {
-                return this.scrollToFirstTab();
-            }
-            else if (e.nativeEvent.deltaY < 0 && newRightForLastTab <= boundingBox.right) {
-                // ONLY IF the user is scrolling from right-to-left (deltaY will be negative). IF they try to do that, do not allow the right edge of the last tab to detach.
-                return this.scrollToLastTab();
-            }
-            // Else, the translation is okay. We're in the middle of our list and the first and last tabs aren't being rendered improperly.
-            translateX < 0 ? (translateX = 0) : translateX;
-            this.setState({ translateX });
-        }
-    }
-    /**
-     * Scrolls to our active tab.
-     */
-    scrollToActiveTab() {
-        this.scrollToTab(this.state.activeTab);
-    }
-    /**
-     * Scrolls to the first tab in our list of tabs.
-     */
-    scrollToFirstTab() {
-        let firstTab = this.state.tabs[0];
-        this.scrollToTab(firstTab);
-    }
-    /**
-     * Scrolls to the last tab in our list of tabs
-     */
-    scrollToLastTab() {
-        let lastTab = this.state.tabs[this.state.tabs.length - 1];
-        this.scrollToTab(lastTab);
-    }
-    /**
-     * Function that will horizontally scroll the tab region so that the right edge of the tab lines up with the right edge of the tab region.
-     * @param {} tab
-     */
-    scrollToTab(tab) {
-        // 'BoundingBox' is just the boundingClientRect of the tab region. It is, in essence, the center part of the windowTitleBar.
-        let { boundingBox } = this.state;
-        let tabIndex = this.state.tabs.findIndex((el) => el.windowName === tab.windowName);
-        if (tabIndex > -1) {
-            let leftEdgeOfTab = tabIndex * this.state.tabWidth;
-            let rightEdgeOfTab = leftEdgeOfTab + this.state.tabWidth;
-            let translateX = rightEdgeOfTab;
-            // Our translation is  this: Take the  right edge of the bounding box, and subtract the left edge. This gives us the 0 point for the box. Then, we subtract the right edge of the tab. The result is a number that we use to shift the entire element and align the right edge of the tab with the right edge of the bounding box. We also account for the 30 px region on the right.
-            // If there's no overflow, we don't scroll.
-            if (rightEdgeOfTab < boundingBox.right) {
-                translateX = 0;
-            }
-            else {
-                // Our translation is  this: Take the  right edge of the bounding box, and subtract the left edge. This gives us the 0 point for the box. Then, we subtract the right edge of the tab. The result is a number that we use to shift the entire element and align the right edge of the tab with the right edge of the bounding box.
-                translateX = boundingBox.right - boundingBox.left - rightEdgeOfTab;
-                // If there's no overflow, we don't scroll.
-                if (rightEdgeOfTab < boundingBox.right) {
-                    translateX = 0;
-                }
-            }
-            this.setTabListTranslateX(translateX);
-        }
-    }
-    setTabListTranslateX(translateX) {
-        Actions.setTabListScrollPosition(translateX);
-    }
-    /**
-     * Someone is dragging _something_ over the tab region. We respond by rendering the ghost tab.
-     * @param {event} e
-     */
-    dragOver(e) {
-        e.preventDefault();
-    }
-    /**
-     * Triggered when the user moves their mouse out of the tabRegion after a dragOver event happens. When they leave, we hide our placeholder tab.
-     * @param {event} e
-     */
-    dragLeave(e) {
-        let boundingRect = this.state.boundingBox;
-        if (!isPointInBox({ x: e.screenX, y: e.screenY }, boundingRect)) {
-            this.setState({
-                hoveredTabIndex: undefined,
-            });
-        }
-    }
-    /**
-     * Set to a timeout. An event is sent to the RouterClient which will be handled by the drop handler on the window.
-     * In the event that a drop handler never fires to stop tiling or tabbing, this will take care of it.
-     *
-     * @memberof windowTitleBar
-     */
-    cancelTabbing() {
-        stopTilingOrTabbing({ allowDropOnSelf: true });
-        this.onWindowResize();
-    }
-    /**
-     * Basically exists just to keep the render method clean. Gives conditional classes to the active tab.
-     * @param {tab} tab
-     */
-    getTabClasses(tab) {
-        let classes = "fsbl-tab";
-        let tabIndex = this.findTabIndex(tab);
-        if (tabIndex === this.state.hoveredTabIndex)
-            classes = `${classes} ghost-tab`;
-        if (this.state.activeTab && tab.windowName === this.state.activeTab.windowName) {
-            classes = `${classes} fsbl-active-tab`;
-        }
-        return classes;
-    }
-    onTabDraggedOver(e, tabDraggedOver) {
-        e.preventDefault();
-        // Find index of tab.
-        let tabIndex = this.findTabIndex(tabDraggedOver);
-        this.setState({
-            hoveredTabIndex: tabIndex,
-        });
-    }
-    /**
-     * OnClick handler for the close button on individual tabs.
-     * @PLACEHOLDER will interact with tabbing API
-     * @param {*} tab
-     */
-    onTabClosed(identifier) {
-        Actions.closeTab(identifier);
-    }
-    /**
-     * drop handler for the tab region.
-     * @param {*} tab
-     */
-    onTabAdded(identifier, newIndex) {
-        if (newIndex === -1) {
-            newIndex = undefined;
-        }
-        let myIdentifier = finsembleWindow.identifier;
-        if (myIdentifier) {
-            myIdentifier.title = finsembleWindow.windowOptions.title;
-        }
-        if (this.state.tabs.length === 1 && identifier.windowName == myIdentifier.windowName) {
-            return;
-        }
-        if (typeof newIndex === "number") {
-            Actions.reorderTab(identifier, newIndex);
-        }
-        this.setState({
-            hoveredTabIndex: undefined,
-        });
-    }
-    /**
-     * OnClick handler for individual tabs.
-     * @PLACEHOLDER will interact with tabbing API
-     * @param {*} tab
-     */
-    setActiveTab(tab) {
-        Actions.setActiveTab(tab);
-    }
-    onTabsChanged(err, response) {
-        let { value } = response;
-        this.setState({
-            tabs: value,
-            tabWidth: this.getTabWidth({ tabList: value }),
-        });
-    }
-    onTabListTranslateChanged(err, response) {
-        let { value } = response;
-        this.setState({
-            translateX: value,
-        });
-    }
-    /**
-     * Change active tab to the next one on either its left or right
-     *
-     * @param direction the direction the tab should change to (1 = right, -1 = left)
-     */
-    changeTab(direction) {
-        const { currentIndex } = Actions.findTab(this.state.activeTab);
-        let newIndex = currentIndex + direction;
-        if (newIndex < 0) {
-            newIndex = this.state.tabs.length - 1;
-        }
-        else if (newIndex >= this.state.tabs.length) {
-            newIndex = 0;
-        }
-        Actions.setActiveTab(this.state.tabs[newIndex]);
-    }
-    UNSAFE_componentWillMount() {
-        // Store.addListener({ field: "activeTab" }, this.onActiveTabChanged);
-        Store.addListener({ field: "tabs" }, this.onTabsChanged);
-        Store.addListener({ field: "tabListTranslateX" }, this.onTabListTranslateChanged);
-    }
-    componentDidMount() {
-        window.addEventListener("resize", this.onWindowResizeThrottled);
-        window.addEventListener("keydown", (e) => {
-            if (e.ctrlKey) {
-                // On Mac or Windows, Ctrl+Tab changes tabs to the right
-                // On Windows, Ctrl+PageDown changes tabs to the right
-                if ((e.key === "Tab" && !e.shiftKey) || e.key === "PageDown") {
-                    this.changeTab(1);
-                    e.preventDefault();
-                    // On Mac or Windows, Ctrl+Shift+Tab changes tabs to the left
-                    // On Windows, Ctrl+PageUp changes tabs to the left
-                }
-                else if (e.key === "PageUp" || (e.key === "Tab" && e.shiftKey)) {
-                    this.changeTab(-1);
-                    e.preventDefault();
-                }
-            }
-            else if (e.metaKey && e.altKey) {
-                // On Mac, Cmd+Opt+Right changes tabs to the right
-                if (e.key === "ArrowRight") {
-                    this.changeTab(1);
-                    e.preventDefault();
-                    // On Mac, Cmd+Opt+Left changes tabs to the left
-                }
-                else if (e.key === "ArrowLeft") {
-                    this.changeTab(-1);
-                    e.preventDefault();
-                }
-            }
-        });
-        let boundingBox = this.refs.Me.getBoundingClientRect();
-        this.setState({
-            boundingBox: boundingBox,
-            tabWidth: this.getTabWidth({ boundingBox }),
-        });
-    }
-    componentWillUnmount() {
-        // Store.removeListener({ field: "activeTab" }, this.onActiveTabChanged);
-        Store.removeListener({ field: "tabs" }, this.onTabsChanged);
-        Store.removeListener({ field: "tabListTranslateX" }, this.onTabListTranslateChanged);
-        window.removeEventListener("resize", this.onWindowResizeThrottled);
-    }
-    hoverAction(newHoverState) {
-        this.setState({ hoverState: newHoverState });
-    }
-    render() {
-        let { translateX } = this.state;
-        translateX = Math.abs(translateX);
-        // If we have just 1 tab, we render the title. Unless someone is dragging a tab around - in that case, we will render the tab view, even though we only have 1.
-        let componentToRender = "title";
-        if (this.state.tabs.length === 1 && this.props.listenForDragOver && !this.state.iAmDragging) {
-            componentToRender = "tabs";
-        }
-        if (this.state.tabs.length > 1) {
-            componentToRender = "tabs";
-        }
-        // Cleanup in case we were translated before closing the second to last tab. This left-aligns the title.
-        if (componentToRender === "title") {
-            translateX = 0;
-        }
-        if (this.refs.Me) {
-            this.refs.Me.scrollLeft = translateX;
-        }
-        return (React.createElement("div", { ref: "Me", onDragLeave: this.dragLeave, className: this.props.className, onWheel: this.onMouseWheel, onScroll: (e) => {
-                this.onMouseWheel(e);
-            }, onDrop: this.drop, onDragOver: this.dragOver },
-            React.createElement("div", { className: "tab-region-wrapper" },
-                componentToRender === "title" && this.renderTitle(),
-                componentToRender === "tabs" && this.renderTabs())));
-    }
-    /**
-     * Function to render the title. Helps keep the render code clean.
-     */
-    renderTitle() {
-        const windowIdentifier = {
-            windowName: finsembleWindow.name,
-            uuid: finsembleWindow.uuid,
-        };
-        return (React.createElement("div", { draggable: "true", onDragStart: (e) => {
-                FSBL.Clients.Logger.system.debug("Tab drag start - TITLE");
-                let activeIdentifier = finsembleWindow.identifier;
-                activeIdentifier.title = finsembleWindow.windowOptions.title;
-                this.startDrag(e, activeIdentifier);
-            }, onDragEnd: this.stopDrag, "data-hover": this.state.hoverState, className: "fsbl-header-title" },
-            React.createElement(FinsembleHoverDetector, { edge: "top", hoverAction: this.hoverAction.bind(this) }),
-            React.createElement(Title, { onUpdate: this.props.onTitleUpdated, windowIdentifier: windowIdentifier })));
-    }
-    /**
-     * Renders the array of tabs.
-     * @param {*} props
-     */
-    renderTabs() {
-        let titleWidth = this.state.tabWidth - ICON_AREA - CLOSE_BUTTON_MARGIN;
-        return this.state.tabs.map((tab) => (React.createElement(Tab, { draggable: "true", key: tab.windowName, className: this.getTabClasses(tab), onClick: () => {
-                this.setActiveTab(tab);
-            }, onDragStart: (e, identifier) => {
-                FSBL.Clients.Logger.system.debug("Tab drag - TAB", identifier.windowName);
-                this.startDrag(e, identifier);
-            }, onDrop: this.drop, onDragEnd: this.stopDrag, onTabClose: () => {
-                this.onTabClosed(tab);
-            }, onTabDraggedOver: this.onTabDraggedOver, listenForDragOver: this.props.listenForDragOver, tabWidth: this.state.tabWidth, titleWidth: titleWidth, windowIdentifier: tab })));
-    }
-}
+import * as React from "react";
+import Tab from "./Tab";
+import { FinsembleHoverDetector } from "../../../legacyControls/FinsembleHoverDetector";
+import { Store, Actions } from "../../stores/windowTitleBarStore";
+import { Title } from "../windowTitle";
+import _throttle from "lodash/throttle";
+import { FEAGlobals } from "../../../../../common/Globals";
+let TAB_WIDTH = 300;
+// Next two items are for calculating how large the title should be within a tab.
+const ICON_AREA = 16;
+const CLOSE_BUTTON_MARGIN = 12;
+const MINIMUM_TAB_SIZE = 100;
+const stopTilingOrTabbing = (params, cb) => {
+    const transmitAndQueryStop = () => {
+        // docking service has a responder for the query
+        FEAGlobals.FSBL.Clients.RouterClient.query("DockingService.stopTilingOrTabbing", params, () => {
+            cb === null || cb === void 0 ? void 0 : cb();
+        });
+        // WindowTitleBarShell is listening for transmit events so that it knows when tiling/tabbing has stopped
+        FEAGlobals.FSBL.Clients.RouterClient.transmit("DockingService.stopTilingOrTabbing", params);
+    };
+    // Get the mouse position if not passed in.
+    if (!params.mousePosition) {
+        FEAGlobals.fin.desktop.System.getMousePosition((position) => {
+            params.mousePosition = position;
+            transmitAndQueryStop();
+            // If allowDropOnSelf is true, it came from a tab/window drop event. Run the callback.
+            if (!params.allowDropOnSelf)
+                cb === null || cb === void 0 ? void 0 : cb();
+        });
+    }
+    else {
+        transmitAndQueryStop();
+        // If allowDropOnSelf is true, it came from a tab/window drop event. Run the callback.
+        if (!params.allowDropOnSelf)
+            cb === null || cb === void 0 ? void 0 : cb();
+    }
+};
+const isPointInBox = (point, box) => {
+    if (!box.bottom)
+        box.bottom = box.top + box.height;
+    if (!box.right)
+        box.right = box.left + box.width;
+    return point.x > box.left && point.x < box.right && point.y < box.bottom && point.y > box.top;
+};
+export class TabList extends React.Component {
+    constructor(props) {
+        super(props);
+        let initialState = Store.getValues(["activeTab", "tabs"]);
+        let activeIdentifier = FEAGlobals.finsembleWindow.identifier;
+        if (activeIdentifier) {
+            activeIdentifier.title = FEAGlobals.finsembleWindow.windowOptions.title;
+        }
+        this.state = {
+            translateX: 0,
+            tabs: initialState.tabs,
+            activeTab: activeIdentifier,
+            boundingBox: {
+                right: 0,
+                left: 0,
+                top: 0,
+                bottom: 0,
+                height: 0,
+                width: 0,
+            },
+            iAmDragging: false,
+            hoverState: "false",
+            tabWidth: TAB_WIDTH,
+            hoveredTabIndex: undefined,
+        };
+        this.onWindowResizeThrottled = () => { };
+        this.setActiveTabThrottled = () => { };
+        this.bindCorrectContext();
+        this.mousePositionOnDragEnd = {
+            x: 0,
+            y: 0,
+        };
+    }
+    /**
+     * Make sure that _this_ is correct inside of our event handlers.
+     */
+    bindCorrectContext() {
+        this.startDrag = this.startDrag.bind(this);
+        this.stopDrag = this.stopDrag.bind(this);
+        this.cancelTabbing = this.cancelTabbing.bind(this);
+        this.drop = this.drop.bind(this);
+        this.dragOver = this.dragOver.bind(this);
+        this.dragLeave = this.dragLeave.bind(this);
+        this.onMouseWheel = this.onMouseWheel.bind(this);
+        this.renderTitle = this.renderTitle.bind(this);
+        this.renderTabs = this.renderTabs.bind(this);
+        this.findTabIndex = this.findTabIndex.bind(this);
+        this.setActiveTab = this.setActiveTab.bind(this);
+        // the setActiveTab function should be throttled to prevent the bug where switching tabs very fast when the stack is maximized made tabs not responsive.
+        this.setActiveTabThrottled = _throttle(this.setActiveTab, 500);
+        this.onTabAdded = this.onTabAdded.bind(this);
+        this.onTabClosed = this.onTabClosed.bind(this);
+        this.onTabsChanged = this.onTabsChanged.bind(this);
+        this.onTabDraggedOver = this.onTabDraggedOver.bind(this);
+        this.isTabRegionOverflowing = this.isTabRegionOverflowing.bind(this);
+        this.onWindowResize = this.onWindowResize.bind(this);
+        this.onWindowResizeThrottled = _throttle(this.onWindowResize, 100);
+        this.getTabWidth = this.getTabWidth.bind(this);
+        this.setTabListTranslateX = this.setTabListTranslateX.bind(this);
+        this.onTabListTranslateChanged = this.onTabListTranslateChanged.bind(this);
+        this.changeTab = this.changeTab.bind(this);
+    }
+    getTabWidth(params = {}) {
+        let { boundingBox, tabList } = params;
+        if (typeof tabList === "undefined") {
+            tabList = this.state.tabs;
+        }
+        if (typeof boundingBox === "undefined") {
+            boundingBox = this.refs.Me.getBoundingClientRect();
+        }
+        if (typeof boundingBox.right === "undefined") {
+            return TAB_WIDTH;
+        }
+        let containerWidth = boundingBox.right - boundingBox.left;
+        let newTabWidth = containerWidth / tabList.length;
+        return newTabWidth < MINIMUM_TAB_SIZE ? MINIMUM_TAB_SIZE : newTabWidth;
+    }
+    /**
+     * Resize handler. Calculates the space that the center-region is taking up. May be used to scale tabs proportionally.
+     */
+    onWindowResize() {
+        let bounds = this.refs.Me.getBoundingClientRect();
+        this.setState({
+            boundingBox: bounds,
+            tabWidth: this.getTabWidth(),
+        });
+    }
+    findTabIndex(tab) {
+        return this.state.tabs.findIndex((el) => tab.windowName === el.windowName);
+    }
+    /**
+     *
+     * Function that's called when this component fires the onDragStart event, this will start the tiling or tabbing process
+     *
+     * @param e The SyntheticEvent created by React when the startdrag event is called
+     * @memberof windowTitleBar
+     */
+    startDrag(e, windowIdentifier) {
+        this.setState({
+            iAmDragging: true,
+        });
+        e.dataTransfer.setData("application/fsbl-tab-data", JSON.stringify(windowIdentifier));
+        FEAGlobals.FSBL.Clients.RouterClient.transmit("DockingService.startTilingOrTabbing", {
+            windowIdentifier,
+        });
+    }
+    /**
+     * Called when the react component detects a drop (or stop drag, which is equivalent)
+     *
+     * @param e The SyntheticEvent created by React when the stopdrag event is called
+     * @memberof windowTitleBar
+     */
+    stopDrag(e) {
+        // We don't want onDropHandler() in windowTitleBarComponent.jsx
+        // to handle this drop event, so we call event.stopPropagation().
+        e.stopPropagation();
+        FEAGlobals.FSBL.Clients.Logger.system.debug("Tab stopDrag.");
+        this.mousePositionOnDragEnd = {
+            x: e.nativeEvent.screenX,
+            y: e.nativeEvent.screenY,
+        };
+        const { boundingBox } = this.state;
+        FEAGlobals.finsembleWindow.getBounds((err, bounds) => {
+            var _a, _b, _c, _d;
+            // We ONLY want to know if we're in the tab region!
+            const tabRegion = {
+                top: boundingBox.top + ((_a = bounds === null || bounds === void 0 ? void 0 : bounds.top) !== null && _a !== void 0 ? _a : 0),
+                bottom: boundingBox.bottom + ((_b = bounds === null || bounds === void 0 ? void 0 : bounds.top) !== null && _b !== void 0 ? _b : 0),
+                left: boundingBox.left + ((_c = bounds === null || bounds === void 0 ? void 0 : bounds.left) !== null && _c !== void 0 ? _c : 0),
+                right: boundingBox.right + ((_d = bounds === null || bounds === void 0 ? void 0 : bounds.left) !== null && _d !== void 0 ? _d : 0),
+                width: 0,
+                height: 0,
+            };
+            if (!isPointInBox(this.mousePositionOnDragEnd, tabRegion)) {
+                // allow for a 50ms delay so this message goes after a drop message from a target window if tabbing
+                setTimeout(() => {
+                    stopTilingOrTabbing({
+                        mousePosition: this.mousePositionOnDragEnd,
+                    });
+                }, 50);
+                this.onWindowResize();
+            }
+            else {
+                // sometimes a tab gets dropped in a bad spot where no action gets taken and we get stuck in tiling mode
+                // to make sure nothing bad happens, call cancel after a similar 50ms delay
+                // If some action was taken, this will be ignored by Finsemble
+                setTimeout(() => {
+                    FEAGlobals.FSBL.Clients.RouterClient.transmit("DockingService.cancelTilingOrTabbing", {
+                        windowIdentifier: this.state.activeTab,
+                    });
+                }, 50);
+            }
+            // set the default state after dragging
+            this.setState({
+                iAmDragging: false,
+            });
+        });
+    }
+    /**
+     * Helper function that will pull data from a drop event, parse it, and return it.
+     * @param {event} e
+     */
+    extractWindowIdentifier(e) {
+        try {
+            let identifier = JSON.parse(e.dataTransfer.getData("application/fsbl-tab-data"));
+            // If the "identifier" is formed properly, it'll have this properly. Otherwise, it's something else (e.g., share data, image, etc).
+            if (typeof identifier.windowName !== "undefined") {
+                return identifier;
+            }
+            else if (identifier.waitForIdentifier) {
+                return identifier;
+            }
+            else {
+                FEAGlobals.FSBL.Clients.Logger.system.error("Malformed drop object detected in windowTitleBar. Check tab dropping code. Expected windowIdentifier, got ", identifier);
+                return null;
+            }
+        }
+        catch (e2) {
+            FEAGlobals.FSBL.Clients.Logger.system.error("Error in 'extractWindowIdentifier'. Check TabRegion.jsx. Either there was no data in the event, or it was a circular object that caused JSON.parse to fail. Javascript Error:", e2);
+            return null;
+        }
+    }
+    /**
+     * Called when a drop event occurs on the tab region. We (hope) that this came from a tab. Could be a share icon, an image, something else - that's why we check to see if the identifier exists before doing anything.
+     * @param {event} e
+     */
+    drop(e) {
+        let identifier;
+        if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            identifier = this.extractWindowIdentifier(e);
+        }
+        FEAGlobals.FSBL.Clients.Logger.system.debug("Tab drag drop.");
+        if (!identifier)
+            return; // the dropped item is not a tab
+        if (this.state.tabs.length === 1 && identifier.windowName === FEAGlobals.finsembleWindow.name) {
+            // The source and destination tabs are the same
+            //
+            // Cancel the tabbing event
+            FEAGlobals.FSBL.Clients.RouterClient.transmit("DockingService.cancelTilingOrTabbing", {
+                windowIdentifier: this.state.activeTab,
+            });
+            // But also set "iAmDragging" to false in order to allow other tabs to be dragged in here
+            this.setState({
+                iAmDragging: false,
+            });
+            return;
+        }
+        stopTilingOrTabbing({ allowDropOnSelf: true, action: "tabbing" }, () => {
+            FEAGlobals.FSBL.Clients.RouterClient.transmit("tabbingDragEnd", { success: true });
+            if (identifier && identifier.windowName) {
+                // Calls a method defined inside of windowTitleBar.jsx.
+                this.onTabAdded(identifier, this.state.hoveredTabIndex);
+            }
+            else if (identifier && identifier.waitForIdentifier) {
+                let subscribeId;
+                let tabIdentifierSubscriber = (err, response) => {
+                    if (!response.data.windowName)
+                        return;
+                    FEAGlobals.FSBL.Clients.RouterClient.unsubscribe(subscribeId);
+                    this.onTabAdded(response.data, this.state.hoveredTabIndex);
+                };
+                subscribeId = FEAGlobals.FSBL.Clients.RouterClient.subscribe(`Finsemble.${identifier.guid}`, tabIdentifierSubscriber);
+            }
+            else {
+                FEAGlobals.FSBL.Clients.Logger.system.error("Unexpected drop event on window title bar. Check the 'drop' method on TabRegion.jsx.");
+            }
+        });
+    }
+    isTabRegionOverflowing() {
+        let lastTab = {
+            right: this.state.tabs.length * this.state.tabWidth,
+        };
+        return lastTab.right + this.state.translateX > this.state.boundingBox.right - this.state.boundingBox.left;
+    }
+    /**
+     * Event handler for when a user wheels inside of the tab region. We translate the deltaY that the event provides into horizontal movement. The translateX value that we return will be used in the render method below.
+     * @param {event} e
+     * This should probably be refactored into separate handlers for scroll and mousewheel to account for the differences in event properties.
+     */
+    onMouseWheel(e) {
+        e.preventDefault();
+        let numTabs = this.state.tabs.length;
+        let translateX = 0;
+        // If there's more than one tab, do some calculations, otherwise we aren't going to scroll this region, no matter how much the user wants us to.
+        if (numTabs > 1) {
+            let currentX = this.refs.Me.scrollLeft;
+            let { boundingBox } = this.state;
+            // Figure out position of first tab and last tab.
+            let firstTab = {
+                left: 0 + boundingBox.left,
+            };
+            let lastTab = {
+                right: numTabs * this.state.tabWidth,
+            };
+            let deltaX = this.state.tabWidth / 3;
+            if (e.nativeEvent.deltaY < 0) {
+                deltaX = 0 - deltaX;
+            }
+            // Mouses with high sensitivity will cause massive scroll amounts. We don't want to scroll more than one tab's width in a single mouse wheel, otherwise you risk missing a tab.
+            if (Math.abs(deltaX) > this.state.tabWidth) {
+                let isNegative = false;
+                if (deltaX < 0) {
+                    isNegative = true;
+                }
+                deltaX = isNegative ? 0 - this.state.tabWidth : this.state.tabWidth;
+            }
+            // when we set scrollLeft on the element, this event fires. But there's no actual event. so stop.
+            if (!e.nativeEvent.deltaY) {
+                return;
+            }
+            let originalDeltaY = e.nativeEvent.deltaY;
+            let deltaY = originalDeltaY;
+            if (Math.abs(originalDeltaY) > this.state.tabWidth / 3) {
+                deltaY = this.state.tabWidth / 3;
+                if (originalDeltaY < 0) {
+                    deltaY = 0 - deltaY;
+                }
+            }
+            translateX = deltaY + currentX;
+            let newRightForLastTab = lastTab.right + translateX;
+            let newLeftForFirstTab = firstTab.left + translateX;
+            // Do not let the left of the first tab move to the right of the left edge of the bounding box.
+            if (newLeftForFirstTab < 0) {
+                return this.scrollToFirstTab();
+            }
+            else if (e.nativeEvent.deltaY < 0 && newRightForLastTab <= boundingBox.right) {
+                // ONLY IF the user is scrolling from right-to-left (deltaY will be negative). IF they try to do that, do not allow the right edge of the last tab to detach.
+                return this.scrollToLastTab();
+            }
+            // Else, the translation is okay. We're in the middle of our list and the first and last tabs aren't being rendered improperly.
+            translateX < 0 ? (translateX = 0) : translateX;
+            this.setState({ translateX });
+        }
+    }
+    /**
+     * Scrolls to our active tab.
+     */
+    scrollToActiveTab() {
+        this.scrollToTab(this.state.activeTab);
+    }
+    /**
+     * Scrolls to the first tab in our list of tabs.
+     */
+    scrollToFirstTab() {
+        let firstTab = this.state.tabs[0];
+        this.scrollToTab(firstTab);
+    }
+    /**
+     * Scrolls to the last tab in our list of tabs
+     */
+    scrollToLastTab() {
+        let lastTab = this.state.tabs[this.state.tabs.length - 1];
+        this.scrollToTab(lastTab);
+    }
+    /**
+     * Function that will horizontally scroll the tab region so that the right edge of the tab lines up with the right edge of the tab region.
+     * @param {} tab
+     */
+    scrollToTab(tab) {
+        // 'BoundingBox' is just the boundingClientRect of the tab region. It is, in essence, the center part of the windowTitleBar.
+        let { boundingBox } = this.state;
+        let tabIndex = this.state.tabs.findIndex((el) => el.windowName === tab.windowName);
+        if (tabIndex > -1) {
+            let leftEdgeOfTab = tabIndex * this.state.tabWidth;
+            let rightEdgeOfTab = leftEdgeOfTab + this.state.tabWidth;
+            let translateX = rightEdgeOfTab;
+            // Our translation is  this: Take the  right edge of the bounding box, and subtract the left edge. This gives us the 0 point for the box. Then, we subtract the right edge of the tab. The result is a number that we use to shift the entire element and align the right edge of the tab with the right edge of the bounding box. We also account for the 30 px region on the right.
+            // If there's no overflow, we don't scroll.
+            if (rightEdgeOfTab < boundingBox.right) {
+                translateX = 0;
+            }
+            else {
+                // Our translation is  this: Take the  right edge of the bounding box, and subtract the left edge. This gives us the 0 point for the box. Then, we subtract the right edge of the tab. The result is a number that we use to shift the entire element and align the right edge of the tab with the right edge of the bounding box.
+                translateX = boundingBox.right - boundingBox.left - rightEdgeOfTab;
+                // If there's no overflow, we don't scroll.
+                if (rightEdgeOfTab < boundingBox.right) {
+                    translateX = 0;
+                }
+            }
+            this.setTabListTranslateX(translateX);
+        }
+    }
+    setTabListTranslateX(translateX) {
+        Actions.setTabListScrollPosition(translateX);
+    }
+    /**
+     * Someone is dragging _something_ over the tab region. We respond by rendering the ghost tab.
+     * @param {event} e
+     */
+    dragOver(e) {
+        e.preventDefault();
+    }
+    /**
+     * Triggered when the user moves their mouse out of the tabRegion after a dragOver event happens. When they leave, we hide our placeholder tab.
+     * @param {event} e
+     */
+    dragLeave(e) {
+        let boundingRect = this.state.boundingBox;
+        if (!isPointInBox({ x: e.screenX, y: e.screenY }, boundingRect)) {
+            this.setState({
+                hoveredTabIndex: undefined,
+            });
+        }
+    }
+    /**
+     * Set to a timeout. An event is sent to the RouterClient which will be handled by the drop handler on the window.
+     * In the event that a drop handler never fires to stop tiling or tabbing, this will take care of it.
+     *
+     * @memberof windowTitleBar
+     */
+    cancelTabbing() {
+        stopTilingOrTabbing({ allowDropOnSelf: true });
+        this.onWindowResize();
+    }
+    /**
+     * Basically exists just to keep the render method clean. Gives conditional classes to the active tab.
+     * @param {tab} tab
+     */
+    getTabClasses(tab) {
+        let classes = "fsbl-tab";
+        let tabIndex = this.findTabIndex(tab);
+        if (tabIndex === this.state.hoveredTabIndex)
+            classes = `${classes} ghost-tab`;
+        if (this.state.activeTab && tab.windowName === this.state.activeTab.windowName) {
+            classes = `${classes} fsbl-active-tab`;
+        }
+        return classes;
+    }
+    onTabDraggedOver(e, tabDraggedOver) {
+        e.preventDefault();
+        // Find index of tab.
+        let tabIndex = this.findTabIndex(tabDraggedOver);
+        this.setState({
+            hoveredTabIndex: tabIndex,
+        });
+    }
+    /**
+     * OnClick handler for the close button on individual tabs.
+     * @PLACEHOLDER will interact with tabbing API
+     * @param {*} tab
+     */
+    onTabClosed(identifier) {
+        Actions.closeTab(identifier);
+    }
+    /**
+     * drop handler for the tab region.
+     * @param {*} tab
+     */
+    onTabAdded(identifier, newIndex) {
+        if (newIndex === -1) {
+            newIndex = undefined;
+        }
+        let myIdentifier = FEAGlobals.finsembleWindow.identifier;
+        if (myIdentifier) {
+            myIdentifier.title = FEAGlobals.finsembleWindow.windowOptions.title;
+        }
+        if (this.state.tabs.length === 1 && identifier.windowName == myIdentifier.windowName) {
+            return;
+        }
+        if (typeof newIndex === "number") {
+            Actions.reorderTab(identifier, newIndex);
+        }
+        this.setState({
+            hoveredTabIndex: undefined,
+        });
+    }
+    /**
+     * OnClick handler for individual tabs.
+     * @PLACEHOLDER will interact with tabbing API
+     * @param {*} tab
+     */
+    setActiveTab(tab) {
+        Actions.setActiveTab(tab);
+    }
+    onTabsChanged(err, response) {
+        let { value } = response;
+        this.setState({
+            tabs: value,
+            tabWidth: this.getTabWidth({ tabList: value }),
+        });
+    }
+    onTabListTranslateChanged(err, response) {
+        let { value } = response;
+        this.setState({
+            translateX: value,
+        });
+    }
+    /**
+     * Change active tab to the next one on either its left or right
+     *
+     * @param direction the direction the tab should change to (1 = right, -1 = left)
+     */
+    changeTab(direction) {
+        const { currentIndex } = Actions.findTab(this.state.activeTab);
+        let newIndex = currentIndex + direction;
+        if (newIndex < 0) {
+            newIndex = this.state.tabs.length - 1;
+        }
+        else if (newIndex >= this.state.tabs.length) {
+            newIndex = 0;
+        }
+        this.setActiveTabThrottled(this.state.tabs[newIndex]);
+    }
+    UNSAFE_componentWillMount() {
+        // Store.addListener({ field: "activeTab" }, this.onActiveTabChanged);
+        Store.addListener({ field: "tabs" }, this.onTabsChanged);
+        Store.addListener({ field: "tabListTranslateX" }, this.onTabListTranslateChanged);
+    }
+    componentDidMount() {
+        window.addEventListener("resize", this.onWindowResizeThrottled);
+        window.addEventListener("keydown", (e) => {
+            if (e.ctrlKey) {
+                // On Mac or Windows, Ctrl+Tab changes tabs to the right
+                // On Windows, Ctrl+PageDown changes tabs to the right
+                if ((e.key === "Tab" && !e.shiftKey) || e.key === "PageDown") {
+                    this.changeTab(1);
+                    e.preventDefault();
+                    // On Mac or Windows, Ctrl+Shift+Tab changes tabs to the left
+                    // On Windows, Ctrl+PageUp changes tabs to the left
+                }
+                else if (e.key === "PageUp" || (e.key === "Tab" && e.shiftKey)) {
+                    this.changeTab(-1);
+                    e.preventDefault();
+                }
+            }
+            else if (e.metaKey && e.altKey) {
+                // On Mac, Cmd+Opt+Right changes tabs to the right
+                if (e.key === "ArrowRight") {
+                    this.changeTab(1);
+                    e.preventDefault();
+                    // On Mac, Cmd+Opt+Left changes tabs to the left
+                }
+                else if (e.key === "ArrowLeft") {
+                    this.changeTab(-1);
+                    e.preventDefault();
+                }
+            }
+        });
+        let boundingBox = this.refs.Me.getBoundingClientRect();
+        this.setState({
+            boundingBox: boundingBox,
+            tabWidth: this.getTabWidth({ boundingBox }),
+        });
+    }
+    componentWillUnmount() {
+        // Store.removeListener({ field: "activeTab" }, this.onActiveTabChanged);
+        Store.removeListener({ field: "tabs" }, this.onTabsChanged);
+        Store.removeListener({ field: "tabListTranslateX" }, this.onTabListTranslateChanged);
+        window.removeEventListener("resize", this.onWindowResizeThrottled);
+    }
+    hoverAction(newHoverState) {
+        this.setState({ hoverState: newHoverState });
+    }
+    render() {
+        let { translateX } = this.state;
+        translateX = Math.abs(translateX);
+        // If we have just 1 tab, we render the title. Unless someone is dragging a tab around - in that case, we will render the tab view, even though we only have 1.
+        let componentToRender = "title";
+        if (this.state.tabs.length === 1 && this.props.listenForDragOver && !this.state.iAmDragging) {
+            componentToRender = "tabs";
+        }
+        if (this.state.tabs.length > 1) {
+            componentToRender = "tabs";
+        }
+        // Cleanup in case we were translated before closing the second to last tab. This left-aligns the title.
+        if (componentToRender === "title") {
+            translateX = 0;
+        }
+        if (this.refs.Me) {
+            this.refs.Me.scrollLeft = translateX;
+        }
+        return (React.createElement("div", { ref: "Me", onDragLeave: this.dragLeave, className: this.props.className, onWheel: this.onMouseWheel, onScroll: (e) => {
+                this.onMouseWheel(e);
+            }, onDrop: this.drop, onDragOver: this.dragOver },
+            React.createElement("div", { className: "tab-region-wrapper" },
+                componentToRender === "title" && this.renderTitle(),
+                componentToRender === "tabs" && this.renderTabs())));
+    }
+    /**
+     * Function to render the title. Helps keep the render code clean.
+     */
+    renderTitle() {
+        const windowIdentifier = {
+            windowName: FEAGlobals.finsembleWindow.name,
+            uuid: FEAGlobals.finsembleWindow.uuid,
+        };
+        return (React.createElement("div", { draggable: "true", onDragStart: (e) => {
+                FEAGlobals.FSBL.Clients.Logger.system.debug("Tab drag start - TITLE");
+                let activeIdentifier = FEAGlobals.finsembleWindow
+                    .identifier;
+                activeIdentifier.title = FEAGlobals.finsembleWindow.windowOptions.title;
+                this.startDrag(e, activeIdentifier);
+            }, onDragEnd: this.stopDrag, "data-hover": this.state.hoverState, className: "fsbl-header-title" },
+            React.createElement(FinsembleHoverDetector, { edge: "top", hoverAction: this.hoverAction.bind(this) }),
+            React.createElement(Title, { onUpdate: this.props.onTitleUpdated, windowIdentifier: windowIdentifier })));
+    }
+    /**
+     * Renders the array of tabs.
+     * @param {*} props
+     */
+    renderTabs() {
+        let titleWidth = this.state.tabWidth - ICON_AREA - CLOSE_BUTTON_MARGIN;
+        return this.state.tabs.map((tab) => (React.createElement(Tab, { draggable: "true", key: tab.windowName, className: this.getTabClasses(tab), onClick: () => {
+                this.setActiveTabThrottled(tab);
+            }, onDragStart: (e, identifier) => {
+                FEAGlobals.FSBL.Clients.Logger.system.debug("Tab drag - TAB", identifier.windowName);
+                this.startDrag(e, identifier);
+            }, onDrop: this.drop, onDragEnd: this.stopDrag, onTabClose: () => {
+                this.onTabClosed(tab);
+            }, onTabDraggedOver: this.onTabDraggedOver, listenForDragOver: this.props.listenForDragOver, tabWidth: this.state.tabWidth, titleWidth: titleWidth, windowIdentifier: tab })));
+    }
+}
 //# sourceMappingURL=TabList.js.map