@finsemble/finsemble-ui 6.6.0 → 7.0.0-beta.2

package/react/components/menu/keyboardNavigation.js

@@ -1,191 +1,141 @@
-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();
+export const applyMenuKeyboardNavigation = (childWin, className = ".menu-item") => {
+    let selectedItem = 0;
+    let selectedIcon = -1;
+    new MutationObserver(() => {
+        selectedItem = 0;
+    }).observe(childWin.document.body, {
+        childList: true,
+        characterData: false,
+        subtree: true,
+    });
+    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();
+    };
+    const focusOn = (index) => {
+        const menuItems = getElements();
         if (!menuItems.length)
             return;
-        menuItems[index].setAttribute("focused", "true");
-        menuItems[index].scrollIntoViewIfNeeded({
-            behavior: "smooth",
-        });
-    }
-    focusOnIcon(index, iconIndex) {
-        this.removeAllFocus();
-        const menuItems = this.getElements();
+        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);
+        }
+    };
+    const focusOnIcon = (index, iconIndex) => {
+        const menuItems = getElements();
         if (!menuItems.length)
             return;
-        const icons = this.getMenuItemIcons(index);
-        if (icons.length < iconIndex) {
+        const icons = getMenuItemIcons(index);
+        if (icons.length <= iconIndex) {
             return;
         }
-        menuItems[index].scrollIntoViewIfNeeded({
-            behavior: "smooth",
-        });
         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();
+    };
+    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,
+                }));
+            }
+        });
+    };
+    const onArrowUp = () => {
+        selectedIcon = -1;
+        selectedItem--;
+        if (selectedItem < 0) {
+            focusOnLast();
+            return;
         }
-        this.focusOn(this.selectedItem);
-    }
-    onArrowRight() {
-        if (this.selectedItem === undefined) {
-            this.selectedItem = 0;
-            return this.focusOn(0);
+        focusOn(selectedItem);
+    };
+    const onArrowDown = () => {
+        selectedIcon = -1;
+        selectedItem++;
+        if (selectedItem === getElements().length) {
+            selectedItem = 0;
         }
-        const menuItems = this.getElements();
+        focusOn(selectedItem);
+    };
+    const onArrowRight = () => {
+        const menuItems = getElements();
         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);
+    };
+    const onArrowLeft = () => {
+        const menuItems = getElements();
         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/notifications/components/drawer/DrawerControls.js

@@ -1,11 +1,11 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { NotificationsContext } from "../../notificationsContext";
 import { ViewMode, SelectionMode } from "../../constants";
 import { markNotificationsRead, markNotificationsUnread, dismissNotification, snoozeNotifications, } from "../../../../hooks/useNotifications";
 import IconButton from "../shared/IconButton";
 const DrawerControls = () => {
     const notificationsContext = useContext(NotificationsContext);
-    const { viewMode, setViewMode, drawerControlProps, setDrawerControlProps, selectionMode, setSelectionMode, checkedNotifications, } = notificationsContext;
+    const { viewMode, setViewMode, drawerControlProps, setDrawerControlProps, selectionMode, isSelectAll, setSelectAll, setSelectionMode, checkedNotifications, setCheckedNotifications, } = notificationsContext;
     const toggleControl = (clickedControl) => {
         if (clickedControl.action === drawerControlProps.active)
             return;
@@ -32,22 +32,33 @@ const DrawerControls = () => {
     const toggleSelect = () => {
         setSelectionMode(selectionMode === SelectionMode.NO_SELECTION ? SelectionMode.SELECTION : SelectionMode.NO_SELECTION);
     };
+    const toggleSelectAll = () => {
+        if (isSelectAll) {
+            setCheckedNotifications([]);
+        }
+        setSelectAll(!isSelectAll);
+    };
     const readChecked = () => {
         markNotificationsRead(checkedNotifications);
-        setSelectionMode(SelectionMode.NO_SELECTION);
     };
     const unreadChecked = () => {
         markNotificationsUnread(checkedNotifications);
-        setSelectionMode(SelectionMode.NO_SELECTION);
     };
     const hideChecked = () => {
         dismissNotification(checkedNotifications);
-        setSelectionMode(SelectionMode.NO_SELECTION);
     };
     const snoozeChecked = () => {
         snoozeNotifications(checkedNotifications);
-        setSelectionMode(SelectionMode.NO_SELECTION);
     };
+    const isSelectionMode = selectionMode === SelectionMode.SELECTION;
+    const selectAllControlStyle = `notifications-center-controls__filter-btn ${isSelectAll ? "active" : ""} ${isSelectionMode ? "visible" : "invisible"}`;
+    const controlClassname = `notifications-center-controls__filter-btn ${isSelectionMode ? "visible" : "invisible"} ${checkedNotifications.length ? "enabled" : "disabled"}`;
+    useEffect(() => {
+        if (selectionMode === SelectionMode.NO_SELECTION) {
+            setSelectAll(false);
+            checkedNotifications.length = 0;
+        }
+    }, [selectionMode, checkedNotifications]);
     return (React.createElement("div", { id: "notifications-center-controls" },
         React.createElement("div", { className: "notifications-center-controls__row" }, renderControls()),
         React.createElement("div", { className: "notifications-center-controls__row" },
@@ -56,40 +67,43 @@ const DrawerControls = () => {
                         toggleSelect();
                     }
                 } },
-                React.createElement("i", { className: selectionMode === SelectionMode.NO_SELECTION ? "ff-check-mark" : "ff-close", style: {
-                        paddingRight: "5px",
-                        color: selectionMode === SelectionMode.NO_SELECTION ? "var(--accent-positive)" : "",
-                    } }),
+                React.createElement("i", { className: isSelectionMode ? "ff-close" : "ff-check-mark icon_active" }),
                 "Select"),
-            React.createElement("div", { className: "notifications-center-controls__filter-btn active", onClick: () => readChecked(), style: selectionMode === SelectionMode.SELECTION ? { visibility: "visible" } : { visibility: "hidden" }, tabIndex: 0, onKeyDown: (e) => {
+            React.createElement("div", { className: selectAllControlStyle, tabIndex: 0, onClick: () => toggleSelectAll(), onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        toggleSelectAll();
+                    }
+                } }, "Select All"),
+            React.createElement("div", { className: "notifications-center-controls__view_mode" },
+                React.createElement(IconButton, { iconName: "ff-chart-alt-2", classNames: viewMode === ViewMode.CARD ? "active" : "", clickHandler: () => {
+                        setSelectionMode(SelectionMode.NO_SELECTION);
+                        setViewMode(ViewMode.CARD);
+                    } }),
+                React.createElement(IconButton, { iconName: "ff-adp-hamburger", classNames: viewMode === ViewMode.LIST ? "active" : "", clickHandler: () => {
+                        setSelectionMode(SelectionMode.NO_SELECTION);
+                        setViewMode(ViewMode.LIST);
+                    } }))),
+        React.createElement("div", { className: "notifications-center-controls__row center" },
+            React.createElement("div", { className: controlClassname, onClick: () => readChecked(), tabIndex: 0, onKeyDown: (e) => {
                     if (e.key === "Enter") {
                         readChecked();
                     }
                 } }, "Mark Read"),
-            React.createElement("div", { className: "notifications-center-controls__filter-btn active", onClick: () => unreadChecked(), style: selectionMode === SelectionMode.SELECTION ? { visibility: "visible" } : { visibility: "hidden" }, tabIndex: 0, onKeyDown: (e) => {
+            React.createElement("div", { className: controlClassname, onClick: () => unreadChecked(), tabIndex: 0, onKeyDown: (e) => {
                     if (e.key === "Enter") {
                         unreadChecked();
                     }
                 } }, "Mark Unread"),
-            React.createElement("div", { className: "notifications-center-controls__filter-btn active", onClick: () => hideChecked(), tabIndex: 0, onKeyDown: (e) => {
+            React.createElement("div", { className: controlClassname, onClick: () => hideChecked(), tabIndex: 0, onKeyDown: (e) => {
                     if (e.key === "Enter") {
                         hideChecked();
                     }
-                }, style: selectionMode === SelectionMode.SELECTION ? { visibility: "visible" } : { visibility: "hidden" } }, "Hide"),
-            React.createElement("div", { className: "notifications-center-controls__filter-btn active", onClick: () => snoozeChecked(), tabIndex: 0, onKeyDown: (e) => {
+                } }, "Hide"),
+            React.createElement("div", { className: controlClassname, onClick: () => snoozeChecked(), tabIndex: 0, onKeyDown: (e) => {
                     if (e.key === "Enter") {
                         snoozeChecked();
                     }
-                }, style: selectionMode === SelectionMode.SELECTION ? { visibility: "visible" } : { visibility: "hidden" } }, "Snooze"),
-            React.createElement("div", { className: "notifications-center-controls__view_mode" },
-                React.createElement(IconButton, { iconName: "ff-chart-alt-2", classNames: viewMode === ViewMode.CARD ? "active" : "", clickHandler: () => {
-                        setSelectionMode(SelectionMode.NO_SELECTION);
-                        setViewMode(ViewMode.CARD);
-                    } }),
-                React.createElement(IconButton, { iconName: "ff-adp-hamburger", classNames: viewMode === ViewMode.LIST ? "active" : "", clickHandler: () => {
-                        setSelectionMode(SelectionMode.NO_SELECTION);
-                        setViewMode(ViewMode.LIST);
-                    } })))));
+                } }, "Snooze"))));
 };
 export default DrawerControls;
 //# sourceMappingURL=DrawerControls.js.map

package/react/components/notifications/components/drawer/DrawerControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerControls.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/drawer/DrawerControls.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext } from \"react\";\n\n// Context\nimport { NotificationsContext } from \"../../notificationsContext\";\n\n// Types & Constants\nimport { Control } from \"../../types\";\nimport { ViewMode, SelectionMode } from \"../../constants\";\n\n// Hooks\nimport {\n\tmarkNotificationsRead,\n\tmarkNotificationsUnread,\n\tdismissNotification,\n\tsnoozeNotifications,\n} from \"../../../../hooks/useNotifications\";\n\n// Components\nimport IconButton from \"../shared/IconButton\";\n\nconst DrawerControls: React.FunctionComponent = () => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\tconst {\n\t\tviewMode,\n\t\tsetViewMode,\n\t\tdrawerControlProps,\n\t\tsetDrawerControlProps,\n\t\tselectionMode,\n\t\tsetSelectionMode,\n\t\tcheckedNotifications,\n\t} = notificationsContext;\n\n\tconst toggleControl = (clickedControl: Control) => {\n\t\t// If we click on the control aready active, then there's nothing to toggle and we bail out.\n\t\tif (clickedControl.action === drawerControlProps.active) return;\n\t\tdrawerControlProps.controls.forEach((control: Control) => {\n\t\t\tif (control.action === clickedControl.action) {\n\t\t\t\tif (drawerControlProps.active === control.action) {\n\t\t\t\t\tdelete drawerControlProps.active;\n\t\t\t\t} else {\n\t\t\t\t\tdrawerControlProps.active = control.action;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tsetDrawerControlProps({ ...drawerControlProps });\n\t};\n\n\tconst renderControls = () => {\n\t\tlet className = \"notifications-center-controls__filter-btn\";\n\t\treturn drawerControlProps.controls.map((control: Control) => (\n\t\t\t<div\n\t\t\t\tkey={control.action}\n\t\t\t\tclassName={`${className} ${drawerControlProps.active === control.action ? \"active\" : \"\"}`}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabIndex={0}\n\t\t\t\tonClick={() => toggleControl(control)}\n\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\ttoggleControl(control);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { pointerEvents: \"none\", opacity: \"0.4\" } : {}}\n\t\t\t>\n\t\t\t\t{control.label}\n\t\t\t</div>\n\t\t));\n\t};\n\n\tconst toggleSelect = () => {\n\t\tsetSelectionMode(\n\t\t\tselectionMode === SelectionMode.NO_SELECTION ? SelectionMode.SELECTION : SelectionMode.NO_SELECTION\n\t\t);\n\t};\n\n\tconst readChecked = () => {\n\t\tmarkNotificationsRead(checkedNotifications);\n\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\n\t};\n\n\tconst unreadChecked = () => {\n\t\tmarkNotificationsUnread(checkedNotifications);\n\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\n\t};\n\n\tconst hideChecked = () => {\n\t\tdismissNotification(checkedNotifications);\n\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\n\t};\n\n\tconst snoozeChecked = () => {\n\t\tsnoozeNotifications(checkedNotifications);\n\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\n\t};\n\n\treturn (\n\t\t<div id=\"notifications-center-controls\">\n\t\t\t<div className=\"notifications-center-controls__row\">{renderControls()}</div>\n\t\t\t<div className=\"notifications-center-controls__row\">\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notifications-center-controls__filter-btn\"\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tonClick={() => toggleSelect()}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\t\ttoggleSelect();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<i\n\t\t\t\t\t\tclassName={selectionMode === SelectionMode.NO_SELECTION ? \"ff-check-mark\" : \"ff-close\"}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tpaddingRight: \"5px\",\n\t\t\t\t\t\t\tcolor: selectionMode === SelectionMode.NO_SELECTION ? \"var(--accent-positive)\" : \"\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\tSelect\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notifications-center-controls__filter-btn active\"\n\t\t\t\t\tonClick={() => readChecked()}\n\t\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { visibility: \"visible\" } : { visibility: \"hidden\" }}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\t\treadChecked();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tMark Read\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notifications-center-controls__filter-btn active\"\n\t\t\t\t\tonClick={() => unreadChecked()}\n\t\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { visibility: \"visible\" } : { visibility: \"hidden\" }}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\t\tunreadChecked();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tMark Unread\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notifications-center-controls__filter-btn active\"\n\t\t\t\t\tonClick={() => hideChecked()}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\t\thideChecked();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { visibility: \"visible\" } : { visibility: \"hidden\" }}\n\t\t\t\t>\n\t\t\t\t\tHide\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notifications-center-controls__filter-btn active\"\n\t\t\t\t\tonClick={() => snoozeChecked()}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\t\tsnoozeChecked();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { visibility: \"visible\" } : { visibility: \"hidden\" }}\n\t\t\t\t>\n\t\t\t\t\tSnooze\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"notifications-center-controls__view_mode\">\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\ticonName=\"ff-chart-alt-2\"\n\t\t\t\t\t\tclassNames={viewMode === ViewMode.CARD ? \"active\" : \"\"}\n\t\t\t\t\t\tclickHandler={() => {\n\t\t\t\t\t\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\n\t\t\t\t\t\t\tsetViewMode(ViewMode.CARD);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\ticonName=\"ff-adp-hamburger\"\n\t\t\t\t\t\tclassNames={viewMode === ViewMode.LIST ? \"active\" : \"\"}\n\t\t\t\t\t\tclickHandler={() => {\n\t\t\t\t\t\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\n\t\t\t\t\t\t\tsetViewMode(ViewMode.LIST);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default DrawerControls;\n"]}
+{"version":3,"file":"DrawerControls.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/drawer/DrawerControls.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect } from \"react\";\n\n// Context\nimport { NotificationsContext } from \"../../notificationsContext\";\n\n// Types & Constants\nimport { Control } from \"../../types\";\nimport { ViewMode, SelectionMode } from \"../../constants\";\n\n// Hooks\nimport {\n\tmarkNotificationsRead,\n\tmarkNotificationsUnread,\n\tdismissNotification,\n\tsnoozeNotifications,\n} from \"../../../../hooks/useNotifications\";\n\n// Components\nimport IconButton from \"../shared/IconButton\";\n\nconst DrawerControls: React.FunctionComponent = () => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\n\tconst {\n\t\tviewMode,\n\t\tsetViewMode,\n\t\tdrawerControlProps,\n\t\tsetDrawerControlProps,\n\t\tselectionMode,\n\t\tisSelectAll,\n\t\tsetSelectAll,\n\t\tsetSelectionMode,\n\t\tcheckedNotifications,\n\t\tsetCheckedNotifications,\n\t} = notificationsContext;\n\n\tconst toggleControl = (clickedControl: Control) => {\n\t\t// If we click on the control aready active, then there's nothing to toggle and we bail out.\n\t\tif (clickedControl.action === drawerControlProps.active) return;\n\t\tdrawerControlProps.controls.forEach((control: Control) => {\n\t\t\tif (control.action === clickedControl.action) {\n\t\t\t\tif (drawerControlProps.active === control.action) {\n\t\t\t\t\tdelete drawerControlProps.active;\n\t\t\t\t} else {\n\t\t\t\t\tdrawerControlProps.active = control.action;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tsetDrawerControlProps({ ...drawerControlProps });\n\t};\n\n\tconst renderControls = () => {\n\t\tlet className = \"notifications-center-controls__filter-btn\";\n\t\treturn drawerControlProps.controls.map((control: Control) => (\n\t\t\t<div\n\t\t\t\tkey={control.action}\n\t\t\t\tclassName={`${className} ${drawerControlProps.active === control.action ? \"active\" : \"\"}`}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabIndex={0}\n\t\t\t\tonClick={() => toggleControl(control)}\n\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\ttoggleControl(control);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { pointerEvents: \"none\", opacity: \"0.4\" } : {}}\n\t\t\t>\n\t\t\t\t{control.label}\n\t\t\t</div>\n\t\t));\n\t};\n\n\tconst toggleSelect = () => {\n\t\tsetSelectionMode(\n\t\t\tselectionMode === SelectionMode.NO_SELECTION ? SelectionMode.SELECTION : SelectionMode.NO_SELECTION\n\t\t);\n\t};\n\n\tconst toggleSelectAll = () => {\n\t\tif (isSelectAll) {\n\t\t\t// this variable is a toggle, therefore\n\t\t\t// if we are currently in select all mode\n\t\t\t// means we are about to unselect all (as in a batch action)\n\t\t\tsetCheckedNotifications([]);\n\t\t}\n\t\tsetSelectAll(!isSelectAll);\n\t};\n\n\tconst readChecked = () => {\n\t\tmarkNotificationsRead(checkedNotifications);\n\t};\n\n\tconst unreadChecked = () => {\n\t\tmarkNotificationsUnread(checkedNotifications);\n\t};\n\n\tconst hideChecked = () => {\n\t\tdismissNotification(checkedNotifications);\n\t};\n\n\tconst snoozeChecked = () => {\n\t\tsnoozeNotifications(checkedNotifications);\n\t};\n\n\tconst isSelectionMode = selectionMode === SelectionMode.SELECTION;\n\n\tconst selectAllControlStyle = `notifications-center-controls__filter-btn ${isSelectAll ? \"active\" : \"\"} ${\n\t\tisSelectionMode ? \"visible\" : \"invisible\"\n\t}`;\n\n\tconst controlClassname = `notifications-center-controls__filter-btn ${isSelectionMode ? \"visible\" : \"invisible\"} ${\n\t\tcheckedNotifications.length ? \"enabled\" : \"disabled\"\n\t}`;\n\n\tuseEffect(() => {\n\t\t// unchecks \"Select All\"\n\t\tif (selectionMode === SelectionMode.NO_SELECTION) {\n\t\t\tsetSelectAll(false);\n\t\t\tcheckedNotifications.length = 0;\n\t\t}\n\t}, [selectionMode, checkedNotifications]);\n\n\treturn (\n\t\t<div id=\"notifications-center-controls\">\n\t\t\t<div className=\"notifications-center-controls__row\">{renderControls()}</div>\n\t\t\t<div className=\"notifications-center-controls__row\">\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notifications-center-controls__filter-btn\"\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tonClick={() => toggleSelect()}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\t\ttoggleSelect();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<i className={isSelectionMode ? \"ff-close\" : \"ff-check-mark icon_active\"} />\n\t\t\t\t\tSelect\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={selectAllControlStyle}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tonClick={() => toggleSelectAll()}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\t\ttoggleSelectAll();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tSelect All\n\t\t\t\t</div>\n\t\t\t\t<div className=\"notifications-center-controls__view_mode\">\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\ticonName=\"ff-chart-alt-2\"\n\t\t\t\t\t\tclassNames={viewMode === ViewMode.CARD ? \"active\" : \"\"}\n\t\t\t\t\t\tclickHandler={() => {\n\t\t\t\t\t\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\n\t\t\t\t\t\t\tsetViewMode(ViewMode.CARD);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\ticonName=\"ff-adp-hamburger\"\n\t\t\t\t\t\tclassNames={viewMode === ViewMode.LIST ? \"active\" : \"\"}\n\t\t\t\t\t\tclickHandler={() => {\n\t\t\t\t\t\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\n\t\t\t\t\t\t\tsetViewMode(ViewMode.LIST);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"notifications-center-controls__row center\">\n\t\t\t\t<div\n\t\t\t\t\tclassName={controlClassname}\n\t\t\t\t\tonClick={() => readChecked()}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\t\treadChecked();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tMark Read\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={controlClassname}\n\t\t\t\t\tonClick={() => unreadChecked()}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\t\tunreadChecked();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tMark Unread\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={controlClassname}\n\t\t\t\t\tonClick={() => hideChecked()}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\t\thideChecked();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tHide\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tclassName={controlClassname}\n\t\t\t\t\tonClick={() => snoozeChecked()}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\t\tsnoozeChecked();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tSnooze\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default DrawerControls;\n"]}

package/react/components/notifications/components/notificationsCenter/NotificationsCenter.js

@@ -89,7 +89,7 @@ export const NotificationsCenter = (props) => {
     const poppedOutRef = useRef(false);
     const subscriptionMessageRef = useRef({});
     const applicationState = useRef(null);
-    const checkedNotifications = [];
+    const scrollContainer = useRef(null);
     const [searchString, setSearchString] = useState("");
     const [filteredNotifications, setFilteredNotifications] = useState([...notifications]);
     const [viewMode, setViewMode] = useState(ViewMode.CARD);
@@ -97,6 +97,8 @@ export const NotificationsCenter = (props) => {
     const [selectedNotification, setSelectedNotification] = useState(null);
     const [muteFilters, setMuteFilters] = useState([]);
     const [reloadMuteFilters, setReloadMuteFilters] = useState(true);
+    const [isSelectAll, setSelectAll] = useState(false);
+    const [checkedNotifications, setCheckedNotifications] = useState([]);
     const dcp = props.controls ? props.controls : defaultControls;
     const [drawerControlProps, setDrawerControlProps] = useState(dcp);
     const notificationsContextValues = {
@@ -112,9 +114,12 @@ export const NotificationsCenter = (props) => {
         setSearchString,
         filteredNotifications,
         checkedNotifications,
+        setCheckedNotifications,
         setFilteredNotifications,
         muteFilters,
         setMuteFilters,
+        isSelectAll,
+        setSelectAll,
     };
     const togglePoppedStatus = () => {
         const poppedOut = !uiState.poppedOut;
@@ -163,8 +168,9 @@ export const NotificationsCenter = (props) => {
         });
     };
     const getScrollPercentage = () => {
-        const maxScroll = document.body.scrollHeight;
-        const currentScroll = window.innerHeight + window.scrollY;
+        var _a, _b, _c, _d, _e, _f;
+        const maxScroll = ((_b = (_a = scrollContainer.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0) - ((_d = (_c = scrollContainer.current) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0);
+        const currentScroll = (_f = (_e = scrollContainer.current) === null || _e === void 0 ? void 0 : _e.scrollTop) !== null && _f !== void 0 ? _f : 0;
         return currentScroll / maxScroll;
     };
     const lazyLoadNextPage = async () => new Promise(async (resolve) => {
@@ -237,6 +243,7 @@ export const NotificationsCenter = (props) => {
         }
     };
     useEffect(() => {
+        var _a;
         setOpaqueClassName(!config.isTransparent);
         const subscriptionId = FSBL.Clients.RouterClient.subscribe("Finsemble.Application.State", (err, response) => {
             applicationState.current = response.data.state;
@@ -261,12 +268,13 @@ export const NotificationsCenter = (props) => {
         };
         finsembleWindow.addEventListener("close-requested", hide);
         finsembleWindow.addEventListener("bounds-change-end", boundsChangeListener);
-        window.addEventListener("scroll", scrollHandler);
+        (_a = scrollContainer.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", scrollHandler);
         return () => {
+            var _a;
             FSBL.Clients.RouterClient.unsubscribe(subscriptionId);
             finsembleWindow.removeEventListener("close-requested", hide);
             finsembleWindow.removeEventListener("bounds-change-end", boundsChangeListener);
-            window.removeEventListener("scroll", scrollHandler);
+            (_a = scrollContainer.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", scrollHandler);
         };
     }, []);
     useEffect(() => {
@@ -359,10 +367,15 @@ export const NotificationsCenter = (props) => {
             setReloadMuteFilters(false);
         });
     }, [reloadMuteFilters]);
+    useEffect(() => {
+        if (notifications.length > 0 && checkedNotifications.length === notifications.length) {
+            setSelectAll(true);
+        }
+    }, [checkedNotifications, notifications]);
     const notificationsMainView = () => (React.createElement(React.Fragment, null,
         React.createElement(DrawerHeader, { poppedOutStatus: uiState.poppedOut, popOutToggle: togglePoppedStatus }),
         React.createElement(DrawerControls, null),
-        React.createElement("div", { className: "cards-container" }, viewMode === ViewMode.CARD ? (React.createElement(CardView, { notifications: notifications, notificationCard: props.notificationCard })) : (React.createElement(ListView, { notifications: notifications, notificationHeaderRow: props.notificationHeaderRow, notificationListRow: props.notificationListRow })))));
+        React.createElement("div", { className: "cards-container", ref: scrollContainer }, viewMode === ViewMode.CARD ? (React.createElement(CardView, { notifications: notifications, notificationCard: props.notificationCard })) : (React.createElement(ListView, { notifications: notifications, notificationHeaderRow: props.notificationHeaderRow, notificationListRow: props.notificationListRow })))));
     const notificationDetailsViewComponent = () => React.createElement(NotificationDetailsView, { notification: selectedNotification });
     return (React.createElement(ConditionalWrapper, { condition: config.isTransparent && !uiState.poppedOut && !isMac, wrapper: (children) => (React.createElement(CSSTransition, { in: uiState.showCenter, timeout: 500, classNames: "drawer", unmountOnExit: true }, children)) },
         React.createElement(NotificationsContext.Provider, { value: notificationsContextValues },