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

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

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

package/react/components/menu/menuContext.js

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

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

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

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

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

package/react/components/menu/menuHelpers.js

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

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

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

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

@@ -1,12 +1,16 @@
 import React, { useContext, useEffect } from "react";
+// Context
 import { NotificationsContext } from "../../notificationsContext";
 import { ViewMode, SelectionMode } from "../../constants";
+// Hooks
 import { markNotificationsRead, markNotificationsUnread, dismissNotification, snoozeNotifications, } from "../../../../hooks/useNotifications";
+// Components
 import IconButton from "../shared/IconButton";
 const DrawerControls = () => {
     const notificationsContext = useContext(NotificationsContext);
     const { viewMode, setViewMode, drawerControlProps, setDrawerControlProps, selectionMode, isSelectAll, setSelectAll, setSelectionMode, checkedNotifications, setCheckedNotifications, } = notificationsContext;
     const toggleControl = (clickedControl) => {
+        // If we click on the control aready active, then there's nothing to toggle and we bail out.
         if (clickedControl.action === drawerControlProps.active)
             return;
         drawerControlProps.controls.forEach((control) => {
@@ -34,6 +38,9 @@ const DrawerControls = () => {
     };
     const toggleSelectAll = () => {
         if (isSelectAll) {
+            // this variable is a toggle, therefore
+            // if we are currently in select all mode
+            // means we are about to unselect all (as in a batch action)
             setCheckedNotifications([]);
         }
         setSelectAll(!isSelectAll);
@@ -54,6 +61,7 @@ const DrawerControls = () => {
     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) {
             setSelectAll(false);
             checkedNotifications.length = 0;

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/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/drawer/DrawerHeader.js

@@ -1,6 +1,8 @@
 import React, { useState, useRef, useContext } from "react";
 import debounce from "lodash/debounce";
+// Hooks
 import { useNotificationUI } from "../../../../hooks/useNotifications";
+// Components
 import IconButton from "../shared/IconButton";
 import { NotificationsContext } from "../../notificationsContext";
 const NotificationsCenterMenu = ({ poppedOutStatus, popOutToggle }) => {
@@ -38,6 +40,7 @@ const DrawerHeader = ({ poppedOutStatus, popOutToggle }) => {
     const toggleMenu = () => {
         setShowMenu(!showMenu);
     };
+    // This is unchanged across renders
     const handleSearchTerm = useRef(debounce((nextValue) => {
         const regex = /^(title|details|source):/gi;
         nextValue = nextValue.trim();
@@ -60,6 +63,8 @@ const DrawerHeader = ({ poppedOutStatus, popOutToggle }) => {
     const handleChange = (ev) => {
         const { value: nextValue } = ev.target;
         setSearchInputValue(nextValue);
+        // Even though handleChange is created on each render and executed
+        // it references the same handleSearchTerm that was created initially
         handleSearchTerm(nextValue);
     };
     return (React.createElement("div", { id: "notifications-center__header" },

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/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"]}

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

@@ -3,8 +3,11 @@ import { CSSTransition } from "react-transition-group";
 import ConditionalWrapper from "../../../shared/ConditionalWrapper";
 import { ViewMode, SelectionMode } from "../../constants";
 import "../../../../assets/css/notificationsCenter.css";
+// Hooks
 import useNotifications, { useNotificationUI, getNotificationConfig, moveToToolbarMonitor, getOS, getFetchHistoryParams, } from "../../../../hooks/useNotifications";
+// Context
 import { NotificationsContext } from "../../notificationsContext";
+// Components
 import CardView from "../views/CardView";
 import Drawer from "../drawer/Drawer";
 import DrawerControls from "../drawer/DrawerControls";
@@ -12,6 +15,8 @@ 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();
 const defaultControls = {
     controls: [
@@ -68,6 +73,7 @@ const setShowWindowForState = (centerState) => {
     if (centerState.position) {
         finsembleWindow.setBounds(centerState.position);
     }
+    // Always on top when popped in
     FSBL.Clients.WindowClient.setAlwaysOnTop(!centerState.poppedOut);
     storeNotificationsCenterWindowPosition(centerState);
 };
@@ -85,6 +91,7 @@ export const NotificationsCenter = (props) => {
     const [isInitialized, setInitialized] = useState(false);
     const [isMac] = useState(getOS() === "Mac");
     const nextPageToFetch = useRef(1);
+    // Set up references for use in callbacks to FSBL functions
     const showCenterRef = useRef(false);
     const poppedOutRef = useRef(false);
     const subscriptionMessageRef = useRef({});
@@ -153,6 +160,7 @@ export const NotificationsCenter = (props) => {
     };
     const boundsChangeListener = (event) => {
         if ((showCenterRef === null || showCenterRef === void 0 ? void 0 : showCenterRef.current) && !poppedOutRef.current) {
+            // Bounds Changed fires when Windows Taskbar + Finsemble Toolbar docking changes
             setFullHeight();
         }
         const position = {
@@ -169,6 +177,7 @@ export const NotificationsCenter = (props) => {
     };
     const getScrollPercentage = () => {
         var _a, _b, _c, _d, _e, _f;
+        // document.getElementsByClassName("cards-container")[0].scrollHeight - document.getElementsByClassName("cards-container")[0].clientHeight
         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;
@@ -185,6 +194,7 @@ export const NotificationsCenter = (props) => {
                 }
             }
             else {
+                // Stop fetching after this one
                 nextPageToFetch.current = LAZY_LOAD_NO_MORE_PAGES;
             }
         }
@@ -242,6 +252,7 @@ export const NotificationsCenter = (props) => {
             }
         }
     };
+    // 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);
@@ -279,6 +290,7 @@ export const NotificationsCenter = (props) => {
     }, []);
     useEffect(() => {
         const recursiveLoad = async () => {
+            // Cater for the case where there is no scroll bar to trigger lazy load - keep loading until scrollbar or no pages
             await lazyLoadNextPage();
             if (getScrollPercentage() === 1 && nextPageToFetch.current != LAZY_LOAD_NO_MORE_PAGES) {
                 recursiveLoad();
@@ -286,8 +298,10 @@ export const NotificationsCenter = (props) => {
         };
         recursiveLoad();
     }, [viewMode, drawerControlProps.active]);
+    // Hook to set up the center state from service data on component start
     useEffect(() => {
         subscriptionMessageRef.current = uiState;
+        // Hook can execute before initial pubsub response - waiting for actual values
         if (!isInitialized && typeof uiState.showCenter !== "undefined") {
             if (uiState.poppedOut) {
                 removePoppedInClasses();
@@ -302,11 +316,13 @@ export const NotificationsCenter = (props) => {
                     position: uiState.position,
                 });
             }
+            // Setup references
             showCenterRef.current = uiState.showCenter;
             poppedOutRef.current = uiState.poppedOut;
             setInitialized(true);
         }
     }, [uiState]);
+    // Effect to run when we pop-in or pop-out the notification center
     useEffect(() => {
         if (isInitialized) {
             poppedOutRef.current = uiState.poppedOut;
@@ -358,6 +374,7 @@ export const NotificationsCenter = (props) => {
             FSBL.Clients.RouterClient.removeListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
         };
     }, []);
+    // Sets the current active mute filters
     useEffect(() => {
         async function loadMuteFilter() {
             return await FSBL.Clients.NotificationClient.getMuteFilters();
@@ -367,6 +384,7 @@ export const NotificationsCenter = (props) => {
             setReloadMuteFilters(false);
         });
     }, [reloadMuteFilters]);
+    // Sets the select all status from user selecting notifications individually
     useEffect(() => {
         if (notifications.length > 0 && checkedNotifications.length === notifications.length) {
             setSelectAll(true);