@finsemble/finsemble-ui 1.0.0-beta-1 → 1.0.0-beta-3

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

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

package/react/components/notifications/components/NoNotifications.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
 declare const NoNotifications: React.FunctionComponent;
 export default NoNotifications;
+//# sourceMappingURL=NoNotifications.d.ts.map

package/react/components/notifications/components/NoNotifications.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoNotifications.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/notifications/components/NoNotifications.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,iBAI5B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/react/components/notifications/components/NoNotifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoNotifications.js","sourceRoot":"","sources":["../../../../src/components/notifications/components/NoNotifications.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,eAAe,GAA4B,GAAG,EAAE,CAAC,CACtD,6BAAK,SAAS,EAAC,kBAAkB;IAChC,6DAAkC,CAC7B,CACN,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import React from \"react\";\n\nconst NoNotifications: React.FunctionComponent = () => (\n\t<div className=\"no-notifications\">\n\t\t<p>No notifications to display</p>\n\t</div>\n);\n\nexport default NoNotifications;\n"]}
+{"version":3,"file":"NoNotifications.js","sourceRoot":"","sources":["../../../../../../src/ui/components/notifications/components/NoNotifications.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,eAAe,GAA4B,GAAG,EAAE,CAAC,CACtD,6BAAK,SAAS,EAAC,kBAAkB;IAChC,6DAAkC,CAC7B,CACN,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/react/components/notifications/components/drawer/Drawer.d.ts

@@ -5,3 +5,4 @@ interface Props {
 }
 declare const Drawer: React.FunctionComponent<Props>;
 export default Drawer;
+//# sourceMappingURL=Drawer.d.ts.map

package/react/components/notifications/components/drawer/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/notifications/components/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAI1C,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,GAAmC,CAAC,KAAY,EAAE,EAAE,CAAC,CAChE,6BAAK,EAAE,EAAC,QAAQ,EAAC,SAAS,EAAE,KAAK,CAAC,UAAU;IAC3C,6BAAK,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,QAAQ,CAAO,CACnD,CACN,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import React from \"react\";\n\ninterface Props {\n\tclassNames?: string;\n\tchildren?: React.ReactNode;\n}\n\nconst Drawer: React.FunctionComponent<Props> = (props: Props) => (\n\t<div id=\"drawer\" className={props.classNames}>\n\t\t<div className=\"drawer-container\">{props.children}</div>\n\t</div>\n);\n\nexport default Drawer;\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../../../../src/ui/components/notifications/components/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,GAAmC,CAAC,KAAY,EAAE,EAAE,CAAC,CAChE,6BAAK,EAAE,EAAC,QAAQ,EAAC,SAAS,EAAE,KAAK,CAAC,UAAU;IAC3C,6BAAK,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,QAAQ,CAAO,CACnD,CACN,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/react/components/notifications/components/drawer/DrawerControls.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
 declare const DrawerControls: React.FunctionComponent;
 export default DrawerControls;
+//# sourceMappingURL=DrawerControls.d.ts.map

package/react/components/notifications/components/drawer/DrawerControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerControls.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/notifications/components/drawer/DrawerControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAqBrD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,iBA6I3B,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -5,16 +5,18 @@ import { ViewMode, SelectionMode } from "../../constants";
 // Hooks
 import { markNotificationsRead, markNotificationsUnread, dismissNotification, snoozeNotifications, } from "../../../../hooks/useNotifications";
 // Components
-import IconButton from "../shared/IconButton";
+import { FinsembleToggleButtonBar } from "../../../common/FinsembleToggleButtonBar";
+import { Button } from "../../../common/Button";
 const DrawerControls = () => {
     const notificationsContext = useContext(NotificationsContext);
     const { viewMode, setViewMode, drawerControlProps, setDrawerControlProps, selectionMode, isSelectAll, setSelectAll, setSelectionMode, checkedNotifications, setCheckedNotifications, } = notificationsContext;
-    const toggleControl = (clickedControl) => {
+    const isSelectionMode = selectionMode === SelectionMode.SELECTION;
+    const toggleControl = (clickedControlAction) => {
         // If we click on the control aready active, then there's nothing to toggle and we bail out.
-        if (clickedControl.action === drawerControlProps.active)
+        if (clickedControlAction === drawerControlProps.active)
             return;
         drawerControlProps.controls.forEach((control) => {
-            if (control.action === clickedControl.action) {
+            if (control.action === clickedControlAction) {
                 if (drawerControlProps.active === control.action) {
                     delete drawerControlProps.active;
                 }
@@ -25,17 +27,12 @@ const DrawerControls = () => {
         });
         setDrawerControlProps(Object.assign({}, drawerControlProps));
     };
-    const renderControls = () => {
-        let className = "notifications-center-controls__filter-btn";
-        return drawerControlProps.controls.map((control) => (React.createElement("div", { key: control.action, className: `${className} ${drawerControlProps.active === control.action ? "active" : ""}`, role: "button", tabIndex: 0, onClick: () => toggleControl(control), onKeyDown: (e) => {
-                if (e.key === "Enter") {
-                    toggleControl(control);
-                }
-            }, style: selectionMode === SelectionMode.SELECTION ? { pointerEvents: "none", opacity: "0.4" } : {} }, control.label)));
-    };
-    const toggleSelect = () => {
-        setSelectionMode(selectionMode === SelectionMode.NO_SELECTION ? SelectionMode.SELECTION : SelectionMode.NO_SELECTION);
-    };
+    const renderControls = () => (React.createElement(FinsembleToggleButtonBar, { options: drawerControlProps.controls.map((control) => {
+            return {
+                label: control.label,
+                value: control.action,
+            };
+        }), selected: drawerControlProps.active, onChange: toggleControl, enabled: !isSelectionMode }));
     const toggleSelectAll = () => {
         if (isSelectAll) {
             // this variable is a toggle, therefore
@@ -57,9 +54,6 @@ const DrawerControls = () => {
     const snoozeChecked = () => {
         snoozeNotifications(checkedNotifications);
     };
-    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(() => {
         // unchecks "Select All"
         if (selectionMode === SelectionMode.NO_SELECTION) {
@@ -70,48 +64,29 @@ const DrawerControls = () => {
     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" },
-            React.createElement("div", { className: "notifications-center-controls__filter-btn", tabIndex: 0, onClick: () => toggleSelect(), onKeyDown: (e) => {
-                    if (e.key === "Enter") {
-                        toggleSelect();
-                    }
-                } },
-                React.createElement("i", { className: isSelectionMode ? "ff-close" : "ff-check-mark icon_active" }),
-                "Select"),
-            React.createElement("div", { className: selectAllControlStyle, tabIndex: 0, onClick: () => toggleSelectAll(), onKeyDown: (e) => {
-                    if (e.key === "Enter") {
-                        toggleSelectAll();
-                    }
-                } }, "Select All"),
+            React.createElement(Button, { fashion: "primary", iconBefore: isSelectionMode ? "close" : "check", text: "Select", onClick: () => {
+                    setSelectionMode(selectionMode === SelectionMode.NO_SELECTION ? SelectionMode.SELECTION : SelectionMode.NO_SELECTION);
+                } }),
+            isSelectionMode && React.createElement(Button, { fashion: "primary", text: "Select All", onClick: toggleSelectAll }),
             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: () => {
+                React.createElement(FinsembleToggleButtonBar, { options: [
+                        {
+                            label: React.createElement("i", { className: "ff-chart-alt-2" }),
+                            value: ViewMode.CARD,
+                        },
+                        {
+                            label: React.createElement("i", { className: "ff-adp-hamburger" }),
+                            value: ViewMode.LIST,
+                        },
+                    ], onChange: (newValue) => {
                         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: controlClassname, onClick: () => unreadChecked(), tabIndex: 0, onKeyDown: (e) => {
-                    if (e.key === "Enter") {
-                        unreadChecked();
-                    }
-                } }, "Mark Unread"),
-            React.createElement("div", { className: controlClassname, onClick: () => hideChecked(), tabIndex: 0, onKeyDown: (e) => {
-                    if (e.key === "Enter") {
-                        hideChecked();
-                    }
-                } }, "Hide"),
-            React.createElement("div", { className: controlClassname, onClick: () => snoozeChecked(), tabIndex: 0, onKeyDown: (e) => {
-                    if (e.key === "Enter") {
-                        snoozeChecked();
-                    }
-                } }, "Snooze"))));
+                        setViewMode(newValue);
+                    }, selected: viewMode }))),
+        isSelectionMode && (React.createElement("div", { className: "notifications-center-controls__row center" },
+            React.createElement(Button, { fashion: "primary", text: "Mark Read", onClick: readChecked, disabled: checkedNotifications.length === 0 }),
+            React.createElement(Button, { fashion: "primary", text: "Mark Unread", onClick: unreadChecked, disabled: checkedNotifications.length === 0 }),
+            React.createElement(Button, { fashion: "primary", text: "Hide", onClick: hideChecked, disabled: checkedNotifications.length === 0 }),
+            React.createElement(Button, { fashion: "primary", text: "Snooze", onClick: snoozeChecked, disabled: checkedNotifications.length === 0 })))));
 };
 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, 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"]}
+{"version":3,"file":"DrawerControls.js","sourceRoot":"","sources":["../../../../../../../src/ui/components/notifications/components/drawer/DrawerControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,UAAU;AACV,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAIlE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE1D,QAAQ;AACR,OAAO,EACN,qBAAqB,EACrB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,GACnB,MAAM,oCAAoC,CAAC;AAE5C,aAAa;AACb,OAAO,EAAE,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,MAAM,cAAc,GAA4B,GAAG,EAAE;IACpD,MAAM,oBAAoB,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAE9D,MAAM,EACL,QAAQ,EACR,WAAW,EACX,kBAAkB,EAClB,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,uBAAuB,GACvB,GAAG,oBAAoB,CAAC;IAEzB,MAAM,eAAe,GAAG,aAAa,KAAK,aAAa,CAAC,SAAS,CAAC;IAElE,MAAM,aAAa,GAAG,CAAC,oBAAuC,EAAE,EAAE;QACjE,4FAA4F;QAC5F,IAAI,oBAAoB,KAAK,kBAAkB,CAAC,MAAM;YAAE,OAAO;QAC/D,kBAAkB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAgB,EAAE,EAAE;YACxD,IAAI,OAAO,CAAC,MAAM,KAAK,oBAAoB,EAAE;gBAC5C,IAAI,kBAAkB,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE;oBACjD,OAAO,kBAAkB,CAAC,MAAM,CAAC;iBACjC;qBAAM;oBACN,kBAAkB,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;iBAC3C;aACD;QACF,CAAC,CAAC,CAAC;QACH,qBAAqB,mBAAM,kBAAkB,EAAG,CAAC;IAClD,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,CAC5B,oBAAC,wBAAwB,IACxB,OAAO,EAAE,kBAAkB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAgB,EAAE,EAAE;YAC7D,OAAO;gBACN,KAAK,EAAE,OAAO,CAAC,KAAK;gBACpB,KAAK,EAAE,OAAO,CAAC,MAAM;aACrB,CAAC;QACH,CAAC,CAAC,EACF,QAAQ,EAAE,kBAAkB,CAAC,MAAM,EACnC,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,CAAC,eAAe,GACxB,CACF,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,EAAE;QAC5B,IAAI,WAAW,EAAE;YAChB,uCAAuC;YACvC,yCAAyC;YACzC,4DAA4D;YAC5D,uBAAuB,CAAC,EAAE,CAAC,CAAC;SAC5B;QACD,YAAY,CAAC,CAAC,WAAW,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACxB,qBAAqB,CAAC,oBAAoB,CAAC,CAAC;IAC7C,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QAC1B,uBAAuB,CAAC,oBAAoB,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACxB,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QAC1B,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,wBAAwB;QACxB,IAAI,aAAa,KAAK,aAAa,CAAC,YAAY,EAAE;YACjD,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,oBAAoB,CAAC,MAAM,GAAG,CAAC,CAAC;SAChC;IACF,CAAC,EAAE,CAAC,aAAa,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE1C,OAAO,CACN,6BAAK,EAAE,EAAC,+BAA+B;QACtC,6BAAK,SAAS,EAAC,oCAAoC,IAAE,cAAc,EAAE,CAAO;QAC5E,6BAAK,SAAS,EAAC,oCAAoC;YAClD,oBAAC,MAAM,IACN,OAAO,EAAC,SAAS,EACjB,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAC/C,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE;oBACb,gBAAgB,CACf,aAAa,KAAK,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CACnG,CAAC;gBACH,CAAC,GACA;YACD,eAAe,IAAI,oBAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,eAAe,GAAI;YAC5F,6BAAK,SAAS,EAAC,0CAA0C;gBACxD,oBAAC,wBAAwB,IACxB,OAAO,EAAE;wBACR;4BACC,KAAK,EAAE,2BAAG,SAAS,EAAC,gBAAgB,GAAG;4BACvC,KAAK,EAAE,QAAQ,CAAC,IAAI;yBACpB;wBACD;4BACC,KAAK,EAAE,2BAAG,SAAS,EAAC,kBAAkB,GAAG;4BACzC,KAAK,EAAE,QAAQ,CAAC,IAAI;yBACpB;qBACD,EACD,QAAQ,EAAE,CAAC,QAAkB,EAAE,EAAE;wBAChC,gBAAgB,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;wBAC7C,WAAW,CAAC,QAAQ,CAAC,CAAC;oBACvB,CAAC,EACD,QAAQ,EAAE,QAAQ,GACjB,CACG,CACD;QACL,eAAe,IAAI,CACnB,6BAAK,SAAS,EAAC,2CAA2C;YACzD,oBAAC,MAAM,IACN,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,oBAAoB,CAAC,MAAM,KAAK,CAAC,GAC1C;YACF,oBAAC,MAAM,IACN,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,oBAAoB,CAAC,MAAM,KAAK,CAAC,GAC1C;YACF,oBAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,oBAAoB,CAAC,MAAM,KAAK,CAAC,GAAI;YAC3G,oBAAC,MAAM,IACN,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,oBAAoB,CAAC,MAAM,KAAK,CAAC,GAC1C,CACG,CACN,CACI,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/react/components/notifications/components/drawer/DrawerHeader.d.ts

@@ -4,3 +4,4 @@ declare const DrawerHeader: React.FunctionComponent<{
     popOutToggle: Function;
 }>;
 export default DrawerHeader;
+//# sourceMappingURL=DrawerHeader.d.ts.map

package/react/components/notifications/components/drawer/DrawerHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/notifications/components/drawer/DrawerHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AA8C5D,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAC3C,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,QAAQ,CAAC;CACvB,CAoEA,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/react/components/notifications/components/drawer/DrawerHeader.js

@@ -5,12 +5,13 @@ import { useNotificationUI } from "../../../../hooks/useNotifications";
 // Components
 import IconButton from "../shared/IconButton";
 import { NotificationsContext } from "../../notificationsContext";
+import { FEAGlobals } from "../../../../../common/Globals";
 const NotificationsCenterMenu = ({ poppedOutStatus, popOutToggle }) => {
     const goToSettings = () => {
-        FSBL.Clients.RouterClient.transmit("FinsembleUserPreferencesChannel", {
+        FEAGlobals.FSBL.Clients.RouterClient.transmit("FinsembleUserPreferencesChannel", {
             preferencesTab: "Notifications",
         });
-        FSBL.Clients.LauncherClient.showWindow({
+        FEAGlobals.FSBL.Clients.LauncherClient.showWindow({
             componentType: "UserPreferences",
         }, {
             monitor: "mine",
@@ -18,12 +19,12 @@ const NotificationsCenterMenu = ({ poppedOutStatus, popOutToggle }) => {
             top: "center",
         });
     };
-    return (React.createElement("div", { className: "overflow-menu__container" },
-        React.createElement("div", { className: "overflow-menu__action", onClick: popOutToggle },
+    return (React.createElement("div", { className: "context-menu__container" },
+        React.createElement("div", { className: "context-menu__action", onClick: popOutToggle },
             React.createElement("div", { className: "finsemble-icon" },
                 React.createElement("i", { className: `ff-${poppedOutStatus ? "share" : "chat-popout"}` })),
             React.createElement("span", { className: "btn-label" }, poppedOutStatus ? "Pop-in" : "Pop-out")),
-        React.createElement("div", { className: "overflow-menu__action", onClick: goToSettings },
+        React.createElement("div", { className: "context-menu__action", onClick: goToSettings },
             React.createElement("div", { className: "finsemble-icon" },
                 React.createElement("i", { className: "ff-settings" })),
             React.createElement("span", { className: "btn-label" }, "Settings"))));

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerHeader.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/drawer/DrawerHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useRef, useContext } from \"react\";\nimport debounce from \"lodash/debounce\";\n\n// Hooks\nimport { useNotificationUI } from \"../../../../hooks/useNotifications\";\n\n// Components\nimport IconButton from \"../shared/IconButton\";\nimport { NotificationsContext } from \"../../notificationsContext\";\n\nconst NotificationsCenterMenu = ({ poppedOutStatus, popOutToggle }: any) => {\n\tconst goToSettings = () => {\n\t\tFSBL.Clients.RouterClient.transmit(\"FinsembleUserPreferencesChannel\", {\n\t\t\tpreferencesTab: \"Notifications\",\n\t\t});\n\t\tFSBL.Clients.LauncherClient.showWindow(\n\t\t\t{\n\t\t\t\tcomponentType: \"UserPreferences\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tmonitor: \"mine\",\n\t\t\t\tleft: \"center\",\n\t\t\t\ttop: \"center\",\n\t\t\t}\n\t\t);\n\t};\n\n\treturn (\n\t\t<div className=\"overflow-menu__container\">\n\t\t\t<div className=\"overflow-menu__action\" onClick={popOutToggle}>\n\t\t\t\t<div className=\"finsemble-icon\">\n\t\t\t\t\t<i className={`ff-${poppedOutStatus ? \"share\" : \"chat-popout\"}`} />\n\t\t\t\t</div>\n\t\t\t\t<span className=\"btn-label\">{poppedOutStatus ? \"Pop-in\" : \"Pop-out\"}</span>\n\t\t\t</div>\n\t\t\t<div className=\"overflow-menu__action\" onClick={goToSettings}>\n\t\t\t\t<div className=\"finsemble-icon\">\n\t\t\t\t\t<i className=\"ff-settings\" />\n\t\t\t\t</div>\n\t\t\t\t<span className=\"btn-label\">Settings</span>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nconst DrawerHeader: React.FunctionComponent<{\n\tpoppedOutStatus: boolean;\n\tpopOutToggle: Function;\n}> = ({ poppedOutStatus, popOutToggle }) => {\n\tconst [uiState, setUIState] = useNotificationUI();\n\tconst notificationsContext = useContext(NotificationsContext);\n\tconst { searchString, setSearchString } = notificationsContext;\n\n\tconst [searchInputValue, setSearchInputValue] = useState(searchString);\n\n\tconst [showMenu, setShowMenu] = useState(false);\n\n\tconst closeDrawerClick = () => {\n\t\tsetUIState({\n\t\t\t...uiState,\n\t\t\tshowCenter: false,\n\t\t});\n\t};\n\n\tconst toggleMenu = () => {\n\t\tsetShowMenu(!showMenu);\n\t};\n\n\t// This is unchanged across renders\n\tconst handleSearchTerm = useRef(\n\t\tdebounce((nextValue: string) => {\n\t\t\tconst regex = /^(title|details|source):/gi;\n\t\t\tnextValue = nextValue.trim();\n\n\t\t\tconst isFilter = regex.test(nextValue);\n\t\t\tlet parsedSearchTerm = \"\";\n\n\t\t\tif (isFilter) {\n\t\t\t\tparsedSearchTerm = nextValue.split(\":\")[1].trim();\n\t\t\t} else {\n\t\t\t\tparsedSearchTerm = nextValue;\n\t\t\t}\n\n\t\t\tif (parsedSearchTerm.length > 2) {\n\t\t\t\tsetSearchString(nextValue);\n\t\t\t} else {\n\t\t\t\tconsole.log(\"search string is too short\");\n\t\t\t\tsetSearchString(\"\");\n\t\t\t}\n\t\t}, 400)\n\t).current;\n\n\tconst handleChange = (ev: any) => {\n\t\tconst { value: nextValue } = ev.target;\n\t\tsetSearchInputValue(nextValue);\n\t\t// Even though handleChange is created on each render and executed\n\t\t// it references the same handleSearchTerm that was created initially\n\t\thandleSearchTerm(nextValue);\n\t};\n\n\treturn (\n\t\t<div id=\"notifications-center__header\">\n\t\t\t<IconButton iconName=\"ff-search\" classNames=\"no-hover\" />\n\t\t\t<input\n\t\t\t\tclassName=\"search-notifications__input\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tplaceholder={\"Search Notifications\"}\n\t\t\t\tvalue={searchInputValue}\n\t\t\t\tonChange={handleChange}\n\t\t\t/>\n\t\t\t<IconButton iconName=\"ff-dots-vert\" tooltip=\"Options\" classNames=\"center-menu\" clickHandler={() => toggleMenu()}>\n\t\t\t\t{showMenu ? <NotificationsCenterMenu poppedOutStatus={poppedOutStatus} popOutToggle={popOutToggle} /> : null}\n\t\t\t</IconButton>\n\t\t\t<IconButton iconName=\"ff-adp-chevron-right\" clickHandler={() => closeDrawerClick()} />\n\t\t</div>\n\t);\n};\n\nexport default DrawerHeader;\n"]}
+{"version":3,"file":"DrawerHeader.js","sourceRoot":"","sources":["../../../../../../../src/ui/components/notifications/components/drawer/DrawerHeader.tsx"],"names":[],"mappings":"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"}

package/react/components/notifications/components/notificationsCenter/NotificationsCenter.d.ts

@@ -2,3 +2,4 @@ import React from "react";
 import "../../../../assets/css/notificationsCenter.css";
 import { INotificationCenterProps } from "../../types";
 export declare const NotificationsCenter: React.FunctionComponent<INotificationCenterProps>;
+//# sourceMappingURL=NotificationsCenter.d.ts.map

package/react/components/notifications/components/notificationsCenter/NotificationsCenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsCenter.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/notifications/components/notificationsCenter/NotificationsCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,gDAAgD,CAAC;AAgBxD,OAAO,EAAE,wBAAwB,EAA6D,MAAM,aAAa,CAAC;AAyFlH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,CAAC,wBAAwB,CAiYjF,CAAC"}

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

@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
-import { CSSTransition } from "react-transition-group";
+import { useTitle } from "../../../../hooks/useTitle";
 import ConditionalWrapper from "../../../shared/ConditionalWrapper";
 import { ViewMode, SelectionMode } from "../../constants";
 import "../../../../assets/css/notificationsCenter.css";
+import { CSSTransition } from "react-transition-group";
 // Hooks
 import useNotifications, { useNotificationUI, getNotificationConfig, moveToToolbarMonitor, getOS, getFetchHistoryParams, } from "../../../../hooks/useNotifications";
 // Context
@@ -14,10 +15,7 @@ import DrawerControls from "../drawer/DrawerControls";
 import DrawerHeader from "../drawer/DrawerHeader";
 import ListView from "../views/ListView";
 import NotificationDetailsView from "../views/NotificationDetailsView";
-import FloatingFocus from "@q42/floating-focus-a11y";
-// The package FloatingFocus injects a focus indicator that moves around the page, but only for
-// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.
-new FloatingFocus();
+import { FEAGlobals } from "../../../../../common/Globals";
 const defaultControls = {
     controls: [
         {
@@ -44,17 +42,17 @@ const defaultControls = {
     active: "all",
 };
 const addPoppedInClasses = () => {
-    var _a, _b;
-    (_a = document.getElementById("notifications-center-container")) === null || _a === void 0 ? void 0 : _a.classList.add("notifications-popped-in");
-    (_b = document.getElementById("FSBLHeader")) === null || _b === void 0 ? void 0 : _b.classList.add("notifications-popped-in");
+    var _a;
+    document.body.classList.add("notifications-popped-in");
+    (_a = document.getElementById("FSBLHeader")) === null || _a === void 0 ? void 0 : _a.classList.add("notifications-popped-in");
 };
 const removePoppedInClasses = () => {
-    var _a, _b;
-    (_a = document.getElementById("notifications-center-container")) === null || _a === void 0 ? void 0 : _a.classList.remove("notifications-popped-in");
-    (_b = document.getElementById("FSBLHeader")) === null || _b === void 0 ? void 0 : _b.classList.remove("notifications-popped-in");
+    var _a;
+    document.body.classList.remove("notifications-popped-in");
+    (_a = document.getElementById("FSBLHeader")) === null || _a === void 0 ? void 0 : _a.classList.remove("notifications-popped-in");
 };
 const storeNotificationsCenterWindowPosition = ({ showCenter, poppedOut, position }) => {
-    FSBL.Clients.StorageClient.save({
+    FEAGlobals.FSBL.Clients.StorageClient.save({
         topic: "finsemble.notifications",
         key: "last.position",
         value: {
@@ -66,15 +64,15 @@ const storeNotificationsCenterWindowPosition = ({ showCenter, poppedOut, positio
 };
 const setShowWindowForState = (centerState) => {
     if (centerState.showCenter) {
-        finsembleWindow.show({}, () => {
-            finsembleWindow.bringToFront();
+        FEAGlobals.finsembleWindow.show({}, () => {
+            FEAGlobals.finsembleWindow.bringToFront();
         });
     }
     if (centerState.position) {
-        finsembleWindow.setBounds(centerState.position);
+        FEAGlobals.finsembleWindow.setBounds(centerState.position);
     }
     // Always on top when popped in
-    FSBL.Clients.WindowClient.setAlwaysOnTop(!centerState.poppedOut);
+    FEAGlobals.FSBL.Clients.WindowClient.setAlwaysOnTop(!centerState.poppedOut);
     storeNotificationsCenterWindowPosition(centerState);
 };
 const isValidPosition = (bounds) => bounds &&
@@ -85,13 +83,14 @@ const isValidPosition = (bounds) => bounds &&
 const LAZY_LOAD_NO_MORE_PAGES = -1;
 export const NotificationsCenter = (props) => {
     const params = { config: { notificationsHistory: { options: { pageSize: 10 } } } };
+    const { title } = props;
     const { notifications, setOpaqueClassName, addNotification } = useNotifications(params);
     const [uiState, setUIState] = useNotificationUI();
     const config = getNotificationConfig();
     const [isInitialized, setInitialized] = useState(false);
     const [isMac] = useState(getOS() === "Mac");
     const nextPageToFetch = useRef(1);
-    // Set up references for use in callbacks to FSBL functions
+    // Set up references for use in callbacks to FEAGlobals.FSBL functions
     const showCenterRef = useRef(false);
     const poppedOutRef = useRef(false);
     const subscriptionMessageRef = useRef({});
@@ -136,13 +135,13 @@ export const NotificationsCenter = (props) => {
     const setFullHeight = async (monitorInfo) => {
         if (!monitorInfo) {
             await new Promise((resolve) => {
-                finsembleWindow.getMonitor((monitor) => {
+                FEAGlobals.finsembleWindow.getMonitor((monitor) => {
                     monitorInfo = monitor;
                     resolve();
                 });
             });
         }
-        const { data } = await finsembleWindow.getBounds();
+        const { data } = await FEAGlobals.finsembleWindow.getBounds();
         if (data) {
             const centerWindowPosition = {
                 left: monitorInfo.availableRect.right - data.width,
@@ -155,7 +154,7 @@ export const NotificationsCenter = (props) => {
                 poppedOut: poppedOutRef.current,
                 position: centerWindowPosition,
             });
-            finsembleWindow.setShape([]);
+            FEAGlobals.finsembleWindow.setShape([]);
         }
     };
     const boundsChangeListener = (event) => {
@@ -186,7 +185,7 @@ export const NotificationsCenter = (props) => {
         if (nextPageToFetch.current > 0) {
             const [options, filter] = getFetchHistoryParams(config, params);
             options.pageNumber = nextPageToFetch.current;
-            const notificationList = await FSBL.Clients.NotificationClient.fetchHistory(options, filter);
+            const notificationList = await FEAGlobals.FSBL.Clients.NotificationClient.fetchHistory(options, filter);
             if (notificationList.length) {
                 nextPageToFetch.current = nextPageToFetch.current + 1;
                 for (const notification of notificationList) {
@@ -204,27 +203,27 @@ export const NotificationsCenter = (props) => {
         if (isTransparent && !isMac) {
             if (poppedOut) {
                 if (show) {
-                    finsembleWindow.show({}, () => {
-                        finsembleWindow.bringToFront();
-                        finsembleWindow.setShape([]);
+                    FEAGlobals.finsembleWindow.show({}, () => {
+                        FEAGlobals.finsembleWindow.bringToFront();
+                        FEAGlobals.finsembleWindow.setShape([]);
                     });
                 }
                 else {
-                    finsembleWindow.hide();
+                    FEAGlobals.finsembleWindow.hide();
                 }
             }
             else {
                 if (show) {
                     await moveToToolbarMonitor();
                     await setFullHeight();
-                    finsembleWindow.show({}, () => {
-                        finsembleWindow.bringToFront();
-                        finsembleWindow.setShape([]);
+                    FEAGlobals.finsembleWindow.show({}, () => {
+                        FEAGlobals.finsembleWindow.bringToFront();
+                        FEAGlobals.finsembleWindow.setShape([]);
                     });
                 }
                 else {
                     setTimeout(() => {
-                        finsembleWindow.setShape([
+                        FEAGlobals.finsembleWindow.setShape([
                             {
                                 x: 0,
                                 y: 0,
@@ -232,7 +231,7 @@ export const NotificationsCenter = (props) => {
                                 height: 1,
                             },
                         ]);
-                        finsembleWindow.hide();
+                        FEAGlobals.finsembleWindow.hide();
                     }, 500);
                 }
             }
@@ -243,20 +242,25 @@ export const NotificationsCenter = (props) => {
                     await moveToToolbarMonitor();
                     await setFullHeight();
                 }
-                finsembleWindow.show({}, () => {
-                    finsembleWindow.bringToFront();
+                FEAGlobals.finsembleWindow.show({}, () => {
+                    FEAGlobals.finsembleWindow.bringToFront();
                 });
             }
             else {
-                finsembleWindow.hide();
+                FEAGlobals.finsembleWindow.hide();
             }
         }
     };
+    useTitle(title !== null && title !== void 0 ? title : "Notification Center");
+    // Add styles to the notification center window's body.
+    useEffect(() => {
+        document.body.classList.add("notifications-center-body");
+    }, []);
     // When popped out we want to prevent the center to be closed when the close button is clicked (or alt +)
     useEffect(() => {
         var _a;
         setOpaqueClassName(!config.isTransparent);
-        const subscriptionId = FSBL.Clients.RouterClient.subscribe("Finsemble.Application.State", (err, response) => {
+        const subscriptionId = FEAGlobals.FSBL.Clients.RouterClient.subscribe("Finsemble.Application.State", (err, response) => {
             applicationState.current = response.data.state;
         });
         const hide = (event) => {
@@ -268,7 +272,7 @@ export const NotificationsCenter = (props) => {
                     event.cancel();
                 }
                 catch (error) {
-                    FSBL.Clients.Logger.system.error("Error cancelling the window close event", error);
+                    FEAGlobals.FSBL.Clients.Logger.system.error("Error cancelling the window close event", error);
                 }
             }
         };
@@ -277,14 +281,14 @@ export const NotificationsCenter = (props) => {
                 lazyLoadNextPage();
             }
         };
-        finsembleWindow.addEventListener("close-requested", hide);
-        finsembleWindow.addEventListener("bounds-change-end", boundsChangeListener);
+        FEAGlobals.finsembleWindow.addEventListener("close-requested", hide);
+        FEAGlobals.finsembleWindow.addEventListener("bounds-change-end", boundsChangeListener);
         (_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);
+            FEAGlobals.FSBL.Clients.RouterClient.unsubscribe(subscriptionId);
+            FEAGlobals.finsembleWindow.removeEventListener("close-requested", hide);
+            FEAGlobals.finsembleWindow.removeEventListener("bounds-change-end", boundsChangeListener);
             (_a = scrollContainer.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", scrollHandler);
         };
     }, []);
@@ -326,9 +330,9 @@ export const NotificationsCenter = (props) => {
     useEffect(() => {
         if (isInitialized) {
             poppedOutRef.current = uiState.poppedOut;
-            finsembleWindow.getMonitor(async (monitorInfo) => {
+            FEAGlobals.finsembleWindow.getMonitor(async (monitorInfo) => {
                 if (uiState.poppedOut) {
-                    const { data } = await finsembleWindow.getBounds();
+                    const { data } = await FEAGlobals.finsembleWindow.getBounds();
                     removePoppedInClasses();
                     if (data) {
                         const centerWindowPosition = {
@@ -364,20 +368,21 @@ export const NotificationsCenter = (props) => {
         function listenMuteStateChanged(error) {
             if (error) {
                 console.error("FinsembleNotificationsMuteStateChannel: ", error);
+                FEAGlobals.FSBL.Clients.Logger.system.error("FinsembleNotificationsMuteStateChannel: ", error);
             }
             else {
                 setReloadMuteFilters(true);
             }
         }
-        FSBL.Clients.RouterClient.addListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
         return () => {
-            FSBL.Clients.RouterClient.removeListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
         };
     }, []);
     // Sets the current active mute filters
     useEffect(() => {
         async function loadMuteFilter() {
-            return await FSBL.Clients.NotificationClient.getMuteFilters();
+            return await FEAGlobals.FSBL.Clients.NotificationClient.getMuteFilters();
         }
         loadMuteFilter().then((loadedMuteFilters) => {
             setMuteFilters(loadedMuteFilters);