@finsemble/finsemble-ui 1.0.0-beta-1

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

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/menu/keyboardNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Keyboard navigation allows the end user to navigate through menus using\n * arrow keys and to select items using the enter key.\n *\n * When an element is selected then the keyboard navigation state is reset\n * so that the user will begin again with the first item.\n *\n * @param childWin - Main window or child window reference.\n * @param [className] - Selector of elements to apply navigation on.\n * @example\n * applyMenuKeyboardNavigation(window, \".menu-item\");\n */\nexport const applyMenuKeyboardNavigation = (childWin: Window, className: string = \".menu-item\") => {\n\tlet selectedItem: number = 0;\n\n\tlet selectedIcon: number = -1;\n\n\tnew MutationObserver(() => {\n\t\t// Reset selectedIndex when elements added or removed\n\t\t// from the DOM. The motivation behind this was an issue\n\t\t// with Brad's search menu where the order of focus is\n\t\t// messed up when his list of result changes.\n\t\tselectedItem = 0;\n\t}).observe(childWin.document.body, {\n\t\tchildList: true,\n\t\tcharacterData: false,\n\t\tsubtree: true,\n\t});\n\n\t/**\n\t * Returns list of elements\n\t */\n\tconst getElements = () => childWin.document.querySelectorAll(className) as NodeListOf<HTMLElement>;\n\n\tconst getMenuItemIcons = (index: number) => {\n\t\tconst menuItems = getElements();\n\t\treturn menuItems[index].querySelectorAll(\".menu-item-icon\") as NodeListOf<HTMLElement>;\n\t};\n\n\t/**\n\t * Sets the focus on a menu item\n\t * @param index The index of the menu item in the list\n\t */\n\tconst focusOn = (index: number) => {\n\t\tconst menuItems = getElements();\n\n\t\t// Menu could have no items\n\t\tif (!menuItems.length) return;\n\n\t\t// Focus on element and scroll if needed\n\t\tmenuItems[index].focus();\n\t};\n\n\tconst focusOnFirst = () => {\n\t\tselectedItem = 0;\n\t\tselectedIcon = -1;\n\t\tfocusOn(0);\n\t};\n\n\tconst focusOnLast = () => {\n\t\tselectedIcon = -1;\n\t\tconst { length } = getElements();\n\t\tif (length) {\n\t\t\tselectedItem = length - 1;\n\t\t\tfocusOn(length - 1);\n\t\t}\n\t};\n\n\t/**\n\t * Sets the focus on a menu item's icon\n\t * @param index The index of the menu item in the list\n\t * @param iconIndex The index of the menu item's icon (-1 = menu text, not icon)\n\t */\n\tconst focusOnIcon = (index: number, iconIndex: number) => {\n\t\tconst menuItems = getElements();\n\t\t// Menu could have no items\n\t\tif (!menuItems.length) return;\n\n\t\tconst icons = getMenuItemIcons(index);\n\t\t// Defend against possible js runtime error\n\t\tif (icons.length <= iconIndex) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Focus on menu item text, if relevant\n\t\tif (iconIndex === -1) {\n\t\t\tmenuItems[index].focus();\n\t\t\treturn;\n\t\t}\n\n\t\ticons[iconIndex].focus();\n\t};\n\n\t/**\n\t * Simulates mouse events\n\t */\n\tconst clickOnItem = () => {\n\t\tconst elements = getElements();\n\t\tconst selectedItemElement = elements[selectedItem as any];\n\t\t[\"mousedown\", \"click\", \"mouseup\"].forEach((event) => {\n\t\t\tif (selectedIcon > -1) {\n\t\t\t\tconst icons = getMenuItemIcons(selectedItem as any);\n\t\t\t\tconst selectedIconElement = icons[selectedIcon as any];\n\t\t\t\tif (selectedIconElement) {\n\t\t\t\t\tselectedIconElement.dispatchEvent(\n\t\t\t\t\t\tnew MouseEvent(event, {\n\t\t\t\t\t\t\tview: childWin,\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t\t\tbuttons: 1,\n\t\t\t\t\t\t})\n\t\t\t\t\t);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (selectedItemElement && selectedItemElement.dispatchEvent) {\n\t\t\t\tselectedItemElement.dispatchEvent(\n\t\t\t\t\tnew MouseEvent(event, {\n\t\t\t\t\t\tview: childWin,\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t\tbuttons: 1,\n\t\t\t\t\t})\n\t\t\t\t);\n\t\t\t}\n\t\t});\n\t};\n\n\t/**\n\t * Invoked when a user presses on the arrow up key\n\t */\n\tconst onArrowUp = () => {\n\t\tselectedIcon = -1;\n\n\t\t// Set the focus on the previous item\n\t\tselectedItem--;\n\t\tif (selectedItem < 0) {\n\t\t\t// If we are back to the begining\n\t\t\t// set the focus on last item\n\t\t\tfocusOnLast();\n\t\t\treturn;\n\t\t}\n\t\tfocusOn(selectedItem);\n\t};\n\n\t/**\n\t * Invoked when user press the arrow down key\n\t */\n\tconst onArrowDown = () => {\n\t\tselectedIcon = -1;\n\n\t\t// The the focus on the next item\n\t\tselectedItem++;\n\t\t// If we reached the end, then go back to first item\n\t\tif (selectedItem === getElements().length) {\n\t\t\tselectedItem = 0;\n\t\t}\n\t\tfocusOn(selectedItem);\n\t};\n\n\t/**\n\t * Invoked when user press the arrow right key\n\t */\n\tconst onArrowRight = () => {\n\t\tconst menuItems = getElements();\n\t\t// Menu could have no items\n\t\tif (!menuItems.length) return;\n\n\t\tconst icons = getMenuItemIcons(selectedItem);\n\t\tif (icons.length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tselectedIcon++;\n\t\tif (selectedIcon === icons.length) {\n\t\t\tselectedIcon = -1;\n\t\t}\n\t\tfocusOnIcon(selectedItem, selectedIcon);\n\t};\n\n\t/**\n\t * Invoked when user press the arrow left key\n\t */\n\tconst onArrowLeft = () => {\n\t\tconst menuItems = getElements();\n\t\t// Menu could have no items\n\t\tif (!menuItems.length) return;\n\n\t\tconst icons = getMenuItemIcons(selectedItem);\n\t\tif (icons.length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tselectedIcon--;\n\t\tif (selectedIcon === icons.length) {\n\t\t\tselectedIcon = -1;\n\t\t}\n\t\tfocusOnIcon(selectedItem, selectedIcon);\n\t};\n\n\tconst actionDictionary = {\n\t\tArrowDown: onArrowDown,\n\t\tArrowUp: onArrowUp,\n\t\tArrowLeft: onArrowLeft,\n\t\tArrowRight: onArrowRight,\n\t\tEnter: clickOnItem,\n\t\tHome: focusOnFirst,\n\t\tEnd: focusOnLast,\n\t};\n\n\tchildWin.addEventListener(\"keydown\", (e) => {\n\t\tconst { key } = e as KeyboardEvent;\n\n\t\tif (key in actionDictionary) {\n\t\t\tactionDictionary[key as keyof typeof actionDictionary]?.();\n\t\t\te.preventDefault();\n\t\t}\n\t});\n\n\tchildWin.addEventListener(\"blur\", focusOnFirst);\n\tchildWin.addEventListener(\"focus\", focusOnFirst);\n};\n"]}

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+declare type MenuContextType = {
+    thisMenuId: string;
+    className: string | undefined;
+    maxHeight: number;
+    menuWidth: number;
+    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

@@ -0,0 +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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +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

@@ -0,0 +1,111 @@
+// 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 + 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) {
+            top = toolbarY - menuHeight;
+        }
+    }
+    return {
+        top,
+        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 {
+        top,
+        left,
+        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);
+        }
+    }
+    styleElements.forEach((item) => {
+        childWindow.document.head.append(item);
+    });
+};
+//# sourceMappingURL=menuHelpers.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const NoNotifications: React.FunctionComponent;
+export default NoNotifications;

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

@@ -0,0 +1,5 @@
+import React from "react";
+const NoNotifications = () => (React.createElement("div", { className: "no-notifications" },
+    React.createElement("p", null, "No notifications to display")));
+export default NoNotifications;
+//# sourceMappingURL=NoNotifications.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,7 @@
+import React from "react";
+interface Props {
+    classNames?: string;
+    children?: React.ReactNode;
+}
+declare const Drawer: React.FunctionComponent<Props>;
+export default Drawer;

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

@@ -0,0 +1,5 @@
+import React from "react";
+const Drawer = (props) => (React.createElement("div", { id: "drawer", className: props.classNames },
+    React.createElement("div", { className: "drawer-container" }, props.children)));
+export default Drawer;
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const DrawerControls: React.FunctionComponent;
+export default DrawerControls;

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

@@ -0,0 +1,117 @@
+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) => {
+            if (control.action === clickedControl.action) {
+                if (drawerControlProps.active === control.action) {
+                    delete drawerControlProps.active;
+                }
+                else {
+                    drawerControlProps.active = control.action;
+                }
+            }
+        });
+        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 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);
+    };
+    const readChecked = () => {
+        markNotificationsRead(checkedNotifications);
+    };
+    const unreadChecked = () => {
+        markNotificationsUnread(checkedNotifications);
+    };
+    const hideChecked = () => {
+        dismissNotification(checkedNotifications);
+    };
+    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) {
+            setSelectAll(false);
+            checkedNotifications.length = 0;
+        }
+    }, [selectionMode, checkedNotifications]);
+    return (React.createElement("div", { id: "notifications-center-controls" },
+        React.createElement("div", { className: "notifications-center-controls__row" }, renderControls()),
+        React.createElement("div", { className: "notifications-center-controls__row" },
+            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("div", { className: "notifications-center-controls__view_mode" },
+                React.createElement(IconButton, { iconName: "ff-chart-alt-2", classNames: viewMode === ViewMode.CARD ? "active" : "", clickHandler: () => {
+                        setSelectionMode(SelectionMode.NO_SELECTION);
+                        setViewMode(ViewMode.CARD);
+                    } }),
+                React.createElement(IconButton, { iconName: "ff-adp-hamburger", classNames: viewMode === ViewMode.LIST ? "active" : "", clickHandler: () => {
+                        setSelectionMode(SelectionMode.NO_SELECTION);
+                        setViewMode(ViewMode.LIST);
+                    } }))),
+        React.createElement("div", { className: "notifications-center-controls__row center" },
+            React.createElement("div", { className: controlClassname, onClick: () => readChecked(), tabIndex: 0, onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        readChecked();
+                    }
+                } }, "Mark Read"),
+            React.createElement("div", { className: 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"))));
+};
+export default DrawerControls;
+//# sourceMappingURL=DrawerControls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerControls.js","sourceRoot":"","sources":["../../../../../src/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,UAAU,MAAM,sBAAsB,CAAC;AAE9C,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,aAAa,GAAG,CAAC,cAAuB,EAAE,EAAE;QACjD,4FAA4F;QAC5F,IAAI,cAAc,CAAC,MAAM,KAAK,kBAAkB,CAAC,MAAM;YAAE,OAAO;QAChE,kBAAkB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAgB,EAAE,EAAE;YACxD,IAAI,OAAO,CAAC,MAAM,KAAK,cAAc,CAAC,MAAM,EAAE;gBAC7C,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;QAC3B,IAAI,SAAS,GAAG,2CAA2C,CAAC;QAC5D,OAAO,kBAAkB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAgB,EAAE,EAAE,CAAC,CAC5D,6BACC,GAAG,EAAE,OAAO,CAAC,MAAM,EACnB,SAAS,EAAE,GAAG,SAAS,IAAI,kBAAkB,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACzF,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,EACrC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBACtB,aAAa,CAAC,OAAO,CAAC,CAAC;iBACvB;YACF,CAAC,EACD,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAEhG,OAAO,CAAC,KAAK,CACT,CACN,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,gBAAgB,CACf,aAAa,KAAK,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CACnG,CAAC;IACH,CAAC,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,MAAM,eAAe,GAAG,aAAa,KAAK,aAAa,CAAC,SAAS,CAAC;IAElE,MAAM,qBAAqB,GAAG,6CAA6C,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IACrG,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAC/B,EAAE,CAAC;IAEH,MAAM,gBAAgB,GAAG,6CAA6C,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,IAC9G,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAC3C,EAAE,CAAC;IAEH,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,6BACC,SAAS,EAAC,2CAA2C,EACrD,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,EAC7B,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBAChB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;wBACtB,YAAY,EAAE,CAAC;qBACf;gBACF,CAAC;gBAED,2BAAG,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,2BAA2B,GAAI;yBAEvE;YACN,6BACC,SAAS,EAAE,qBAAqB,EAChC,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,EAAE,EAChC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBAChB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;wBACtB,eAAe,EAAE,CAAC;qBAClB;gBACF,CAAC,iBAGI;YACN,6BAAK,SAAS,EAAC,0CAA0C;gBACxD,oBAAC,UAAU,IACV,QAAQ,EAAC,gBAAgB,EACzB,UAAU,EAAE,QAAQ,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EACtD,YAAY,EAAE,GAAG,EAAE;wBAClB,gBAAgB,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;wBAC7C,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;oBAC5B,CAAC,GACA;gBACF,oBAAC,UAAU,IACV,QAAQ,EAAC,kBAAkB,EAC3B,UAAU,EAAE,QAAQ,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EACtD,YAAY,EAAE,GAAG,EAAE;wBAClB,gBAAgB,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;wBAC7C,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;oBAC5B,CAAC,GACA,CACG,CACD;QACN,6BAAK,SAAS,EAAC,2CAA2C;YACzD,6BACC,SAAS,EAAE,gBAAgB,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,EAC5B,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBAChB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;wBACtB,WAAW,EAAE,CAAC;qBACd;gBACF,CAAC,gBAGI;YACN,6BACC,SAAS,EAAE,gBAAgB,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,EAC9B,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBAChB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;wBACtB,aAAa,EAAE,CAAC;qBAChB;gBACF,CAAC,kBAGI;YACN,6BACC,SAAS,EAAE,gBAAgB,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,EAC5B,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBAChB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;wBACtB,WAAW,EAAE,CAAC;qBACd;gBACF,CAAC,WAGI;YAEN,6BACC,SAAS,EAAE,gBAAgB,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,EAC9B,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBAChB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;wBACtB,aAAa,EAAE,CAAC;qBAChB;gBACF,CAAC,aAGI,CACD,CACD,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","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.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const DrawerHeader: React.FunctionComponent<{
+    poppedOutStatus: boolean;
+    popOutToggle: Function;
+}>;
+export default DrawerHeader;

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

@@ -0,0 +1,77 @@
+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 }) => {
+    const goToSettings = () => {
+        FSBL.Clients.RouterClient.transmit("FinsembleUserPreferencesChannel", {
+            preferencesTab: "Notifications",
+        });
+        FSBL.Clients.LauncherClient.showWindow({
+            componentType: "UserPreferences",
+        }, {
+            monitor: "mine",
+            left: "center",
+            top: "center",
+        });
+    };
+    return (React.createElement("div", { className: "overflow-menu__container" },
+        React.createElement("div", { className: "overflow-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: "finsemble-icon" },
+                React.createElement("i", { className: "ff-settings" })),
+            React.createElement("span", { className: "btn-label" }, "Settings"))));
+};
+const DrawerHeader = ({ poppedOutStatus, popOutToggle }) => {
+    const [uiState, setUIState] = useNotificationUI();
+    const notificationsContext = useContext(NotificationsContext);
+    const { searchString, setSearchString } = notificationsContext;
+    const [searchInputValue, setSearchInputValue] = useState(searchString);
+    const [showMenu, setShowMenu] = useState(false);
+    const closeDrawerClick = () => {
+        setUIState(Object.assign(Object.assign({}, uiState), { showCenter: false }));
+    };
+    const toggleMenu = () => {
+        setShowMenu(!showMenu);
+    };
+    // This is unchanged across renders
+    const handleSearchTerm = useRef(debounce((nextValue) => {
+        const regex = /^(title|details|source):/gi;
+        nextValue = nextValue.trim();
+        const isFilter = regex.test(nextValue);
+        let parsedSearchTerm = "";
+        if (isFilter) {
+            parsedSearchTerm = nextValue.split(":")[1].trim();
+        }
+        else {
+            parsedSearchTerm = nextValue;
+        }
+        if (parsedSearchTerm.length > 2) {
+            setSearchString(nextValue);
+        }
+        else {
+            console.log("search string is too short");
+            setSearchString("");
+        }
+    }, 400)).current;
+    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" },
+        React.createElement(IconButton, { iconName: "ff-search", classNames: "no-hover" }),
+        React.createElement("input", { className: "search-notifications__input", type: "text", placeholder: "Search Notifications", value: searchInputValue, onChange: handleChange }),
+        React.createElement(IconButton, { iconName: "ff-dots-vert", tooltip: "Options", classNames: "center-menu", clickHandler: () => toggleMenu() }, showMenu ? React.createElement(NotificationsCenterMenu, { poppedOutStatus: poppedOutStatus, popOutToggle: popOutToggle }) : null),
+        React.createElement(IconButton, { iconName: "ff-adp-chevron-right", clickHandler: () => closeDrawerClick() })));
+};
+export default DrawerHeader;
+//# sourceMappingURL=DrawerHeader.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,4 @@
+import React from "react";
+import "../../../../assets/css/notificationsCenter.css";
+import { INotificationCenterProps } from "../../types";
+export declare const NotificationsCenter: React.FunctionComponent<INotificationCenterProps>;