@finsemble/finsemble-ui 6.6.3 → 7.0.0-beta-X

package/react/components/menu/keyboardNavigation.js

@@ -1,191 +1,196 @@
-export class KeyboardNavigation {
-    constructor(childWin, className) {
-        this.selectedItem = undefined;
-        this.selectedIcon = -1;
-        this.childWin = childWin;
-        this.className = className;
-        this.onArrowDown = this.onArrowDown.bind(this);
-        this.onArrowUp = this.onArrowUp.bind(this);
-        this.onArrowRight = this.onArrowRight.bind(this);
-        this.onArrowLeft = this.onArrowLeft.bind(this);
-        this.clickOnItem = this.clickOnItem.bind(this);
-        this.focusOnFirst = this.focusOnFirst.bind(this);
-        this.focusOnLast = this.focusOnLast.bind(this);
-        this.resetFocusOnDOMChanges();
-    }
-    resetFocusOnDOMChanges() {
-        new MutationObserver(() => {
-            this.selectedItem = undefined;
-        }).observe(this.childWin.document.body, {
-            childList: true,
-            characterData: false,
-            subtree: true,
-        });
-    }
-    getElements() {
-        return this.childWin.document.querySelectorAll(this.className);
-    }
-    getMenuItemIcons(index) {
-        const menuItems = this.getElements();
+/**
+ * Keyboard navigation allows the end user to navigate through menus using
+ * arrow keys and to select items using the enter key.
+ *
+ * When an element is selected then the keyboard navigation state is reset
+ * so that the user will begin again with the first item.
+ *
+ * @param childWin - Main window or child window reference.
+ * @param [className] - Selector of elements to apply navigation on.
+ * @example
+ * applyMenuKeyboardNavigation(window, ".menu-item");
+ */
+export const applyMenuKeyboardNavigation = (childWin, className = ".menu-item") => {
+    let selectedItem = 0;
+    let selectedIcon = -1;
+    new MutationObserver(() => {
+        // Reset selectedIndex when elements added or removed
+        // from the DOM. The motivation behind this was an issue
+        // with Brad's search menu where the order of focus is
+        // messed up when his list of result changes.
+        selectedItem = 0;
+    }).observe(childWin.document.body, {
+        childList: true,
+        characterData: false,
+        subtree: true,
+    });
+    /**
+     * Returns list of elements
+     */
+    const getElements = () => childWin.document.querySelectorAll(className);
+    const getMenuItemIcons = (index) => {
+        const menuItems = getElements();
         return menuItems[index].querySelectorAll(".menu-item-icon");
-    }
-    removeAllFocus() {
-        const menuItems = this.getElements();
-        menuItems.forEach((item, key) => {
-            item.removeAttribute("focused");
-            const icons = this.getMenuItemIcons(key);
-            icons.forEach((icon) => {
-                icon.removeAttribute("focused");
-            });
-        });
-    }
-    focusOn(index) {
-        this.removeAllFocus();
-        const menuItems = this.getElements();
+    };
+    /**
+     * Sets the focus on a menu item
+     * @param index The index of the menu item in the list
+     */
+    const focusOn = (index) => {
+        const menuItems = getElements();
+        // Menu could have no items
         if (!menuItems.length)
             return;
-        menuItems[index].setAttribute("focused", "true");
-        menuItems[index].scrollIntoViewIfNeeded({
-            behavior: "smooth",
-        });
-    }
-    focusOnIcon(index, iconIndex) {
-        this.removeAllFocus();
-        const menuItems = this.getElements();
+        // Focus on element and scroll if needed
+        menuItems[index].focus();
+    };
+    const focusOnFirst = () => {
+        selectedItem = 0;
+        selectedIcon = -1;
+        focusOn(0);
+    };
+    const focusOnLast = () => {
+        selectedIcon = -1;
+        const { length } = getElements();
+        if (length) {
+            selectedItem = length - 1;
+            focusOn(length - 1);
+        }
+    };
+    /**
+     * Sets the focus on a menu item's icon
+     * @param index The index of the menu item in the list
+     * @param iconIndex The index of the menu item's icon (-1 = menu text, not icon)
+     */
+    const focusOnIcon = (index, iconIndex) => {
+        const menuItems = getElements();
+        // Menu could have no items
         if (!menuItems.length)
             return;
-        const icons = this.getMenuItemIcons(index);
-        if (icons.length < iconIndex) {
+        const icons = getMenuItemIcons(index);
+        // Defend against possible js runtime error
+        if (icons.length <= iconIndex) {
             return;
         }
-        menuItems[index].scrollIntoViewIfNeeded({
-            behavior: "smooth",
-        });
+        // Focus on menu item text, if relevant
         if (iconIndex === -1) {
-            menuItems[index].setAttribute("focused", "true");
+            menuItems[index].focus();
             return;
         }
-        icons[iconIndex].setAttribute("focused", "true");
-    }
-    clickOnItem() {
-        this.removeAllFocus();
-        if (this.selectedItem !== undefined) {
-            const elements = this.getElements();
-            const selectedItem = elements[this.selectedItem];
-            ["mousedown", "click", "mouseup"].forEach((event) => {
-                if (this.selectedIcon > -1) {
-                    const icons = this.getMenuItemIcons(this.selectedItem);
-                    const selectedIcon = icons[this.selectedIcon];
-                    if (selectedIcon) {
-                        selectedIcon.dispatchEvent(new MouseEvent(event, {
-                            view: this.childWin,
-                            bubbles: true,
-                            cancelable: true,
-                            buttons: 1,
-                        }));
-                        return;
-                    }
-                }
-                if (selectedItem && selectedItem.dispatchEvent) {
-                    selectedItem.dispatchEvent(new MouseEvent(event, {
-                        view: this.childWin,
+        icons[iconIndex].focus();
+    };
+    /**
+     * Simulates mouse events
+     */
+    const clickOnItem = () => {
+        const elements = getElements();
+        const selectedItemElement = elements[selectedItem];
+        ["mousedown", "click", "mouseup"].forEach((event) => {
+            if (selectedIcon > -1) {
+                const icons = getMenuItemIcons(selectedItem);
+                const selectedIconElement = icons[selectedIcon];
+                if (selectedIconElement) {
+                    selectedIconElement.dispatchEvent(new MouseEvent(event, {
+                        view: childWin,
                         bubbles: true,
                         cancelable: true,
                         buttons: 1,
                     }));
+                    return;
                 }
-            });
-            this.selectedItem = undefined;
-        }
-    }
-    onArrowUp() {
-        if (this.selectedItem === undefined) {
-            this.selectedItem = 0;
-            return this.focusOn(0);
-        }
-        this.selectedItem--;
-        if (this.selectedItem < 0) {
-            this.selectedItem = this.getElements().length - 1;
-        }
-        this.focusOn(this.selectedItem);
-    }
-    onArrowDown() {
-        if (this.selectedItem === undefined) {
-            this.selectedItem = 0;
-            return this.focusOn(0);
-        }
-        this.selectedItem++;
-        if (this.selectedItem === this.getElements().length) {
-            this.selectedItem = 0;
+            }
+            if (selectedItemElement && selectedItemElement.dispatchEvent) {
+                selectedItemElement.dispatchEvent(new MouseEvent(event, {
+                    view: childWin,
+                    bubbles: true,
+                    cancelable: true,
+                    buttons: 1,
+                }));
+            }
+        });
+    };
+    /**
+     * Invoked when a user presses on the arrow up key
+     */
+    const onArrowUp = () => {
+        selectedIcon = -1;
+        // Set the focus on the previous item
+        selectedItem--;
+        if (selectedItem < 0) {
+            // If we are back to the begining
+            // set the focus on last item
+            focusOnLast();
+            return;
         }
-        this.focusOn(this.selectedItem);
-    }
-    onArrowRight() {
-        if (this.selectedItem === undefined) {
-            this.selectedItem = 0;
-            return this.focusOn(0);
+        focusOn(selectedItem);
+    };
+    /**
+     * Invoked when user press the arrow down key
+     */
+    const onArrowDown = () => {
+        selectedIcon = -1;
+        // The the focus on the next item
+        selectedItem++;
+        // If we reached the end, then go back to first item
+        if (selectedItem === getElements().length) {
+            selectedItem = 0;
         }
-        const menuItems = this.getElements();
+        focusOn(selectedItem);
+    };
+    /**
+     * Invoked when user press the arrow right key
+     */
+    const onArrowRight = () => {
+        const menuItems = getElements();
+        // Menu could have no items
         if (!menuItems.length)
             return;
-        const icons = this.getMenuItemIcons(this.selectedItem);
+        const icons = getMenuItemIcons(selectedItem);
         if (icons.length === 0) {
             return;
         }
-        this.selectedIcon++;
-        if (this.selectedIcon === icons.length) {
-            this.selectedIcon = -1;
-        }
-        this.focusOnIcon(this.selectedItem, this.selectedIcon);
-    }
-    onArrowLeft() {
-        if (this.selectedItem === undefined) {
-            this.selectedItem = 0;
-            return this.focusOn(0);
+        selectedIcon++;
+        if (selectedIcon === icons.length) {
+            selectedIcon = -1;
         }
-        const menuItems = this.getElements();
+        focusOnIcon(selectedItem, selectedIcon);
+    };
+    /**
+     * Invoked when user press the arrow left key
+     */
+    const onArrowLeft = () => {
+        const menuItems = getElements();
+        // Menu could have no items
         if (!menuItems.length)
             return;
-        const icons = this.getMenuItemIcons(this.selectedItem);
+        const icons = getMenuItemIcons(selectedItem);
         if (icons.length === 0) {
             return;
         }
-        this.selectedIcon--;
-        if (this.selectedIcon === icons.length) {
-            this.selectedIcon = -1;
+        selectedIcon--;
+        if (selectedIcon === icons.length) {
+            selectedIcon = -1;
         }
-        this.focusOnIcon(this.selectedItem, this.selectedIcon);
-    }
-    focusOnFirst() {
-        this.selectedItem = 0;
-        this.selectedIcon = -1;
-        this.focusOn(0);
-    }
-    focusOnLast() {
-        this.selectedIcon = -1;
-        const { length } = this.getElements();
-        if (length) {
-            this.selectedItem = length - 1;
-            this.focusOn(length - 1);
+        focusOnIcon(selectedItem, selectedIcon);
+    };
+    const actionDictionary = {
+        ArrowDown: onArrowDown,
+        ArrowUp: onArrowUp,
+        ArrowLeft: onArrowLeft,
+        ArrowRight: onArrowRight,
+        Enter: clickOnItem,
+        Home: focusOnFirst,
+        End: focusOnLast,
+    };
+    childWin.addEventListener("keydown", (e) => {
+        var _a;
+        const { key } = e;
+        if (key in actionDictionary) {
+            (_a = actionDictionary[key]) === null || _a === void 0 ? void 0 : _a.call(actionDictionary);
+            e.preventDefault();
         }
-    }
-    attach() {
-        FSBL.Clients.HotkeyClient.addGlobalHotkey(["up arrow"], this.onArrowUp);
-        FSBL.Clients.HotkeyClient.addGlobalHotkey(["right arrow"], this.onArrowRight);
-        FSBL.Clients.HotkeyClient.addGlobalHotkey(["left arrow"], this.onArrowLeft);
-        FSBL.Clients.HotkeyClient.addGlobalHotkey(["down arrow"], this.onArrowDown);
-        FSBL.Clients.HotkeyClient.addGlobalHotkey(["return"], this.clickOnItem);
-        FSBL.Clients.HotkeyClient.addGlobalHotkey(["home"], this.focusOnFirst);
-        FSBL.Clients.HotkeyClient.addGlobalHotkey(["end"], this.focusOnLast);
-    }
-    detach() {
-        FSBL.Clients.HotkeyClient.removeGlobalHotkey(["up arrow"], this.onArrowUp);
-        FSBL.Clients.HotkeyClient.removeGlobalHotkey(["right arrow"], this.onArrowRight);
-        FSBL.Clients.HotkeyClient.removeGlobalHotkey(["left arrow"], this.onArrowLeft);
-        FSBL.Clients.HotkeyClient.removeGlobalHotkey(["down arrow"], this.onArrowDown);
-        FSBL.Clients.HotkeyClient.removeGlobalHotkey(["return"], this.clickOnItem);
-        FSBL.Clients.HotkeyClient.removeGlobalHotkey(["home"], this.focusOnFirst);
-        FSBL.Clients.HotkeyClient.removeGlobalHotkey(["end"], this.focusOnLast);
-    }
-}
+    });
+    childWin.addEventListener("blur", focusOnFirst);
+    childWin.addEventListener("focus", focusOnFirst);
+};
 //# sourceMappingURL=keyboardNavigation.js.map

package/react/components/menu/keyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/menu/keyboardNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Keyboard navigation allows the end user to navigate through menus using\n * cursor keys and to select items using the enter key.\n *\n * This is stateful. As implemented in MenuPortal, the currently selected\n * menu item will remain selected between menu opens and closes.\n *\n * When an element is selected then the keyboard navigation state is reset\n * so that the user will begin again with the first item.\n *\n * @param childWin Main window or child window reference.\n * @param className Selector of elements to apply navigation on.\n * @example\n * const keyboardNav = KeyboardNavigation(window, \".menu-item\");\n * keyboardNav.attach() // enable navigation\n * keyboardNav.detach() // disable navigation\n */\nexport class KeyboardNavigation {\n\tprivate childWin: Window;\n\n\tprivate className: string;\n\n\tprivate selectedItem: number | undefined = undefined;\n\n\tprivate selectedIcon: number = -1;\n\n\t/**\n\t *\n\t * @param childWin Main window or child window reference\n\t * @param className The selector string e.g .menu-item\n\t */\n\tconstructor(childWin: Window, className: string) {\n\t\tthis.childWin = childWin;\n\t\tthis.className = className;\n\t\tthis.onArrowDown = this.onArrowDown.bind(this);\n\t\tthis.onArrowUp = this.onArrowUp.bind(this);\n\t\tthis.onArrowRight = this.onArrowRight.bind(this);\n\t\tthis.onArrowLeft = this.onArrowLeft.bind(this);\n\t\tthis.clickOnItem = this.clickOnItem.bind(this);\n\t\tthis.focusOnFirst = this.focusOnFirst.bind(this);\n\t\tthis.focusOnLast = this.focusOnLast.bind(this);\n\t\tthis.resetFocusOnDOMChanges();\n\t}\n\n\t/**\n\t * A mutation observer to watch changes in the DOM\n\t * and set the selectedIndex to undefined when changes\n\t * observed. We want to start focusing from element with index 0\n\t * when the elements order changes.\n\t */\n\tprivate resetFocusOnDOMChanges() {\n\t\tnew MutationObserver(() => {\n\t\t\t// Reset selectedIndex when elements added or removed\n\t\t\t// from the DOM. The motivation behind this was an issue\n\t\t\t// with Brad's search menu where the order of focus is\n\t\t\t// messed up when his list of result changes.\n\t\t\tthis.selectedItem = undefined;\n\t\t}).observe(this.childWin.document.body, {\n\t\t\tchildList: true,\n\t\t\tcharacterData: false,\n\t\t\tsubtree: true,\n\t\t});\n\t}\n\n\t/**\n\t * Returns list of elements\n\t */\n\tprivate getElements() {\n\t\treturn this.childWin.document.querySelectorAll(this.className);\n\t}\n\n\tprivate getMenuItemIcons(index: number) {\n\t\tconst menuItems = this.getElements();\n\t\treturn menuItems[index].querySelectorAll(\".menu-item-icon\");\n\t}\n\n\t/**\n\t * Remove all focus classes.\n\t */\n\tprivate removeAllFocus() {\n\t\tconst menuItems = this.getElements();\n\t\tmenuItems.forEach((item: Element, key: number) => {\n\t\t\titem.removeAttribute(\"focused\");\n\t\t\tconst icons = this.getMenuItemIcons(key);\n\t\t\ticons.forEach((icon: Element) => {\n\t\t\t\ticon.removeAttribute(\"focused\");\n\t\t\t});\n\t\t});\n\t}\n\n\t/**\n\t * Sets the focus on a menu item\n\t * @param index The index of the menu item in the list\n\t */\n\tprivate focusOn(index: number) {\n\t\tthis.removeAllFocus();\n\n\t\tconst menuItems = this.getElements();\n\t\t// Menu could have no items\n\t\tif (!menuItems.length) return;\n\t\t// Focus on element and scroll if needed\n\t\tmenuItems[index].setAttribute(\"focused\", \"true\");\n\t\t(menuItems[index] as any).scrollIntoViewIfNeeded({\n\t\t\tbehavior: \"smooth\",\n\t\t});\n\t}\n\n\t/**\n\t * Sets the focus on a menu item's icon\n\t * @param index The index of the menu item in the list\n\t * @param iconIndex The index of the menu item's icon (-1 = menu text, not icon)\n\t */\n\tprivate focusOnIcon(index: number, iconIndex: number) {\n\t\tthis.removeAllFocus();\n\n\t\tconst menuItems = this.getElements();\n\t\t// Menu could have no items\n\t\tif (!menuItems.length) return;\n\n\t\tconst icons = this.getMenuItemIcons(index);\n\t\t// Defend against possible js runtime error\n\t\tif (icons.length < iconIndex) {\n\t\t\treturn;\n\t\t}\n\n\t\t// scroll if needed\n\t\t(menuItems[index] as any).scrollIntoViewIfNeeded({\n\t\t\tbehavior: \"smooth\",\n\t\t});\n\t\t// Focus on menu item text, if relevant\n\t\tif (iconIndex === -1) {\n\t\t\tmenuItems[index].setAttribute(\"focused\", \"true\");\n\t\t\treturn;\n\t\t}\n\n\t\ticons[iconIndex].setAttribute(\"focused\", \"true\");\n\t}\n\n\t/**\n\t * Simulates mouse events\n\t */\n\tprivate clickOnItem() {\n\t\tthis.removeAllFocus();\n\t\tif (this.selectedItem !== undefined) {\n\t\t\tconst elements = this.getElements();\n\t\t\tconst selectedItem = elements[this.selectedItem as any];\n\t\t\t[\"mousedown\", \"click\", \"mouseup\"].forEach((event) => {\n\t\t\t\tif (this.selectedIcon > -1) {\n\t\t\t\t\tconst icons = this.getMenuItemIcons(this.selectedItem as any);\n\t\t\t\t\tconst selectedIcon = icons[this.selectedIcon as any];\n\t\t\t\t\tif (selectedIcon) {\n\t\t\t\t\t\tselectedIcon.dispatchEvent(\n\t\t\t\t\t\t\tnew MouseEvent(event, {\n\t\t\t\t\t\t\t\tview: this.childWin,\n\t\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t\t\t\tbuttons: 1,\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (selectedItem && selectedItem.dispatchEvent) {\n\t\t\t\t\tselectedItem.dispatchEvent(\n\t\t\t\t\t\tnew MouseEvent(event, {\n\t\t\t\t\t\t\tview: this.childWin,\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t\t\tbuttons: 1,\n\t\t\t\t\t\t})\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t});\n\t\t\t/**\n\t\t\t * When an element is selected we reset the menu to focus on the first item.\n\t\t\t * Per Dan Nicolai UX specialist.\n\t\t\t */\n\t\t\tthis.selectedItem = undefined;\n\t\t}\n\t}\n\n\t/**\n\t * Invoked when a user presses on the arrow up key\n\t */\n\tprivate onArrowUp() {\n\t\t// On first key up/down press, we want\n\t\t// the focus to be on first item\n\t\tif (this.selectedItem === undefined) {\n\t\t\tthis.selectedItem = 0;\n\t\t\treturn this.focusOn(0);\n\t\t}\n\t\t// Set the focus on the previous item\n\t\tthis.selectedItem--;\n\t\tif (this.selectedItem < 0) {\n\t\t\t// If we are back to the begining\n\t\t\t// set the focus on last item\n\t\t\tthis.selectedItem = this.getElements().length - 1;\n\t\t}\n\t\tthis.focusOn(this.selectedItem);\n\t}\n\n\t/**\n\t * Invoked when user press the arrow down key\n\t */\n\tprivate onArrowDown() {\n\t\tif (this.selectedItem === undefined) {\n\t\t\tthis.selectedItem = 0;\n\t\t\treturn this.focusOn(0);\n\t\t}\n\t\t// The the focus on the next item\n\t\tthis.selectedItem++;\n\t\t// If we reached the end, then go back to first item\n\t\tif (this.selectedItem === this.getElements().length) {\n\t\t\tthis.selectedItem = 0;\n\t\t}\n\t\tthis.focusOn(this.selectedItem);\n\t}\n\n\t/**\n\t * Invoked when user press the arrow right key\n\t */\n\tprivate onArrowRight() {\n\t\tif (this.selectedItem === undefined) {\n\t\t\tthis.selectedItem = 0;\n\t\t\treturn this.focusOn(0);\n\t\t}\n\n\t\tconst menuItems = this.getElements();\n\t\t// Menu could have no items\n\t\tif (!menuItems.length) return;\n\n\t\tconst icons = this.getMenuItemIcons(this.selectedItem);\n\t\tif (icons.length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.selectedIcon++;\n\t\tif (this.selectedIcon === icons.length) {\n\t\t\tthis.selectedIcon = -1;\n\t\t}\n\t\tthis.focusOnIcon(this.selectedItem, this.selectedIcon);\n\t}\n\n\t/**\n\t * Invoked when user press the arrow left key\n\t */\n\tprivate onArrowLeft() {\n\t\tif (this.selectedItem === undefined) {\n\t\t\tthis.selectedItem = 0;\n\t\t\treturn this.focusOn(0);\n\t\t}\n\n\t\tconst menuItems = this.getElements();\n\t\t// Menu could have no items\n\t\tif (!menuItems.length) return;\n\n\t\tconst icons = this.getMenuItemIcons(this.selectedItem);\n\t\tif (icons.length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.selectedIcon--;\n\t\tif (this.selectedIcon === icons.length) {\n\t\t\tthis.selectedIcon = -1;\n\t\t}\n\t\tthis.focusOnIcon(this.selectedItem, this.selectedIcon);\n\t}\n\n\tprivate focusOnFirst() {\n\t\tthis.selectedItem = 0;\n\t\tthis.selectedIcon = -1;\n\t\tthis.focusOn(0);\n\t}\n\n\tprivate focusOnLast() {\n\t\tthis.selectedIcon = -1;\n\t\tconst { length } = this.getElements();\n\t\tif (length) {\n\t\t\tthis.selectedItem = length - 1;\n\t\t\tthis.focusOn(length - 1);\n\t\t}\n\t}\n\n\t/**\n\t * Adds global hot keys for up/down arrow\n\t */\n\tpublic attach() {\n\t\t// Register hotkeys\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey([\"up arrow\"], this.onArrowUp);\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey([\"right arrow\"], this.onArrowRight);\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey([\"left arrow\"], this.onArrowLeft);\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey([\"down arrow\"], this.onArrowDown);\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey([\"return\"], this.clickOnItem);\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey([\"home\"], this.focusOnFirst);\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey([\"end\"], this.focusOnLast);\n\t}\n\n\t/**\n\t * Remove global got keys for up/down arrow\n\t */\n\tpublic detach() {\n\t\t// Remove registered hotkeys\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey([\"up arrow\"], this.onArrowUp);\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey([\"right arrow\"], this.onArrowRight);\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey([\"left arrow\"], this.onArrowLeft);\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey([\"down arrow\"], this.onArrowDown);\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey([\"return\"], this.clickOnItem);\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey([\"home\"], this.focusOnFirst);\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey([\"end\"], this.focusOnLast);\n\t}\n}\n"]}
+{"version":3,"file":"keyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/menu/keyboardNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Keyboard navigation allows the end user to navigate through menus using\n * arrow keys and to select items using the enter key.\n *\n * When an element is selected then the keyboard navigation state is reset\n * so that the user will begin again with the first item.\n *\n * @param childWin - Main window or child window reference.\n * @param [className] - Selector of elements to apply navigation on.\n * @example\n * applyMenuKeyboardNavigation(window, \".menu-item\");\n */\nexport const applyMenuKeyboardNavigation = (childWin: Window, className: string = \".menu-item\") => {\n\tlet selectedItem: number = 0;\n\n\tlet selectedIcon: number = -1;\n\n\tnew MutationObserver(() => {\n\t\t// Reset selectedIndex when elements added or removed\n\t\t// from the DOM. The motivation behind this was an issue\n\t\t// with Brad's search menu where the order of focus is\n\t\t// messed up when his list of result changes.\n\t\tselectedItem = 0;\n\t}).observe(childWin.document.body, {\n\t\tchildList: true,\n\t\tcharacterData: false,\n\t\tsubtree: true,\n\t});\n\n\t/**\n\t * Returns list of elements\n\t */\n\tconst getElements = () => childWin.document.querySelectorAll(className) as NodeListOf<HTMLElement>;\n\n\tconst getMenuItemIcons = (index: number) => {\n\t\tconst menuItems = getElements();\n\t\treturn menuItems[index].querySelectorAll(\".menu-item-icon\") as NodeListOf<HTMLElement>;\n\t};\n\n\t/**\n\t * Sets the focus on a menu item\n\t * @param index The index of the menu item in the list\n\t */\n\tconst focusOn = (index: number) => {\n\t\tconst menuItems = getElements();\n\n\t\t// Menu could have no items\n\t\tif (!menuItems.length) return;\n\n\t\t// Focus on element and scroll if needed\n\t\tmenuItems[index].focus();\n\t};\n\n\tconst focusOnFirst = () => {\n\t\tselectedItem = 0;\n\t\tselectedIcon = -1;\n\t\tfocusOn(0);\n\t};\n\n\tconst focusOnLast = () => {\n\t\tselectedIcon = -1;\n\t\tconst { length } = getElements();\n\t\tif (length) {\n\t\t\tselectedItem = length - 1;\n\t\t\tfocusOn(length - 1);\n\t\t}\n\t};\n\n\t/**\n\t * Sets the focus on a menu item's icon\n\t * @param index The index of the menu item in the list\n\t * @param iconIndex The index of the menu item's icon (-1 = menu text, not icon)\n\t */\n\tconst focusOnIcon = (index: number, iconIndex: number) => {\n\t\tconst menuItems = getElements();\n\t\t// Menu could have no items\n\t\tif (!menuItems.length) return;\n\n\t\tconst icons = getMenuItemIcons(index);\n\t\t// Defend against possible js runtime error\n\t\tif (icons.length <= iconIndex) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Focus on menu item text, if relevant\n\t\tif (iconIndex === -1) {\n\t\t\tmenuItems[index].focus();\n\t\t\treturn;\n\t\t}\n\n\t\ticons[iconIndex].focus();\n\t};\n\n\t/**\n\t * Simulates mouse events\n\t */\n\tconst clickOnItem = () => {\n\t\tconst elements = getElements();\n\t\tconst selectedItemElement = elements[selectedItem as any];\n\t\t[\"mousedown\", \"click\", \"mouseup\"].forEach((event) => {\n\t\t\tif (selectedIcon > -1) {\n\t\t\t\tconst icons = getMenuItemIcons(selectedItem as any);\n\t\t\t\tconst selectedIconElement = icons[selectedIcon as any];\n\t\t\t\tif (selectedIconElement) {\n\t\t\t\t\tselectedIconElement.dispatchEvent(\n\t\t\t\t\t\tnew MouseEvent(event, {\n\t\t\t\t\t\t\tview: childWin,\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t\t\tbuttons: 1,\n\t\t\t\t\t\t})\n\t\t\t\t\t);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (selectedItemElement && selectedItemElement.dispatchEvent) {\n\t\t\t\tselectedItemElement.dispatchEvent(\n\t\t\t\t\tnew MouseEvent(event, {\n\t\t\t\t\t\tview: childWin,\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t\tbuttons: 1,\n\t\t\t\t\t})\n\t\t\t\t);\n\t\t\t}\n\t\t});\n\t};\n\n\t/**\n\t * Invoked when a user presses on the arrow up key\n\t */\n\tconst onArrowUp = () => {\n\t\tselectedIcon = -1;\n\n\t\t// Set the focus on the previous item\n\t\tselectedItem--;\n\t\tif (selectedItem < 0) {\n\t\t\t// If we are back to the begining\n\t\t\t// set the focus on last item\n\t\t\tfocusOnLast();\n\t\t\treturn;\n\t\t}\n\t\tfocusOn(selectedItem);\n\t};\n\n\t/**\n\t * Invoked when user press the arrow down key\n\t */\n\tconst onArrowDown = () => {\n\t\tselectedIcon = -1;\n\n\t\t// The the focus on the next item\n\t\tselectedItem++;\n\t\t// If we reached the end, then go back to first item\n\t\tif (selectedItem === getElements().length) {\n\t\t\tselectedItem = 0;\n\t\t}\n\t\tfocusOn(selectedItem);\n\t};\n\n\t/**\n\t * Invoked when user press the arrow right key\n\t */\n\tconst onArrowRight = () => {\n\t\tconst menuItems = getElements();\n\t\t// Menu could have no items\n\t\tif (!menuItems.length) return;\n\n\t\tconst icons = getMenuItemIcons(selectedItem);\n\t\tif (icons.length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tselectedIcon++;\n\t\tif (selectedIcon === icons.length) {\n\t\t\tselectedIcon = -1;\n\t\t}\n\t\tfocusOnIcon(selectedItem, selectedIcon);\n\t};\n\n\t/**\n\t * Invoked when user press the arrow left key\n\t */\n\tconst onArrowLeft = () => {\n\t\tconst menuItems = getElements();\n\t\t// Menu could have no items\n\t\tif (!menuItems.length) return;\n\n\t\tconst icons = getMenuItemIcons(selectedItem);\n\t\tif (icons.length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tselectedIcon--;\n\t\tif (selectedIcon === icons.length) {\n\t\t\tselectedIcon = -1;\n\t\t}\n\t\tfocusOnIcon(selectedItem, selectedIcon);\n\t};\n\n\tconst actionDictionary = {\n\t\tArrowDown: onArrowDown,\n\t\tArrowUp: onArrowUp,\n\t\tArrowLeft: onArrowLeft,\n\t\tArrowRight: onArrowRight,\n\t\tEnter: clickOnItem,\n\t\tHome: focusOnFirst,\n\t\tEnd: focusOnLast,\n\t};\n\n\tchildWin.addEventListener(\"keydown\", (e) => {\n\t\tconst { key } = e as KeyboardEvent;\n\n\t\tif (key in actionDictionary) {\n\t\t\tactionDictionary[key as keyof typeof actionDictionary]?.();\n\t\t\te.preventDefault();\n\t\t}\n\t});\n\n\tchildWin.addEventListener(\"blur\", focusOnFirst);\n\tchildWin.addEventListener(\"focus\", focusOnFirst);\n};\n"]}

package/react/components/menu/menuContext.d.ts

@@ -7,5 +7,11 @@ declare type MenuContextType = {
     menuHeight: number | undefined;
     minHeight: number;
 };
+/**
+ * We initialize our context with an empty object because we know that MenuShell will
+ * properly initialize our context at runtime (during the first render). We cast () to MenuContextType
+ * to avoid typescript errors for any consumers of the context object. Beware that if you get a runtime error
+ * then someone has probably missed an initialization in MenuShell.
+ */
 export declare const MenuContext: import("react").Context<MenuContextType>;
 export {};

package/react/components/menu/menuContext.js

@@ -1,3 +1,9 @@
 import { createContext } from "react";
+/**
+ * We initialize our context with an empty object because we know that MenuShell will
+ * properly initialize our context at runtime (during the first render). We cast () to MenuContextType
+ * to avoid typescript errors for any consumers of the context object. Beware that if you get a runtime error
+ * then someone has probably missed an initialization in MenuShell.
+ */
 export const MenuContext = createContext({});
 //# sourceMappingURL=menuContext.js.map

package/react/components/menu/menuContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuContext.js","sourceRoot":"","sources":["../../../src/components/menu/menuContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAiBtC,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAkB,EAAqB,CAAC,CAAC","sourcesContent":["import { createContext } from \"react\";\n\ntype MenuContextType = {\n\tthisMenuId: string;\n\tclassName: string | undefined;\n\tmaxHeight: number;\n\tmenuWidth: number;\n\tmenuHeight: number | undefined;\n\tminHeight: number;\n};\n\n/**\n * We initialize our context with an empty object because we know that MenuShell will\n * properly initialize our context at runtime (during the first render). We cast () to MenuContextType\n * to avoid typescript errors for any consumers of the context object. Beware that if you get a runtime error\n * then someone has probably missed an initialization in MenuShell.\n */\nexport const MenuContext = createContext<MenuContextType>({} as MenuContextType);\n"]}
+{"version":3,"file":"menuContext.js","sourceRoot":"","sources":["../../../src/components/menu/menuContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAWtC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAkB,EAAqB,CAAC,CAAC","sourcesContent":["import { createContext } from \"react\";\n\ntype MenuContextType = {\n\tthisMenuId: string;\n\tclassName: string | undefined;\n\tmaxHeight: number;\n\tmenuWidth: number;\n\tmenuHeight: number | undefined;\n\tminHeight: number;\n};\n\n/**\n * We initialize our context with an empty object because we know that MenuShell will\n * properly initialize our context at runtime (during the first render). We cast () to MenuContextType\n * to avoid typescript errors for any consumers of the context object. Beware that if you get a runtime error\n * then someone has probably missed an initialization in MenuShell.\n */\nexport const MenuContext = createContext<MenuContextType>({} as MenuContextType);\n"]}

package/react/components/menu/menuHelpers.d.ts

@@ -1,10 +1,32 @@
+/**
+ * Returns a drop down menu's position relative to the toolbar's current location and the
+ * MenuToggle that was pressed. The dimensions returned are relative to the toolbar's
+ * current monitor.
+ * @param menuId The shell ID (e.g. filemenu)
+ * @param menuContentHeight The height of menu contents.
+ */
 export declare const calculatePosition: (menuId: string, menuContentHeight?: number | undefined) => Promise<{
     top: number;
     left: number;
 }>;
+/**
+ * Calculates the height and position that a window should take based on the height necessary to display
+ * the window's DOM contents without scrollbars, but not beyond the scope of the monitor itself.
+ *
+ * @param childWindow Window The window to calculate
+ * @param menuId string The id of the menu, used for a CSS selector
+ * @param [maxHeight] Maximum height for the window
+ * @param [fixedHeight] Optional fixed height
+ */
 export declare const calculateDimensions: (childWindow: Window, menuId: string, fixedHeight: number | undefined, maxHeight: number | undefined, minHeight: number) => Promise<{
     top: number;
     left: number;
     height: number;
 }>;
+/**
+ * Copy CSS elements from parent to child window. Portals operate in a new window which doesn't automatically
+ * have access to the CSS from the main window, so we need to clone those elements into the menu's window
+ * when it is created.
+ * @param childWindow Child window reference
+ */
 export declare const injectCSS: (childWindow: Window) => void;

package/react/components/menu/menuHelpers.js

@@ -1,18 +1,46 @@
+// Minimum portal height (chromium limitation)
 const MIN_HEIGHT = 100;
+/**
+ * Returns a drop down menu's position relative to the toolbar's current location and the
+ * MenuToggle that was pressed. The dimensions returned are relative to the toolbar's
+ * current monitor.
+ * @param menuId The shell ID (e.g. filemenu)
+ * @param menuContentHeight The height of menu contents.
+ */
 export const calculatePosition = async (menuId, menuContentHeight) => {
+    var _a, _b;
+    // Rather than use window.innerHeight, we use the height of the document because Electron at times fails
+    // to resize windows across monitors with different DPI scaling.  We've worked around this by calling setShape()
+    // to avoid a white bar at the bottom of the window, but the window DOM height is still the old height.
     const toolbarHeight = document.getElementsByClassName("finsemble-toolbar")[0].offsetHeight;
+    // The monitor's available height and width is found in the window.screen object (just like Electron, less the space
+    // taken up by the operating system toolbar)
     const { availHeight } = window.screen;
+    // Non-standard. Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Screen/availTop
+    const availTop = (_b = (_a = window.screen) === null || _a === void 0 ? void 0 : _a.availTop) !== null && _b !== void 0 ? _b : 0;
     const toolbarX = window.screenLeft;
     const toolbarY = window.screenTop;
-    const spaceBelowToolbar = availHeight - toolbarY - toolbarHeight;
+    const spaceBelowToolbar = availHeight + availTop - toolbarY - toolbarHeight;
+    /*
+    Get a reference to the MenuToggle's element using querySelector to avoid having to pass
+    React ref all the way down here.
+    */
     const selector = `#${menuId}-menu-toggle`;
     const menuToggle = document.querySelector(selector);
     if (!menuToggle) {
         console.error(`calculatePosition() can't find selector "${selector}"`);
     }
+    // Get the "x" coordinate of our toggle button *within* the toolbar
+    // If for whatever reason the menuToggle can't be found, then default to an x coordinate of zero
     const { x: menuToggleX } = menuToggle ? menuToggle.getBoundingClientRect() : { x: 0 };
     let left = toolbarX + menuToggleX;
     let top = toolbarY + toolbarHeight;
+    /*
+    Check if we have enough space for the menu between
+    the toolbar and bottom edge of the screen. If not,
+    then reposition the menu to appear above toolbar.
+    */
     if (menuContentHeight) {
         const menuHeight = Math.max(menuContentHeight, MIN_HEIGHT);
         if (menuHeight > spaceBelowToolbar) {
@@ -24,12 +52,31 @@ export const calculatePosition = async (menuId, menuContentHeight) => {
         left,
     };
 };
+/**
+ * Calculates the height and position that a window should take based on the height necessary to display
+ * the window's DOM contents without scrollbars, but not beyond the scope of the monitor itself.
+ *
+ * @param childWindow Window The window to calculate
+ * @param menuId string The id of the menu, used for a CSS selector
+ * @param [maxHeight] Maximum height for the window
+ * @param [fixedHeight] Optional fixed height
+ */
 export const calculateDimensions = async (childWindow, menuId, fixedHeight = 0, maxHeight = Infinity, minHeight) => {
+    /* Content height is essentially the offsetHeight of the window's <html> element.
+    This seems more reliable than summing the heights of all body children.
+    */
     const contentHeight = childWindow.document.documentElement.offsetHeight;
+    /**
+     * Calculate the actual menu height, constrained by maximum and minimum sizes.
+     * Zero, null or undefined are invalid maximum heights.
+     *
+     * Chromium imposes a 100 pixel minimum on window height.
+     */
     const CHROMIUM_MIN_HEIGHT = minHeight !== null && minHeight !== void 0 ? minHeight : 0;
     const minimumContentHeight = Math.max(contentHeight, CHROMIUM_MIN_HEIGHT);
     const height = fixedHeight ? fixedHeight : Math.min(minimumContentHeight, maxHeight);
     const { left, top } = await calculatePosition(menuId, height);
+    // Final step, make sure the menu isn't larger than the screen itself
     const { availHeight } = window.screen;
     const finalHeight = Math.min(height, availHeight);
     return {
@@ -38,10 +85,20 @@ export const calculateDimensions = async (childWindow, menuId, fixedHeight = 0,
         height: finalHeight,
     };
 };
+/**
+ * Copy CSS elements from parent to child window. Portals operate in a new window which doesn't automatically
+ * have access to the CSS from the main window, so we need to clone those elements into the menu's window
+ * when it is created.
+ * @param childWindow Child window reference
+ */
 export const injectCSS = (childWindow) => {
     const { children } = document.head;
     const styleElements = [];
     for (const item in children) {
+        /**
+            webpack's style-loader creates <style> tags but some versions will create <link> tags if CSS source maps are
+            enabled (sourceMap), or if `injectType: linkTag` is configured.
+        */
         if (children[item].tagName === "STYLE" || children[item].tagName === "LINK") {
             const newElement = children[item].cloneNode(true);
             styleElements.push(newElement);

package/react/components/menu/menuHelpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuHelpers.js","sourceRoot":"","sources":["../../../src/components/menu/menuHelpers.ts"],"names":[],"mappings":"AACA,MAAM,UAAU,GAAG,GAAG,CAAC;AASvB,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,EACrC,MAAc,EACd,iBAA0B,EAIxB,EAAE;IAIJ,MAAM,aAAa,GAAiB,QAAQ,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAE,CAAC,YAAY,CAAC;IAI1G,MAAM,EAAE,WAAW,EAAE,GAAW,MAAM,CAAC,MAAM,CAAC;IAE9C,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC;IACnC,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;IAClC,MAAM,iBAAiB,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,CAAC;IAMjE,MAAM,QAAQ,GAAG,IAAI,MAAM,cAAc,CAAC;IAC1C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACpD,IAAI,CAAC,UAAU,EAAE;QAChB,OAAO,CAAC,KAAK,CAAC,4CAA4C,QAAQ,GAAG,CAAC,CAAC;KACvE;IAID,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IAEtF,IAAI,IAAI,GAAG,QAAQ,GAAG,WAAW,CAAC;IAClC,IAAI,GAAG,GAAG,QAAQ,GAAG,aAAa,CAAC;IAMnC,IAAI,iBAAiB,EAAE;QACtB,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;QAC3D,IAAI,UAAU,GAAG,iBAAiB,EAAE;YACnC,GAAG,GAAG,QAAQ,GAAG,UAAU,CAAC;SAC5B;KACD;IAED,OAAO;QACN,GAAG;QACH,IAAI;KACJ,CAAC;AACH,CAAC,CAAC;AAWF,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,EACvC,WAAmB,EACnB,MAAc,EACd,cAAsB,CAAC,EACvB,YAAoB,QAAQ,EAC5B,SAAiB,EAKf,EAAE;IAIJ,MAAM,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;IAQxE,MAAM,mBAAmB,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,CAAC,CAAC;IAC3C,MAAM,oBAAoB,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC;IAC1E,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC;IAErF,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,MAAM,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAG9D,MAAM,EAAE,WAAW,EAAE,GAAW,MAAM,CAAC,MAAM,CAAC;IAC9C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAElD,OAAO;QACN,GAAG;QACH,IAAI;QACJ,MAAM,EAAE,WAAW;KACnB,CAAC;AACH,CAAC,CAAC;AAQF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,WAAmB,EAAQ,EAAE;IACtD,MAAM,EAAE,QAAQ,EAAE,GAAQ,QAAQ,CAAC,IAAI,CAAC;IACxC,MAAM,aAAa,GAAkB,EAAE,CAAC;IACxC,KAAK,MAAM,IAAI,IAAI,QAAQ,EAAE;QAK5B,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,MAAM,EAAE;YAC5E,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YAClD,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC/B;KACD;IACD,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC9B,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Minimum portal height (chromium limitation)\nconst MIN_HEIGHT = 100;\n\n/**\n * Returns a drop down menu's position relative to the toolbar's current location and the\n * MenuToggle that was pressed. The dimensions returned are relative to the toolbar's\n * current monitor.\n * @param menuId The shell ID (e.g. filemenu)\n * @param menuContentHeight The height of menu contents.\n */\nexport const calculatePosition = async (\n\tmenuId: string,\n\tmenuContentHeight?: number\n): Promise<{\n\ttop: number;\n\tleft: number;\n}> => {\n\t// Rather than use window.innerHeight, we use the height of the document because Electron at times fails\n\t// to resize windows across monitors with different DPI scaling.  We've worked around this by calling setShape()\n\t// to avoid a white bar at the bottom of the window, but the window DOM height is still the old height.\n\tconst toolbarHeight = (<HTMLElement>document.getElementsByClassName(\"finsemble-toolbar\")[0]).offsetHeight;\n\n\t// The monitor's available height and width is found in the window.screen object (just like Electron, less the space\n\t// taken up by the operating system toolbar)\n\tconst { availHeight }: Screen = window.screen;\n\n\tconst toolbarX = window.screenLeft;\n\tconst toolbarY = window.screenTop;\n\tconst spaceBelowToolbar = availHeight - toolbarY - toolbarHeight;\n\n\t/*\n\tGet a reference to the MenuToggle's element using querySelector to avoid having to pass\n\tReact ref all the way down here.\n\t*/\n\tconst selector = `#${menuId}-menu-toggle`;\n\tconst menuToggle = document.querySelector(selector);\n\tif (!menuToggle) {\n\t\tconsole.error(`calculatePosition() can't find selector \"${selector}\"`);\n\t}\n\n\t// Get the \"x\" coordinate of our toggle button *within* the toolbar\n\t// If for whatever reason the menuToggle can't be found, then default to an x coordinate of zero\n\tconst { x: menuToggleX } = menuToggle ? menuToggle.getBoundingClientRect() : { x: 0 };\n\n\tlet left = toolbarX + menuToggleX;\n\tlet top = toolbarY + toolbarHeight;\n\t/*\n\tCheck if we have enough space for the menu between\n\tthe toolbar and bottom edge of the screen. If not,\n\tthen reposition the menu to appear above toolbar.\n\t*/\n\tif (menuContentHeight) {\n\t\tconst menuHeight = Math.max(menuContentHeight, MIN_HEIGHT);\n\t\tif (menuHeight > spaceBelowToolbar) {\n\t\t\ttop = toolbarY - menuHeight;\n\t\t}\n\t}\n\n\treturn {\n\t\ttop,\n\t\tleft,\n\t};\n};\n\n/**\n * Calculates the height and position that a window should take based on the height necessary to display\n * the window's DOM contents without scrollbars, but not beyond the scope of the monitor itself.\n *\n * @param childWindow Window The window to calculate\n * @param menuId string The id of the menu, used for a CSS selector\n * @param [maxHeight] Maximum height for the window\n * @param [fixedHeight] Optional fixed height\n */\nexport const calculateDimensions = async (\n\tchildWindow: Window,\n\tmenuId: string,\n\tfixedHeight: number = 0,\n\tmaxHeight: number = Infinity,\n\tminHeight: number\n): Promise<{\n\ttop: number;\n\tleft: number;\n\theight: number;\n}> => {\n\t/* Content height is essentially the offsetHeight of the window's <html> element.\n\tThis seems more reliable than summing the heights of all body children.\n\t*/\n\tconst contentHeight = childWindow.document.documentElement.offsetHeight;\n\n\t/**\n\t * Calculate the actual menu height, constrained by maximum and minimum sizes.\n\t * Zero, null or undefined are invalid maximum heights.\n\t *\n\t * Chromium imposes a 100 pixel minimum on window height.\n\t */\n\tconst CHROMIUM_MIN_HEIGHT = minHeight ?? 0;\n\tconst minimumContentHeight = Math.max(contentHeight, CHROMIUM_MIN_HEIGHT);\n\tconst height = fixedHeight ? fixedHeight : Math.min(minimumContentHeight, maxHeight);\n\n\tconst { left, top } = await calculatePosition(menuId, height);\n\n\t// Final step, make sure the menu isn't larger than the screen itself\n\tconst { availHeight }: Screen = window.screen;\n\tconst finalHeight = Math.min(height, availHeight);\n\n\treturn {\n\t\ttop,\n\t\tleft,\n\t\theight: finalHeight,\n\t};\n};\n\n/**\n * Copy CSS elements from parent to child window. Portals operate in a new window which doesn't automatically\n * have access to the CSS from the main window, so we need to clone those elements into the menu's window\n * when it is created.\n * @param childWindow Child window reference\n */\nexport const injectCSS = (childWindow: Window): void => {\n\tconst { children }: any = document.head;\n\tconst styleElements: HTMLElement[] = [];\n\tfor (const item in children) {\n\t\t/** \n\t\t\twebpack's style-loader creates <style> tags but some versions will create <link> tags if CSS source maps are \n\t\t\tenabled (sourceMap), or if `injectType: linkTag` is configured.\n    \t*/\n\t\tif (children[item].tagName === \"STYLE\" || children[item].tagName === \"LINK\") {\n\t\t\tconst newElement = children[item].cloneNode(true);\n\t\t\tstyleElements.push(newElement);\n\t\t}\n\t}\n\tstyleElements.forEach((item) => {\n\t\tchildWindow.document.head.append(item);\n\t});\n};\n"]}
+{"version":3,"file":"menuHelpers.js","sourceRoot":"","sources":["../../../src/components/menu/menuHelpers.ts"],"names":[],"mappings":"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","sourcesContent":["// Minimum portal height (chromium limitation)\nconst MIN_HEIGHT = 100;\n\n/**\n * Returns a drop down menu's position relative to the toolbar's current location and the\n * MenuToggle that was pressed. The dimensions returned are relative to the toolbar's\n * current monitor.\n * @param menuId The shell ID (e.g. filemenu)\n * @param menuContentHeight The height of menu contents.\n */\nexport const calculatePosition = async (\n\tmenuId: string,\n\tmenuContentHeight?: number\n): Promise<{\n\ttop: number;\n\tleft: number;\n}> => {\n\t// Rather than use window.innerHeight, we use the height of the document because Electron at times fails\n\t// to resize windows across monitors with different DPI scaling.  We've worked around this by calling setShape()\n\t// to avoid a white bar at the bottom of the window, but the window DOM height is still the old height.\n\tconst toolbarHeight = (<HTMLElement>document.getElementsByClassName(\"finsemble-toolbar\")[0]).offsetHeight;\n\n\t// The monitor's available height and width is found in the window.screen object (just like Electron, less the space\n\t// taken up by the operating system toolbar)\n\tconst { availHeight }: Screen = window.screen;\n\n\t// Non-standard. Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.\n\t// https://developer.mozilla.org/en-US/docs/Web/API/Screen/availTop\n\tconst availTop = (window.screen as any)?.availTop ?? 0;\n\n\tconst toolbarX = window.screenLeft;\n\tconst toolbarY = window.screenTop;\n\tconst spaceBelowToolbar = availHeight + availTop - toolbarY - toolbarHeight;\n\n\t/*\n\tGet a reference to the MenuToggle's element using querySelector to avoid having to pass\n\tReact ref all the way down here.\n\t*/\n\tconst selector = `#${menuId}-menu-toggle`;\n\tconst menuToggle = document.querySelector(selector);\n\tif (!menuToggle) {\n\t\tconsole.error(`calculatePosition() can't find selector \"${selector}\"`);\n\t}\n\n\t// Get the \"x\" coordinate of our toggle button *within* the toolbar\n\t// If for whatever reason the menuToggle can't be found, then default to an x coordinate of zero\n\tconst { x: menuToggleX } = menuToggle ? menuToggle.getBoundingClientRect() : { x: 0 };\n\n\tlet left = toolbarX + menuToggleX;\n\tlet top = toolbarY + toolbarHeight;\n\t/*\n\tCheck if we have enough space for the menu between\n\tthe toolbar and bottom edge of the screen. If not,\n\tthen reposition the menu to appear above toolbar.\n\t*/\n\tif (menuContentHeight) {\n\t\tconst menuHeight = Math.max(menuContentHeight, MIN_HEIGHT);\n\t\tif (menuHeight > spaceBelowToolbar) {\n\t\t\ttop = toolbarY - menuHeight;\n\t\t}\n\t}\n\n\treturn {\n\t\ttop,\n\t\tleft,\n\t};\n};\n\n/**\n * Calculates the height and position that a window should take based on the height necessary to display\n * the window's DOM contents without scrollbars, but not beyond the scope of the monitor itself.\n *\n * @param childWindow Window The window to calculate\n * @param menuId string The id of the menu, used for a CSS selector\n * @param [maxHeight] Maximum height for the window\n * @param [fixedHeight] Optional fixed height\n */\nexport const calculateDimensions = async (\n\tchildWindow: Window,\n\tmenuId: string,\n\tfixedHeight: number = 0,\n\tmaxHeight: number = Infinity,\n\tminHeight: number\n): Promise<{\n\ttop: number;\n\tleft: number;\n\theight: number;\n}> => {\n\t/* Content height is essentially the offsetHeight of the window's <html> element.\n\tThis seems more reliable than summing the heights of all body children.\n\t*/\n\tconst contentHeight = childWindow.document.documentElement.offsetHeight;\n\n\t/**\n\t * Calculate the actual menu height, constrained by maximum and minimum sizes.\n\t * Zero, null or undefined are invalid maximum heights.\n\t *\n\t * Chromium imposes a 100 pixel minimum on window height.\n\t */\n\tconst CHROMIUM_MIN_HEIGHT = minHeight ?? 0;\n\tconst minimumContentHeight = Math.max(contentHeight, CHROMIUM_MIN_HEIGHT);\n\tconst height = fixedHeight ? fixedHeight : Math.min(minimumContentHeight, maxHeight);\n\n\tconst { left, top } = await calculatePosition(menuId, height);\n\n\t// Final step, make sure the menu isn't larger than the screen itself\n\tconst { availHeight }: Screen = window.screen;\n\tconst finalHeight = Math.min(height, availHeight);\n\n\treturn {\n\t\ttop,\n\t\tleft,\n\t\theight: finalHeight,\n\t};\n};\n\n/**\n * Copy CSS elements from parent to child window. Portals operate in a new window which doesn't automatically\n * have access to the CSS from the main window, so we need to clone those elements into the menu's window\n * when it is created.\n * @param childWindow Child window reference\n */\nexport const injectCSS = (childWindow: Window): void => {\n\tconst { children }: any = document.head;\n\tconst styleElements: HTMLElement[] = [];\n\tfor (const item in children) {\n\t\t/** \n\t\t\twebpack's style-loader creates <style> tags but some versions will create <link> tags if CSS source maps are \n\t\t\tenabled (sourceMap), or if `injectType: linkTag` is configured.\n    \t*/\n\t\tif (children[item].tagName === \"STYLE\" || children[item].tagName === \"LINK\") {\n\t\t\tconst newElement = children[item].cloneNode(true);\n\t\t\tstyleElements.push(newElement);\n\t\t}\n\t}\n\tstyleElements.forEach((item) => {\n\t\tchildWindow.document.head.append(item);\n\t});\n};\n"]}