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

package/react/components/windowTitleBar/components/windowTitle.js

@@ -1,377 +1,378 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _Title_instances, _Title_getWindowManagerForTab, _Title_calculateTabTitle, _Title_getUserEditedTitle, _Title_getConfigTitle, _Title_getDocumentTitle, _Title_getAppDTitle, _Title_addListeners, _Title_removeListeners;
-import React, { Component } from "react";
-import { Icon } from "../../icon/Icon";
-import { Store } from "../stores/windowTitleBarStore";
-// The store name for the distributed store which tracks tab titles
-const WINDOW_TAB_TITLE_STORE = "window-tab-title";
-// The field name to watch for tab title edits
-const FIELD_NAME_PERSISTED_TITLE = "persistedTitle";
-// The windowTabNameStore reference
-let windowTabNameStore;
-/**
- * Gets the store which tracks the tab title for a windowName. This is a distributed store shared by all components.
- *
- * @returns a Promise which resolves the StoreModel associated with window and tab names
- */
-const getWindowTabNameStore = async () => {
-    if (!windowTabNameStore) {
-        let { data: store } = await FSBL.Clients.DistributedStoreClient.createGlobalStore({
-            store: WINDOW_TAB_TITLE_STORE,
-        });
-        windowTabNameStore = store;
-    }
-    // Return the store
-    return windowTabNameStore;
-};
-/**
- * The wrapper component for tab renaming
- * @param {*} props
- */
-function EditTab(props) {
-    const [editingTitle, setEditingTitle] = React.useState(false);
-    const [clickTimeout, setClickTimeout] = React.useState(undefined);
-    const inputEl = React.useRef(null);
-    const updateTabTitle = async (e) => {
-        // When the tab title has changed via a user edit, simply update the DistributedStore
-        // Get the title
-        const title = e.target.value;
-        // Get the tab name store
-        let store = await getWindowTabNameStore();
-        // If the store is unavailable, then the tab name cannot be persisted
-        if (!store) {
-            // This is not critical, but tab titles may be stale
-            FSBL.Clients.Logger.warn("Error persisting tab title via EditTab: the store was not found");
-            return;
-        }
-        // Persist the tab title
-        store.setValue({ field: props.windowIdentifier.windowName, value: title });
-        // Get the window which coresponds to the tab being edited
-        const { wrap: win } = await FSBL.FinsembleWindow.getInstance(props.windowIdentifier);
-        // Set the component state "persistedTitle" (which is the edited title)
-        FSBL.Clients.Logger.debug(`Setting component state "${FIELD_NAME_PERSISTED_TITLE}" with value "${title}"`);
-        await win.setComponentState({ field: FIELD_NAME_PERSISTED_TITLE, value: title });
-        // Stop editing in all cases
-        setEditingTitle(false);
-    };
-    const beginEditing = async () => {
-        var _a, _b;
-        await setEditingTitle(true);
-        (_a = inputEl === null || inputEl === void 0 ? void 0 : inputEl.current) === null || _a === void 0 ? void 0 : _a.focus();
-        if (inputEl === null || inputEl === void 0 ? void 0 : inputEl.current) {
-            inputEl.current.value = (_b = props.title) !== null && _b !== void 0 ? _b : "";
-        }
-    };
-    const clickHandler = () => {
-        const allowWindowTitleRenaming = Store.getValue("allowWindowTitleRenaming");
-        if (clickTimeout) {
-            // double click
-            if (allowWindowTitleRenaming) {
-                beginEditing();
-            }
-        }
-        else if (!editingTitle) {
-            // single click
-            let timeout = setTimeout(() => {
-                clearTimeout(clickTimeout);
-                setClickTimeout(undefined);
-            }, 500);
-            setClickTimeout(timeout);
-            if (props.setActiveTab)
-                props.setActiveTab();
-        }
-    };
-    const blurHandler = (e) => {
-        updateTabTitle(e);
-    };
-    const keyDownHandler = (e) => {
-        e.key === "Enter" && updateTabTitle(e);
-    };
-    return (React.createElement("div", { className: "fsbl-tab-editor", 
-        // We can't use Click and Dblclick events together cause for one dblclick fires two click events which close title editor.
-        // Workaround with setTimeout should resolve this behavior.
-        onClick: clickHandler }, editingTitle ? (React.createElement("div", { className: "fsbl-tab fsbl-active-tab", style: { width: props.tabWidth || "auto" } },
-        React.createElement("div", { draggable: true, onDragStart: (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-            } },
-            React.createElement("input", { id: "title_editor_input", ref: inputEl, onBlur: blurHandler, onKeyDown: keyDownHandler, type: "text", className: "tab__input", maxLength: 32 })))) : (props.children)));
-}
-/*
- * Description how stacked window tabs work.
- *
- * The simplest case - when you have only 2 tabs. In that case you will actually have 2 windows and 4 tabs.
- * Lets call them as: window 1 - w1, window 2 - w2, tab 1 from window 1 - w1_t1, tab 2 from window 1 - w1_t2, for tabs from window 2 - w2_t1 and w2_t2.
- * When you switch tabs you activate w1 or w2 with active tab w1_t1 or w2_t2 correspondingly.
- * Tabs w1_t2 and w2_t1 are inactive. They needed only for rendering. I call them as remote tabs, cause their titles must be synchronized with active tabs titles.
- * Thus when you rename active tab (w1_t1), the corresponding remote tab (w2_t1) should be updated automatically.
- */
-export class Title extends Component {
-    constructor(props) {
-        var _a, _b, _c;
-        super(props);
-        _Title_instances.add(this);
-        // The listener for tab title change events via the DistributedStoreClient, kept as a reference so
-        // that the listener can be deregistered when the component is unmounted
-        this.tabTitleChangedStoreListener = (err, response) => {
-            if (!!err) {
-                // This is not critical; in the worst case this tab title will be stale
-                FSBL.Clients.Logger.warn(`Listener error for store "${WINDOW_TAB_TITLE_STORE}" for field "${this.props.windowIdentifier.windowName}"`, err);
-                return;
-            }
-            // Log a message
-            FSBL.Clients.Logger.debug(`Store "${WINDOW_TAB_TITLE_STORE}" notified of new title "${response.value}" for window "${response.field}"`);
-            // Invoke updateTitle
-            if (!!this._mounted) {
-                this.updateTitle();
-            }
-        };
-        // Flag to determine if this instance is currently mounted; this is necessary because:
-        //  1.) Title components are mounted and unmounted as an artifact of how the tab or tab list is rendered
-        //  2.) Keeping tab titles synchronized is an asynchronous process
-        //  3.) During the asynchronous process of tab title synchronization, a call to setState is made and
-        //      that raises a React warning since the component state cannot be changed while the component
-        //      is unmounted
-        this._mounted = false;
-        // Declare the initial title as a blank string
-        let initialTitle = " ";
-        // If the currently rendering tab represents the current window, then use the document title (or window name)
-        if (undefined !== (finsembleWindow === null || finsembleWindow === void 0 ? void 0 : finsembleWindow.thisWindowName) &&
-            (finsembleWindow === null || finsembleWindow === void 0 ? void 0 : finsembleWindow.thisWindowName) === ((_a = props === null || props === void 0 ? void 0 : props.windowIdentifier) === null || _a === void 0 ? void 0 : _a.windowName)) {
-            initialTitle = document.title || ((_b = props.windowIdentifier) === null || _b === void 0 ? void 0 : _b.windowName);
-        }
-        this.state = {
-            // Use document.title first to prevent a title flickering when dragging a tab of another window.
-            // The reason for flickering is the component re-rendering multiple times. The initial place
-            // where re-rendering start is the `disallowDragOnCenterRegion()` at the WindowTitleBarShell.
-            // At that function, we change the state of the parent component which triggers re-rendering for the children tree.
-            title: initialTitle,
-            icon: null,
-            // The "windowName" is the name of the window which corresponds to the this instance of the
-            // Title component, though the actual current window may belong to some other
-            // component(ie this tab represents an inactive window)
-            windowName: (_c = props.windowIdentifier) === null || _c === void 0 ? void 0 : _c.windowName,
-        };
-        // Bind the "updateTitle" function (in order to use React component functions)
-        this.updateTitle = this.updateTitle.bind(this);
-        // Initial title set
-        this.updateTitle();
-    }
-    /**
-     * Updates the title for both the tab and the window.
-     *
-     * @returns a Promise which resolves nothing
-     */
-    async updateTitle() {
-        // There is a subtle difference bewtween windowTitle and tabTitle. Since this code executes
-        // when *any* tab has a name change, this code can execute when the active window represents
-        // a tab other than the currently rendering tab (ie an inactive tab).
-        var _a, _b;
-        // The window represented by this tab title instance
-        const { wrap: tabWindow } = await FSBL.FinsembleWindow.getInstance(this.props.windowIdentifier);
-        // "tabWindowOptions" refers to the options from the window which hosts the component represented by this tab
-        const { data: tabWindowOptions } = await tabWindow.getOptions();
-        // Derive the title: "config title" then "document.title" then "appd title"
-        let title = await __classPrivateFieldGet(this, _Title_instances, "m", _Title_calculateTabTitle).call(this);
-        // Get the titleBar icon from the WindowDescriptor for the TAB window (not the CURRENT window)
-        const icon = (_b = (_a = tabWindowOptions === null || tabWindowOptions === void 0 ? void 0 : tabWindowOptions.icons) === null || _a === void 0 ? void 0 : _a.titleBarIcon) !== null && _b !== void 0 ? _b : {
-            imageType: "initials",
-            name: title,
-        };
-        // Log a message
-        FSBL.Clients.Logger.debug(`Setting tab title ${title} for window ${this.props.windowIdentifier.windowName}`);
-        // Finally, set the state if the component is mounted
-        if (!!this._mounted) {
-            this.setState({
-                title,
-                icon: Object.assign(Object.assign({}, icon), { 
-                    // Application causes the background to default to a circle rather than a square
-                    category: "Application" }),
-            });
-        }
-        // If this tab component instance represents the window (that is, this is the active tab), then set the title
-        if (finsembleWindow.thisWindowName === this.props.windowIdentifier.windowName) {
-            document.title = await __classPrivateFieldGet(this, _Title_instances, "m", _Title_calculateTabTitle).call(this);
-        }
-    }
-    /**
-     * React component lifecycle event, triggered once the component has been added to the DOM.
-     */
-    componentDidMount() {
-        // Set the mounted flag to true (this component is currently mounted)
-        this._mounted = true;
-        // Add listeners
-        __classPrivateFieldGet(this, _Title_instances, "m", _Title_addListeners).call(this);
-    }
-    // Triggers a re-rendering of the drag handle in the title bar.
-    componentDidUpdate() {
-        if (typeof this.props.onUpdate === "function") {
-            this.props.onUpdate();
-        }
-    }
-    /**
-     * React component lifecycle event, triggered before the component is removed from the DOM.
-     */
-    componentWillUnmount() {
-        // Set the mounted flag to false (this component is not currently mounted)
-        this._mounted = false;
-        // Remove listeners
-        __classPrivateFieldGet(this, _Title_instances, "m", _Title_removeListeners).call(this);
-    }
-    render() {
-        var _a;
-        const { titleWidth } = this.props;
-        const style = titleWidth ? { width: titleWidth } : {};
-        return (React.createElement(EditTab, { tabWidth: titleWidth, setActiveTab: (_a = this === null || this === void 0 ? void 0 : this.props) === null || _a === void 0 ? void 0 : _a.onClick, title: this.state.title, 
-            // The windowIdentifier indicates which app/component this tab instance should represent
-            windowIdentifier: this.props.windowIdentifier },
-            React.createElement("div", { className: "fsbl-tab-title", style: style },
-                this.state.icon && React.createElement(Icon, Object.assign({}, this.state.icon)),
-                React.createElement("div", { className: "title-text" }, this.state.title))));
-    }
-}
-_Title_instances = new WeakSet(), _Title_getWindowManagerForTab = 
-/**
- * Gets a reference to the "Window Manager" component for the tab which is rendering. If the this tab IS the active tab, then the WindowManager will be the same as the WindowManager
- * attached to the WindowClient. However, all other tab components displayed in this window will need to derive the WindowManager from the config, based on the
- * tab's windowIdentifier.
- *
- * This is because the tab's windowIdentifier only has the name (ex: SomeApp-37ba6708-3a75-462e-b900-1812e338cbf1). The name is derived by removing the last 5 substrings
- * separated by "-". This will fail in the face of a UUID format change.
- *
- * @returns the "Window Manager" component, or "undefined" if the "Window Manager" is not found
- */
-async function _Title_getWindowManagerForTab() {
-    // On second thought, ALL tabs will derive the WindowManager the same way; at least if it is wrong, it is wrong consistently
-    //
-    // if (finsembleWindow.thisWindowName === this.props?.windowIdentifier?.windowName) {
-    // 	return FSBL.Clients.WindowClient.options?.customData?.foreign?.components?.["Window Manager"] || FSBL.Clients.WindowClient.options?.customData?.appDConfig?.manifest?.foreign?.components?.["Window Manager"];
-    // } else {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    // Check that "windowName" exists
-    if (!!((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.windowIdentifier) === null || _b === void 0 ? void 0 : _b.windowName)) {
-        // Get the window name
-        const tabsWindowName = this.props.windowIdentifier.windowName;
-        // Get the active descriptors
-        const { data: activeDescriptors } = await FSBL.Clients.LauncherClient.getActiveDescriptors();
-        // Return the "Window Manager" for the window whose name matches THIS tab's name
-        return (_h = (_g = (_f = (_e = (_d = (_c = activeDescriptors === null || activeDescriptors === void 0 ? void 0 : activeDescriptors[tabsWindowName]) === null || _c === void 0 ? void 0 : _c.customData) === null || _d === void 0 ? void 0 : _d.appDConfig) === null || _e === void 0 ? void 0 : _e.manifest) === null || _f === void 0 ? void 0 : _f.foreign) === null || _g === void 0 ? void 0 : _g.components) === null || _h === void 0 ? void 0 : _h["Window Manager"];
-    }
-    return undefined;
-    // }
-}, _Title_calculateTabTitle = 
-/**
- * Calculates a tab title. Uses the following algorithm until a non-null value is found.
- * <ol>
- *   <li>user edited tab title</li>
- *   <li>the component config</li>
- *   <li>document.title</li>
- *   <li>appd config</li>
- * </ol>
- *
- * @returns the calculated tab title
- */
-async function _Title_calculateTabTitle() {
-    return ((await __classPrivateFieldGet(this, _Title_instances, "m", _Title_getUserEditedTitle).call(this)) ||
-        (await __classPrivateFieldGet(this, _Title_instances, "m", _Title_getConfigTitle).call(this)) ||
-        (await __classPrivateFieldGet(this, _Title_instances, "m", _Title_getDocumentTitle).call(this)) ||
-        __classPrivateFieldGet(this, _Title_instances, "m", _Title_getAppDTitle).call(this));
-}, _Title_getUserEditedTitle = 
-/**
- * Returns the name of the title supplied by a user; undefined if the user has not supplied a title.
- *
- * @returns The name of the title supplied by a user; undefined if the user has not supplied a title
- */
-async function _Title_getUserEditedTitle() {
-    const { wrap: tabWindow } = await FSBL.FinsembleWindow.getInstance(this.props.windowIdentifier);
-    return new Promise((resolve) => {
-        tabWindow.getComponentState({ field: FIELD_NAME_PERSISTED_TITLE }, (error, persistedTitle) => {
-            if (!!error) {
-                // should always return value even if it hasn't been retrieved from the state
-                resolve(undefined);
-            }
-            else {
-                resolve(persistedTitle);
-            }
-        });
-    });
-}, _Title_getConfigTitle = 
-/**
- * Gets a title set in the component configuration.
- *
- * @returns any title set in the component configuration
- */
-async function _Title_getConfigTitle() {
-    var _a;
-    const windowManager = await __classPrivateFieldGet(this, _Title_instances, "m", _Title_getWindowManagerForTab).call(this);
-    return ((_a = windowManager === null || windowManager === void 0 ? void 0 : windowManager.FSBLHeader) === null || _a === void 0 ? void 0 : _a.title) || (windowManager === null || windowManager === void 0 ? void 0 : windowManager.title);
-}, _Title_getDocumentTitle = 
-/**
- * Returns document.title.
- *
- * @returns the document.title (from the "tab name" store)
- */
-async function _Title_getDocumentTitle() {
-    var _a, _b;
-    const store = await getWindowTabNameStore();
-    // If the store is unavailable, then the tab name cannot be updated
-    if (!store) {
-        // This is not critical, but tab titles may be stale
-        FSBL.Clients.Logger.warn("Error setting the tab title: the store was not found");
-        return;
-    }
-    return ((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.windowIdentifier) === null || _b === void 0 ? void 0 : _b.windowName)
-        ? (await store.getGlobalValue(this.props.windowIdentifier.windowName)).data
-        : undefined;
-}, _Title_getAppDTitle = function _Title_getAppDTitle() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    return (((_e = (_d = (_c = (_b = (_a = FSBL.Clients.WindowClient.options) === null || _a === void 0 ? void 0 : _a.customData) === null || _b === void 0 ? void 0 : _b.appDConfig) === null || _c === void 0 ? void 0 : _c.manifest) === null || _d === void 0 ? void 0 : _d.component) === null || _e === void 0 ? void 0 : _e.displayName) ||
-        ((_h = (_g = (_f = FSBL.Clients.WindowClient.options) === null || _f === void 0 ? void 0 : _f.customData) === null || _g === void 0 ? void 0 : _g.appDConfig) === null || _h === void 0 ? void 0 : _h.name));
-}, _Title_addListeners = 
-/**
- * Adds the listener(s) required to set window and tab titles.
- */
-async function _Title_addListeners() {
-    // Subscribe to the DistributedStoreClient (these messages originate from BaseWindow, when the
-    // DistributedStore has been updated).
-    //
-    // Each window will have n listeners, where n is the number of tabs held in the window.
-    // Get the store and add a listener
-    const store = await getWindowTabNameStore();
-    // If the store is unavailable, then the tab name cannot be updated
-    if (!store) {
-        // This is not critical, but tab titles may be stale
-        FSBL.Clients.Logger.warn("Error adding a tab title listener: the store was not found");
-        return;
-    }
-    // Add a listener
-    store.addListener({ field: this.props.windowIdentifier.windowName }, this.tabTitleChangedStoreListener, () => {
-        FSBL.Clients.Logger.debug(`Added listener to store "${WINDOW_TAB_TITLE_STORE}" for field "${this.props.windowIdentifier.windowName}"`);
-    });
-}, _Title_removeListeners = 
-/**
- * Removes listener(s) required to set window and tab titles.
- */
-async function _Title_removeListeners() {
-    // Unsubscribe from the window/tab store
-    const store = await getWindowTabNameStore();
-    // If the store is unavailable, then the tab name cannot be updated
-    if (!store) {
-        // This is not critical, but tab titles may be stale
-        FSBL.Clients.Logger.warn("Error removing a tab title listener: the store was not found");
-        return;
-    }
-    store.removeListener({ field: this.props.windowIdentifier.windowName }, this.tabTitleChangedStoreListener, (err, response) => {
-        if (!!err) {
-            // This is not critical; the listener could not be removed from the store - this may be a memory leak
-            FSBL.Clients.Logger.warn(`Could not remove listener from store "${WINDOW_TAB_TITLE_STORE}" for field "${this.props.windowIdentifier.windowName}"`, err);
-            return;
-        }
-        FSBL.Clients.Logger.debug(`Removed listener to store "${WINDOW_TAB_TITLE_STORE}" for field "${this.props.windowIdentifier.windowName}"`);
-    });
-};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Title_instances, _Title_getWindowManagerForTab, _Title_calculateTabTitle, _Title_getUserEditedTitle, _Title_getConfigTitle, _Title_getDocumentTitle, _Title_getAppDTitle, _Title_addListeners, _Title_removeListeners;
+import React, { Component } from "react";
+import { Icon } from "../../icon/Icon";
+import { Store } from "../stores/windowTitleBarStore";
+import { FEAGlobals } from "../../../../common/Globals";
+// The store name for the distributed store which tracks tab titles
+const WINDOW_TAB_TITLE_STORE = "window-tab-title";
+// The field name to watch for tab title edits
+const FIELD_NAME_PERSISTED_TITLE = "persistedTitle";
+// The windowTabNameStore reference
+let windowTabNameStore;
+/**
+ * Gets the store which tracks the tab title for a windowName. This is a distributed store shared by all components.
+ *
+ * @returns a Promise which resolves the StoreModel associated with window and tab names
+ */
+const getWindowTabNameStore = async () => {
+    if (!windowTabNameStore) {
+        let { data: store } = await FEAGlobals.FSBL.Clients.DistributedStoreClient.createGlobalStore({
+            store: WINDOW_TAB_TITLE_STORE,
+        });
+        windowTabNameStore = store;
+    }
+    // Return the store
+    return windowTabNameStore;
+};
+/**
+ * The wrapper component for tab renaming
+ * @param {*} props
+ */
+function EditTab(props) {
+    const [editingTitle, setEditingTitle] = React.useState(false);
+    const [clickTimeout, setClickTimeout] = React.useState(undefined);
+    const inputEl = React.useRef(null);
+    const updateTabTitle = async (e) => {
+        // When the tab title has changed via a user edit, simply update the DistributedStore
+        // Get the title
+        const title = e.target.value;
+        // Get the tab name store
+        let store = await getWindowTabNameStore();
+        // If the store is unavailable, then the tab name cannot be persisted
+        if (!store) {
+            // This is not critical, but tab titles may be stale
+            FEAGlobals.FSBL.Clients.Logger.warn("Error persisting tab title via EditTab: the store was not found");
+            return;
+        }
+        // Persist the tab title
+        store.setValue({ field: props.windowIdentifier.windowName, value: title });
+        // Get the window which coresponds to the tab being edited
+        const { wrap: win } = await FEAGlobals.FSBL.FinsembleWindow.getInstance(props.windowIdentifier);
+        // Set the component state "persistedTitle" (which is the edited title)
+        FEAGlobals.FSBL.Clients.Logger.debug(`Setting component state "${FIELD_NAME_PERSISTED_TITLE}" with value "${title}"`);
+        await win.setComponentState({ field: FIELD_NAME_PERSISTED_TITLE, value: title });
+        // Stop editing in all cases
+        setEditingTitle(false);
+    };
+    const beginEditing = async () => {
+        var _a, _b;
+        await setEditingTitle(true);
+        (_a = inputEl === null || inputEl === void 0 ? void 0 : inputEl.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (inputEl === null || inputEl === void 0 ? void 0 : inputEl.current) {
+            inputEl.current.value = (_b = props.title) !== null && _b !== void 0 ? _b : "";
+        }
+    };
+    const clickHandler = () => {
+        const allowWindowTitleRenaming = Store.getValue("allowWindowTitleRenaming");
+        if (clickTimeout) {
+            // double click
+            if (allowWindowTitleRenaming) {
+                beginEditing();
+            }
+        }
+        else if (!editingTitle) {
+            // single click
+            let timeout = setTimeout(() => {
+                clearTimeout(clickTimeout);
+                setClickTimeout(undefined);
+            }, 500);
+            setClickTimeout(timeout);
+            if (props.setActiveTab)
+                props.setActiveTab();
+        }
+    };
+    const blurHandler = (e) => {
+        updateTabTitle(e);
+    };
+    const keyDownHandler = (e) => {
+        e.key === "Enter" && updateTabTitle(e);
+    };
+    return (React.createElement("div", { className: "fsbl-tab-editor", 
+        // We can't use Click and Dblclick events together cause for one dblclick fires two click events which close title editor.
+        // Workaround with setTimeout should resolve this behavior.
+        onClick: clickHandler }, editingTitle ? (React.createElement("div", { className: "fsbl-tab fsbl-active-tab", style: { width: props.tabWidth || "auto" } },
+        React.createElement("div", { draggable: true, onDragStart: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+            } },
+            React.createElement("input", { id: "title_editor_input", ref: inputEl, onBlur: blurHandler, onKeyDown: keyDownHandler, type: "text", className: "tab__input", maxLength: 32 })))) : (props.children)));
+}
+/*
+ * Description how stacked window tabs work.
+ *
+ * The simplest case - when you have only 2 tabs. In that case you will actually have 2 windows and 4 tabs.
+ * Lets call them as: window 1 - w1, window 2 - w2, tab 1 from window 1 - w1_t1, tab 2 from window 1 - w1_t2, for tabs from window 2 - w2_t1 and w2_t2.
+ * When you switch tabs you activate w1 or w2 with active tab w1_t1 or w2_t2 correspondingly.
+ * Tabs w1_t2 and w2_t1 are inactive. They needed only for rendering. I call them as remote tabs, cause their titles must be synchronized with active tabs titles.
+ * Thus when you rename active tab (w1_t1), the corresponding remote tab (w2_t1) should be updated automatically.
+ */
+export class Title extends Component {
+    constructor(props) {
+        var _a, _b, _c, _d, _e;
+        super(props);
+        _Title_instances.add(this);
+        // The listener for tab title change events via the DistributedStoreClient, kept as a reference so
+        // that the listener can be deregistered when the component is unmounted
+        this.tabTitleChangedStoreListener = (err, response) => {
+            if (!!err) {
+                // This is not critical; in the worst case this tab title will be stale
+                FEAGlobals.FSBL.Clients.Logger.warn(`Listener error for store "${WINDOW_TAB_TITLE_STORE}" for field "${this.props.windowIdentifier.windowName}"`, err);
+                return;
+            }
+            // Log a message
+            FEAGlobals.FSBL.Clients.Logger.debug(`Store "${WINDOW_TAB_TITLE_STORE}" notified of new title "${response.value}" for window "${response.field}"`);
+            // Invoke updateTitle
+            if (!!this._mounted) {
+                this.updateTitle();
+            }
+        };
+        // Flag to determine if this instance is currently mounted; this is necessary because:
+        //  1.) Title components are mounted and unmounted as an artifact of how the tab or tab list is rendered
+        //  2.) Keeping tab titles synchronized is an asynchronous process
+        //  3.) During the asynchronous process of tab title synchronization, a call to setState is made and
+        //      that raises a React warning since the component state cannot be changed while the component
+        //      is unmounted
+        this._mounted = false;
+        // Declare the initial title as a blank string
+        let initialTitle = " ";
+        // If the currently rendering tab represents the current window, then use the document title (or window name)
+        if (undefined !== ((_a = FEAGlobals.finsembleWindow) === null || _a === void 0 ? void 0 : _a.thisWindowName) &&
+            ((_b = FEAGlobals.finsembleWindow) === null || _b === void 0 ? void 0 : _b.thisWindowName) === ((_c = props === null || props === void 0 ? void 0 : props.windowIdentifier) === null || _c === void 0 ? void 0 : _c.windowName)) {
+            initialTitle = document.title || ((_d = props.windowIdentifier) === null || _d === void 0 ? void 0 : _d.windowName);
+        }
+        this.state = {
+            // Use document.title first to prevent a title flickering when dragging a tab of another window.
+            // The reason for flickering is the component re-rendering multiple times. The initial place
+            // where re-rendering start is the `disallowDragOnCenterRegion()` at the WindowTitleBarShell.
+            // At that function, we change the state of the parent component which triggers re-rendering for the children tree.
+            title: initialTitle,
+            icon: null,
+            // The "windowName" is the name of the window which corresponds to the this instance of the
+            // Title component, though the actual current window may belong to some other
+            // component(ie this tab represents an inactive window)
+            windowName: (_e = props.windowIdentifier) === null || _e === void 0 ? void 0 : _e.windowName,
+        };
+        // Bind the "updateTitle" function (in order to use React component functions)
+        this.updateTitle = this.updateTitle.bind(this);
+        // Initial title set
+        this.updateTitle();
+    }
+    /**
+     * Updates the title for both the tab and the window.
+     *
+     * @returns a Promise which resolves nothing
+     */
+    async updateTitle() {
+        // There is a subtle difference bewtween windowTitle and tabTitle. Since this code executes
+        // when *any* tab has a name change, this code can execute when the active window represents
+        // a tab other than the currently rendering tab (ie an inactive tab).
+        var _a, _b;
+        // The window represented by this tab title instance
+        const { wrap: tabWindow } = await FEAGlobals.FSBL.FinsembleWindow.getInstance(this.props.windowIdentifier);
+        // "tabWindowOptions" refers to the options from the window which hosts the component represented by this tab
+        const { data: tabWindowOptions } = await tabWindow.getOptions();
+        // Derive the title: "config title" then "document.title" then "appd title"
+        let title = await __classPrivateFieldGet(this, _Title_instances, "m", _Title_calculateTabTitle).call(this);
+        // Get the titleBar icon from the WindowDescriptor for the TAB window (not the CURRENT window)
+        const icon = (_b = (_a = tabWindowOptions === null || tabWindowOptions === void 0 ? void 0 : tabWindowOptions.icons) === null || _a === void 0 ? void 0 : _a.titleBarIcon) !== null && _b !== void 0 ? _b : {
+            imageType: "initials",
+            name: title,
+        };
+        // Log a message
+        FEAGlobals.FSBL.Clients.Logger.debug(`Setting tab title ${title} for window ${this.props.windowIdentifier.windowName}`);
+        // Finally, set the state if the component is mounted
+        if (!!this._mounted) {
+            this.setState({
+                title,
+                icon: Object.assign(Object.assign({}, icon), { 
+                    // Application causes the background to default to a circle rather than a square
+                    category: "Application" }),
+            });
+        }
+        // If this tab component instance represents the window (that is, this is the active tab), then set the title
+        if (FEAGlobals.finsembleWindow.thisWindowName === this.props.windowIdentifier.windowName) {
+            document.title = await __classPrivateFieldGet(this, _Title_instances, "m", _Title_calculateTabTitle).call(this);
+        }
+    }
+    /**
+     * React component lifecycle event, triggered once the component has been added to the DOM.
+     */
+    componentDidMount() {
+        // Set the mounted flag to true (this component is currently mounted)
+        this._mounted = true;
+        // Add listeners
+        __classPrivateFieldGet(this, _Title_instances, "m", _Title_addListeners).call(this);
+    }
+    // Triggers a re-rendering of the drag handle in the title bar.
+    componentDidUpdate() {
+        if (typeof this.props.onUpdate === "function") {
+            this.props.onUpdate();
+        }
+    }
+    /**
+     * React component lifecycle event, triggered before the component is removed from the DOM.
+     */
+    componentWillUnmount() {
+        // Set the mounted flag to false (this component is not currently mounted)
+        this._mounted = false;
+        // Remove listeners
+        __classPrivateFieldGet(this, _Title_instances, "m", _Title_removeListeners).call(this);
+    }
+    render() {
+        var _a;
+        const { titleWidth } = this.props;
+        const style = titleWidth ? { width: titleWidth } : {};
+        return (React.createElement(EditTab, { tabWidth: titleWidth, setActiveTab: (_a = this === null || this === void 0 ? void 0 : this.props) === null || _a === void 0 ? void 0 : _a.onClick, title: this.state.title, 
+            // The windowIdentifier indicates which app/component this tab instance should represent
+            windowIdentifier: this.props.windowIdentifier },
+            React.createElement("div", { className: "fsbl-tab-title", style: style },
+                this.state.icon && React.createElement(Icon, Object.assign({}, this.state.icon)),
+                React.createElement("div", { className: "title-text" }, this.state.title))));
+    }
+}
+_Title_instances = new WeakSet(), _Title_getWindowManagerForTab = 
+/**
+ * Gets a reference to the "Window Manager" component for the tab which is rendering. If the this tab IS the active tab, then the WindowManager will be the same as the WindowManager
+ * attached to the WindowClient. However, all other tab components displayed in this window will need to derive the WindowManager from the config, based on the
+ * tab's windowIdentifier.
+ *
+ * This is because the tab's windowIdentifier only has the name (ex: SomeApp-37ba6708-3a75-462e-b900-1812e338cbf1). The name is derived by removing the last 5 substrings
+ * separated by "-". This will fail in the face of a UUID format change.
+ *
+ * @returns the "Window Manager" component, or "undefined" if the "Window Manager" is not found
+ */
+async function _Title_getWindowManagerForTab() {
+    // On second thought, ALL tabs will derive the WindowManager the same way; at least if it is wrong, it is wrong consistently
+    //
+    // if (FEAGlobals.finsembleWindow.thisWindowName === this.props?.windowIdentifier?.windowName) {
+    // 	return FEAGlobals.FSBL.Clients.WindowClient.options?.customData?.foreign?.components?.["Window Manager"] || FEAGlobals.FSBL.Clients.WindowClient.options?.customData?.appDConfig?.manifest?.foreign?.components?.["Window Manager"];
+    // } else {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    // Check that "windowName" exists
+    if (!!((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.windowIdentifier) === null || _b === void 0 ? void 0 : _b.windowName)) {
+        // Get the window name
+        const tabsWindowName = this.props.windowIdentifier.windowName;
+        // Get the active descriptors
+        const { data: activeDescriptors } = await FEAGlobals.FSBL.Clients.LauncherClient.getActiveDescriptors();
+        // Return the "Window Manager" for the window whose name matches THIS tab's name
+        return (_h = (_g = (_f = (_e = (_d = (_c = activeDescriptors === null || activeDescriptors === void 0 ? void 0 : activeDescriptors[tabsWindowName]) === null || _c === void 0 ? void 0 : _c.customData) === null || _d === void 0 ? void 0 : _d.appDConfig) === null || _e === void 0 ? void 0 : _e.manifest) === null || _f === void 0 ? void 0 : _f.foreign) === null || _g === void 0 ? void 0 : _g.components) === null || _h === void 0 ? void 0 : _h["Window Manager"];
+    }
+    return undefined;
+    // }
+}, _Title_calculateTabTitle = 
+/**
+ * Calculates a tab title. Uses the following algorithm until a non-null value is found.
+ * <ol>
+ *   <li>user edited tab title</li>
+ *   <li>the component config</li>
+ *   <li>document.title</li>
+ *   <li>appd config</li>
+ * </ol>
+ *
+ * @returns the calculated tab title
+ */
+async function _Title_calculateTabTitle() {
+    return ((await __classPrivateFieldGet(this, _Title_instances, "m", _Title_getUserEditedTitle).call(this)) ||
+        (await __classPrivateFieldGet(this, _Title_instances, "m", _Title_getConfigTitle).call(this)) ||
+        (await __classPrivateFieldGet(this, _Title_instances, "m", _Title_getDocumentTitle).call(this)) ||
+        __classPrivateFieldGet(this, _Title_instances, "m", _Title_getAppDTitle).call(this));
+}, _Title_getUserEditedTitle = 
+/**
+ * Returns the name of the title supplied by a user; undefined if the user has not supplied a title.
+ *
+ * @returns The name of the title supplied by a user; undefined if the user has not supplied a title
+ */
+async function _Title_getUserEditedTitle() {
+    const { wrap: tabWindow } = await FEAGlobals.FSBL.FinsembleWindow.getInstance(this.props.windowIdentifier);
+    return new Promise((resolve) => {
+        tabWindow.getComponentState({ field: FIELD_NAME_PERSISTED_TITLE }, (error, persistedTitle) => {
+            if (!!error) {
+                // should always return value even if it hasn't been retrieved from the state
+                resolve(undefined);
+            }
+            else {
+                resolve(persistedTitle);
+            }
+        });
+    });
+}, _Title_getConfigTitle = 
+/**
+ * Gets a title set in the component configuration.
+ *
+ * @returns any title set in the component configuration
+ */
+async function _Title_getConfigTitle() {
+    var _a;
+    const windowManager = await __classPrivateFieldGet(this, _Title_instances, "m", _Title_getWindowManagerForTab).call(this);
+    return ((_a = windowManager === null || windowManager === void 0 ? void 0 : windowManager.FSBLHeader) === null || _a === void 0 ? void 0 : _a.title) || (windowManager === null || windowManager === void 0 ? void 0 : windowManager.title);
+}, _Title_getDocumentTitle = 
+/**
+ * Returns document.title.
+ *
+ * @returns the document.title (from the "tab name" store)
+ */
+async function _Title_getDocumentTitle() {
+    var _a, _b;
+    const store = await getWindowTabNameStore();
+    // If the store is unavailable, then the tab name cannot be updated
+    if (!store) {
+        // This is not critical, but tab titles may be stale
+        FEAGlobals.FSBL.Clients.Logger.warn("Error setting the tab title: the store was not found");
+        return;
+    }
+    return ((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.windowIdentifier) === null || _b === void 0 ? void 0 : _b.windowName)
+        ? (await store.getGlobalValue(this.props.windowIdentifier.windowName)).data
+        : undefined;
+}, _Title_getAppDTitle = function _Title_getAppDTitle() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return (((_e = (_d = (_c = (_b = (_a = FEAGlobals.FSBL.Clients.WindowClient.options) === null || _a === void 0 ? void 0 : _a.customData) === null || _b === void 0 ? void 0 : _b.appDConfig) === null || _c === void 0 ? void 0 : _c.manifest) === null || _d === void 0 ? void 0 : _d.component) === null || _e === void 0 ? void 0 : _e.displayName) ||
+        ((_h = (_g = (_f = FEAGlobals.FSBL.Clients.WindowClient.options) === null || _f === void 0 ? void 0 : _f.customData) === null || _g === void 0 ? void 0 : _g.appDConfig) === null || _h === void 0 ? void 0 : _h.name));
+}, _Title_addListeners = 
+/**
+ * Adds the listener(s) required to set window and tab titles.
+ */
+async function _Title_addListeners() {
+    // Subscribe to the DistributedStoreClient (these messages originate from BaseWindow, when the
+    // DistributedStore has been updated).
+    //
+    // Each window will have n listeners, where n is the number of tabs held in the window.
+    // Get the store and add a listener
+    const store = await getWindowTabNameStore();
+    // If the store is unavailable, then the tab name cannot be updated
+    if (!store) {
+        // This is not critical, but tab titles may be stale
+        FEAGlobals.FSBL.Clients.Logger.warn("Error adding a tab title listener: the store was not found");
+        return;
+    }
+    // Add a listener
+    store.addListener({ field: this.props.windowIdentifier.windowName }, this.tabTitleChangedStoreListener, () => {
+        FEAGlobals.FSBL.Clients.Logger.debug(`Added listener to store "${WINDOW_TAB_TITLE_STORE}" for field "${this.props.windowIdentifier.windowName}"`);
+    });
+}, _Title_removeListeners = 
+/**
+ * Removes listener(s) required to set window and tab titles.
+ */
+async function _Title_removeListeners() {
+    // Unsubscribe from the window/tab store
+    const store = await getWindowTabNameStore();
+    // If the store is unavailable, then the tab name cannot be updated
+    if (!store) {
+        // This is not critical, but tab titles may be stale
+        FEAGlobals.FSBL.Clients.Logger.warn("Error removing a tab title listener: the store was not found");
+        return;
+    }
+    store.removeListener({ field: this.props.windowIdentifier.windowName }, this.tabTitleChangedStoreListener, (err, response) => {
+        if (!!err) {
+            // This is not critical; the listener could not be removed from the store - this may be a memory leak
+            FEAGlobals.FSBL.Clients.Logger.warn(`Could not remove listener from store "${WINDOW_TAB_TITLE_STORE}" for field "${this.props.windowIdentifier.windowName}"`, err);
+            return;
+        }
+        FEAGlobals.FSBL.Clients.Logger.debug(`Removed listener to store "${WINDOW_TAB_TITLE_STORE}" for field "${this.props.windowIdentifier.windowName}"`);
+    });
+};
 //# sourceMappingURL=windowTitle.js.map