@finsemble/finsemble-ui 6.2.0 → 6.3.0-beta.20211008

package/react/components/linker/remoteRedux.d.ts

@@ -1,44 +1,12 @@
-export declare type LinkerStore = {
-    clients: {
-        [windowName: string]: {
-            joinedChannels: string[];
-        };
-    };
-    allChannels: {
-        name: string;
-        color: string;
-        cssClassName: string;
-        label: string;
-    }[];
-    activeWindowName?: string;
-};
-export declare const store: import("@reduxjs/toolkit").EnhancedStore<any, import("redux").AnyAction, [import("redux-thunk").ThunkMiddleware<any, import("redux").AnyAction, null> | import("redux-thunk").ThunkMiddleware<any, import("redux").AnyAction, undefined>]>;
-export declare type InteropLinkChannels = {
-    type: "linker/linkChannels";
-    payload: {
-        channels: string[];
-    };
-    meta: {
-        windowName: string;
-    };
-};
-export declare type InteropUnlinkChannels = {
-    type: "linker/unlinkChannels";
-    payload: {
-        channels?: string[];
-    };
-    meta: {
-        windowName: string;
-    };
-};
-export declare type InteropLinkerSetActiveWindow = {
-    type: "linker/setActiveWindow";
-    payload: {
-        windowName: string | undefined;
-    };
-};
+import { EnhancedStore } from "@reduxjs/toolkit";
+import { services } from "@finsemble/finsemble-core";
+export declare type LinkerStore = services.Interop.types.LinkerStore;
+export declare type InteropLinkChannels = services.Interop.modules.linker.InteropLinkChannels;
+export declare type InteropUnlinkChannels = services.Interop.modules.linker.InteropUnlinkChannels;
+export declare type InteropLinkerSetActiveWindow = services.Interop.modules.linker.InteropLinkerSetActiveWindow;
+export declare const store: EnhancedStore<LinkerStore, any, any>;
 export declare const actions: {
-    setActiveWindow: import("@reduxjs/toolkit").ActionCreatorWithPayload<InteropLinkerSetActiveWindow, string>;
-    linkChannels: import("@reduxjs/toolkit").ActionCreatorWithPayload<InteropLinkChannels, string>;
-    unlinkChannels: import("@reduxjs/toolkit").ActionCreatorWithPayload<InteropUnlinkChannels, string>;
+    setActiveWindow: import("@reduxjs/toolkit").ActionCreatorWithPayload<services.Interop.modules.linker.InteropLinkerSetActiveWindow, string>;
+    linkChannels: import("@reduxjs/toolkit").ActionCreatorWithPayload<services.Interop.modules.linker.InteropLinkChannels, string>;
+    unlinkChannels: import("@reduxjs/toolkit").ActionCreatorWithPayload<services.Interop.modules.linker.InteropUnlinkChannels, string>;
 };

package/react/components/linker/remoteRedux.js.map

@@ -1 +1 @@
-{"version":3,"file":"remoteRedux.js","sourceRoot":"","sources":["../../../src/components/linker/remoteRedux.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;AAE7B,MAAM,YAAY,GAAG,CAAC,KAAU,EAAE,EAAE,CAAC,KAAK,CAAC;AAkB3C,MAAM,UAAU,GAAgB;IAC/B,OAAO,EAAE,EAAE;IACX,WAAW,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,cAAc,CAAC;IACnC,cAAc,EAAE,UAAU;IAC1B,OAAO,EAAE,YAAY;IACrB,SAAS,EAAE;QACV,WAAW,CAAC,yBAAyB,CAAC,EAAE,MAAM,EAAE,sCAAsC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;KAC1G;CACD,CAAC,CAAC;AA6BH,MAAM,CAAC,MAAM,OAAO,GAAG;IACtB,eAAe,EAAE,YAAY,CAA+B,wBAAwB,CAAC;IACrF,YAAY,EAAE,YAAY,CAAsB,qBAAqB,CAAC;IACtE,cAAc,EAAE,YAAY,CAAwB,uBAAuB,CAAC;CAC5E,CAAC","sourcesContent":["import { configureStore, createAction } from \"@reduxjs/toolkit\";\r\n\r\n// @todo, import this so that we get enumerated types!\r\nconst { remoteRedux } = FSBL;\r\n\r\nconst dummyReducer = (state: any) => state;\r\n\r\n//, @todo import all this from finsemble-core\r\nexport type LinkerStore = {\r\n\tclients: {\r\n\t\t[windowName: string]: {\r\n\t\t\tjoinedChannels: string[];\r\n\t\t};\r\n\t};\r\n\tallChannels: {\r\n\t\tname: string;\r\n\t\tcolor: string;\r\n\t\tcssClassName: string;\r\n\t\tlabel: string;\r\n\t}[];\r\n\tactiveWindowName?: string;\r\n};\r\n\r\nconst emptyStore: LinkerStore = {\r\n\tclients: {},\r\n\tallChannels: [],\r\n};\r\n\r\nexport const store = configureStore({\r\n\tpreloadedState: emptyStore,\r\n\treducer: dummyReducer,\r\n\tenhancers: [\r\n\t\tremoteRedux.remoteReduxClientEnhancer({ server: \"@@finsemble/remoteRedux/InteropStore\", slice: \"linker\" }),\r\n\t],\r\n});\r\n\r\nexport type InteropLinkChannels = {\r\n\ttype: \"linker/linkChannels\";\r\n\tpayload: {\r\n\t\tchannels: string[];\r\n\t};\r\n\tmeta: {\r\n\t\twindowName: string;\r\n\t};\r\n};\r\n\r\nexport type InteropUnlinkChannels = {\r\n\ttype: \"linker/unlinkChannels\";\r\n\tpayload: {\r\n\t\tchannels?: string[];\r\n\t};\r\n\tmeta: {\r\n\t\twindowName: string;\r\n\t};\r\n};\r\n\r\nexport type InteropLinkerSetActiveWindow = {\r\n\ttype: \"linker/setActiveWindow\";\r\n\tpayload: {\r\n\t\twindowName: string | undefined;\r\n\t};\r\n};\r\n\r\nexport const actions = {\r\n\tsetActiveWindow: createAction<InteropLinkerSetActiveWindow>(\"linker/setActiveWindow\"),\r\n\tlinkChannels: createAction<InteropLinkChannels>(\"linker/linkChannels\"),\r\n\tunlinkChannels: createAction<InteropUnlinkChannels>(\"linker/unlinkChannels\"),\r\n};\r\n// end, @todo\r\n"]}
+{"version":3,"file":"remoteRedux.js","sourceRoot":"","sources":["../../../src/components/linker/remoteRedux.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAiB,MAAM,kBAAkB,CAAC;AAS/E,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;AAE7B,MAAM,YAAY,GAAG,CAAC,KAAU,EAAE,EAAE,CAAC,KAAK,CAAC;AAE3C,MAAM,UAAU,GAAgB;IAC/B,OAAO,EAAE,EAAE;IACX,WAAW,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAyC,cAAc,CAAC;IACzE,cAAc,EAAE,UAAU;IAC1B,OAAO,EAAE,YAAY;IACrB,SAAS,EAAE;QACV,WAAW,CAAC,yBAAyB,CAAC,EAAE,MAAM,EAAE,sCAAsC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;KAC1G;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG;IACtB,eAAe,EAAE,YAAY,CAA+B,wBAAwB,CAAC;IACrF,YAAY,EAAE,YAAY,CAAsB,qBAAqB,CAAC;IACtE,cAAc,EAAE,YAAY,CAAwB,uBAAuB,CAAC;CAC5E,CAAC","sourcesContent":["import { configureStore, createAction, EnhancedStore } from \"@reduxjs/toolkit\";\r\nimport { services } from \"@finsemble/finsemble-core\";\r\n\r\nexport type LinkerStore = services.Interop.types.LinkerStore;\r\nexport type InteropLinkChannels = services.Interop.modules.linker.InteropLinkChannels;\r\nexport type InteropUnlinkChannels = services.Interop.modules.linker.InteropUnlinkChannels;\r\nexport type InteropLinkerSetActiveWindow = services.Interop.modules.linker.InteropLinkerSetActiveWindow;\r\n\r\n// @todo, import this so that we get enumerated types!\r\nconst { remoteRedux } = FSBL;\r\n\r\nconst dummyReducer = (state: any) => state;\r\n\r\nconst emptyStore: LinkerStore = {\r\n\tclients: {},\r\n\tallChannels: [],\r\n};\r\n\r\nexport const store: EnhancedStore<LinkerStore, any, any> = configureStore({\r\n\tpreloadedState: emptyStore,\r\n\treducer: dummyReducer,\r\n\tenhancers: [\r\n\t\tremoteRedux.remoteReduxClientEnhancer({ server: \"@@finsemble/remoteRedux/InteropStore\", slice: \"linker\" }),\r\n\t],\r\n});\r\n\r\nexport const actions = {\r\n\tsetActiveWindow: createAction<InteropLinkerSetActiveWindow>(\"linker/setActiveWindow\"),\r\n\tlinkChannels: createAction<InteropLinkChannels>(\"linker/linkChannels\"),\r\n\tunlinkChannels: createAction<InteropUnlinkChannels>(\"linker/unlinkChannels\"),\r\n};\r\n// end, @todo\r\n"]}

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

@@ -7,6 +7,6 @@ export declare type MenuProps = {
     maxHeight?: number;
     openHotkey?: Array<string>;
     width?: number;
-    title?: React.ReactNode;
+    title?: React.ReactNode | string;
 };
 export declare const Menu: React.FunctionComponent<MenuProps>;

package/react/components/menu/Menu.js

@@ -4,7 +4,7 @@ import { MenuToggle } from "./MenuToggle";
 import { MenuContent } from "./MenuContent";
 export const Menu = (props) => {
     const { children, title } = props;
-    return (React.createElement(MenuShell, { ...props },
+    return (React.createElement(MenuShell, Object.assign({}, props),
         React.createElement(MenuToggle, null, title),
         React.createElement(MenuContent, null, children)));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AA4B5C,MAAM,CAAC,MAAM,IAAI,GAAuC,CAAC,KAAK,EAAE,EAAE;IACjE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAElC,OAAO,CACN,oBAAC,SAAS,OAAK,KAAK;QACnB,oBAAC,UAAU,QAAE,KAAK,CAAc;QAChC,oBAAC,WAAW,QAAE,QAAQ,CAAe,CAC1B,CACZ,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\nimport { MenuShell } from \"./MenuShell\";\r\nimport { MenuToggle } from \"./MenuToggle\";\r\nimport { MenuContent } from \"./MenuContent\";\r\n\r\nexport type MenuProps = {\r\n\tclassName?: string;\r\n\tcloseHotkey?: Array<string>;\r\n\theight?: number;\r\n\tid?: string;\r\n\tmaxHeight?: number;\r\n\topenHotkey?: Array<string>;\r\n\twidth?: number;\r\n\ttitle?: React.ReactNode;\r\n};\r\n\r\n/**\r\n * A convenience component that fully encapsulates a menu by constructing a <MenuShell> and its contents.\r\n * All of the props are passed to MenuShell.\r\n *\r\n * @param {string} [className] - Custom body class for the menu contents. These classes will be set on the <body> tag for the Menu's drop down window.\r\n * @param {array} [closeHotkey=[\"escape\"] ] - A hotkey combination to close the menu. Defaults to [\"escape\"].\r\n * @param {number} [height] - Custom height for the menu. If not set then the height will be automatically calculated based on the content height and available monitor space.\r\n * @param {string} [id] - Unique ID for the menu. Defaults to a random string.\r\n * @param {number} [maxHeight=Infinity] - Maximum height of the menu.\r\n * @param {array} [openHotkey] - A hotkey combination to open the menu.\r\n * @param {number} [width=180] - Custom width for the menu.\r\n * @param {title} [string] - Name that appears in the menu's <MenuToggle> button.\r\n *\r\n */\r\n\r\nexport const Menu: React.FunctionComponent<MenuProps> = (props) => {\r\n\tconst { children, title } = props;\r\n\r\n\treturn (\r\n\t\t<MenuShell {...props}>\r\n\t\t\t<MenuToggle>{title}</MenuToggle>\r\n\t\t\t<MenuContent>{children}</MenuContent>\r\n\t\t</MenuShell>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AA4B5C,MAAM,CAAC,MAAM,IAAI,GAAuC,CAAC,KAAK,EAAE,EAAE;IACjE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAElC,OAAO,CACN,oBAAC,SAAS,oBAAK,KAAK;QACnB,oBAAC,UAAU,QAAE,KAAK,CAAc;QAChC,oBAAC,WAAW,QAAE,QAAQ,CAAe,CAC1B,CACZ,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\nimport { MenuShell } from \"./MenuShell\";\r\nimport { MenuToggle } from \"./MenuToggle\";\r\nimport { MenuContent } from \"./MenuContent\";\r\n\r\nexport type MenuProps = {\r\n\tclassName?: string;\r\n\tcloseHotkey?: Array<string>;\r\n\theight?: number;\r\n\tid?: string;\r\n\tmaxHeight?: number;\r\n\topenHotkey?: Array<string>;\r\n\twidth?: number;\r\n\ttitle?: React.ReactNode | string;\r\n};\r\n\r\n/**\r\n * A convenience component that fully encapsulates a menu by constructing a <MenuShell> and its contents.\r\n * All of the props are passed to MenuShell.\r\n *\r\n * @param {string} [className] - Custom body class for the menu contents. These classes will be set on the <body> tag for the Menu's drop down window.\r\n * @param {array} [closeHotkey=[\"escape\"] ] - A hotkey combination to close the menu. Defaults to [\"escape\"].\r\n * @param {number} [height] - Custom height for the menu. If not set then the height will be automatically calculated based on the content height and available monitor space.\r\n * @param {string} [id] - Unique ID for the menu. Defaults to a random string.\r\n * @param {number} [maxHeight=Infinity] - Maximum height of the menu.\r\n * @param {array} [openHotkey] - A hotkey combination to open the menu.\r\n * @param {number} [width=180] - Custom width for the menu.\r\n * @param {title} [string] - Name that appears in the menu's <MenuToggle> button.\r\n *\r\n */\r\n\r\nexport const Menu: React.FunctionComponent<MenuProps> = (props) => {\r\n\tconst { children, title } = props;\r\n\r\n\treturn (\r\n\t\t<MenuShell {...props}>\r\n\t\t\t<MenuToggle>{title}</MenuToggle>\r\n\t\t\t<MenuContent>{children}</MenuContent>\r\n\t\t</MenuShell>\r\n\t);\r\n};\r\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuAutoResizer.js","sourceRoot":"","sources":["../../../src/components/menu/MenuAutoResizer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAQpD,MAAM,OAAO,eAAe;IAW3B,YAAY,WAAmB,EAAE,MAAc,EAAE,KAAa,EAAE,YAAoB,QAAQ;QAC3F,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAC/B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAQrE,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QAKlE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;YAChD,SAAS,EAAE,IAAI;YACf,aAAa,EAAE,KAAK;YACpB,OAAO,EAAE,IAAI;SACb,CAAC,CAAC;QAGH,UAAU,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC,CAAC;IAC5C,CAAC;IAED,UAAU;QACT,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC5B,CAAC;IAKO,KAAK,CAAC,sBAAsB;QAInC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,MAAM,cAAc,CAAC,EAAE;YAC3D,OAAO;SACP;QACD,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,MAAM,mBAAmB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAE1G,MAAM,MAAM,GAAgB;YAC3B,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,SAAS;YACnB,IAAI,EAAE,IAAI;YACV,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,IAAI;YACnB,gBAAgB,EAAE,aAAa;SAC/B,CAAC;QAOF,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,MAAM,CAAC,CAAC;QAC7F,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAClE,CAAC;CACD","sourcesContent":["import { calculateDimensions } from \"./menuHelpers\";\r\n// Typescript ambient module loaded automagically from typeroots from core/types/index.d.ts\r\nimport { SpawnParams } from \"services/window/Launcher/launcher\";\r\n\r\n/**\r\n * To make sure that MenuPortal.tsx remain small\r\n * I have isolated the auto resize logic in this class.\r\n */\r\nexport class MenuAutoResizer {\r\n\tprivate width: number;\r\n\r\n\tprivate maxHeight: number;\r\n\r\n\tprivate childWindow: Window;\r\n\r\n\tprivate menuId: string;\r\n\r\n\tprivate observer: MutationObserver;\r\n\r\n\tconstructor(childWindow: Window, menuId: string, width: number, maxHeight: number = Infinity) {\r\n\t\tthis.width = width;\r\n\t\tthis.maxHeight = maxHeight;\r\n\t\tthis.childWindow = childWindow;\r\n\t\tthis.menuId = menuId;\r\n\t\tthis.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n\t\t/* The external window does not have a URL and so its origin\r\n\t\twill not match the toolbar's origin, in that case\r\n\t\twe won't have onload, DOMContentLoaded or any other events.\r\n\t\tThat makes it hard to know when the content are loaded, we cant\r\n\t\teven inject custom JS as it will be already late.\r\n\t\tThe only way to know about a DOM change was MutationObserver!\r\n\t\t*/\r\n\t\tthis.observer = new MutationObserver(this.updateWindowDimensions);\r\n\t\t/* Now we watch for any DOM changes in the childWindow\r\n\t\tKnowing the height of the window contents is crucial for\r\n\t\tmaking decision about its position (below/above the toolbar).\r\n\t\t*/\r\n\t\tthis.observer.observe(this.childWindow.document, {\r\n\t\t\tchildList: true,\r\n\t\t\tcharacterData: false,\r\n\t\t\tsubtree: true,\r\n\t\t});\r\n\r\n\t\t// Initialize the window to the correct height\r\n\t\tsetTimeout(this.updateWindowDimensions, 0);\r\n\t}\r\n\r\n\tdisconnect() {\r\n\t\tthis.observer.disconnect();\r\n\t}\r\n\r\n\t/**\r\n\t * Callback for MutationObserver\r\n\t */\r\n\tprivate async updateWindowDimensions() {\r\n\t\t// If the original menu button has been removed then bypass updating the window dimensions.\r\n\t\t// Probably the menu itself is in the process of being removed but the mutation observer has\r\n\t\t// not yet disconnected\r\n\t\tif (!document.querySelector(`#${this.menuId}-menu-toggle`)) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tconst { left, top, height } = await calculateDimensions(this.childWindow, this.menuId, 0, this.maxHeight);\r\n\r\n\t\tconst params: SpawnParams = {\r\n\t\t\tmonitor: \"mine\",\r\n\t\t\tposition: \"monitor\",\r\n\t\t\tleft: left,\r\n\t\t\ttop: top,\r\n\t\t\twidth: this.width,\r\n\t\t\theight: height,\r\n\t\t\tsetBoundsOnly: true,\r\n\t\t\tforceOntoMonitor: \"monitorRect\",\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * See comment in MenuPortal.tsx on why we use showWindow() here instead of childWindow.moveTo()\r\n\t\t */\r\n\t\t//this.childWindow.moveTo(left, top);\r\n\t\t//this.childWindow.resizeTo(this.width, height);\r\n\t\tFSBL.Clients.LauncherClient.showWindow({ windowName: this.childWindow.window.name }, params);\r\n\t\tthis.childWindow.document.body.setAttribute(\"resizing\", \"false\");\r\n\t}\r\n}\r\n"]}
+{"version":3,"file":"MenuAutoResizer.js","sourceRoot":"","sources":["../../../src/components/menu/MenuAutoResizer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AASpD,MAAM,OAAO,eAAe;IAW3B,YAAY,WAAmB,EAAE,MAAc,EAAE,KAAa,EAAE,YAAoB,QAAQ;QAC3F,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAC/B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAQrE,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QAKlE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;YAChD,SAAS,EAAE,IAAI;YACf,aAAa,EAAE,KAAK;YACpB,OAAO,EAAE,IAAI;SACb,CAAC,CAAC;QAGH,UAAU,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC,CAAC;IAC5C,CAAC;IAED,UAAU;QACT,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC5B,CAAC;IAKO,KAAK,CAAC,sBAAsB;QAInC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,MAAM,cAAc,CAAC,EAAE;YAC3D,OAAO;SACP;QACD,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,MAAM,mBAAmB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAE1G,MAAM,MAAM,GAAgB;YAC3B,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,SAAS;YACnB,IAAI,EAAE,IAAI;YACV,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,IAAI;YACnB,gBAAgB,EAAE,aAAa;SAC/B,CAAC;QAOF,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,MAAM,CAAC,CAAC;QAC7F,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAClE,CAAC;CACD","sourcesContent":["import { calculateDimensions } from \"./menuHelpers\";\r\nimport { services } from \"@finsemble/finsemble-core\";\r\n\r\ntype SpawnParams = services.window.types.SpawnParams;\r\n\r\n/**\r\n * To make sure that MenuPortal.tsx remain small\r\n * I have isolated the auto resize logic in this class.\r\n */\r\nexport class MenuAutoResizer {\r\n\tprivate width: number;\r\n\r\n\tprivate maxHeight: number;\r\n\r\n\tprivate childWindow: Window;\r\n\r\n\tprivate menuId: string;\r\n\r\n\tprivate observer: MutationObserver;\r\n\r\n\tconstructor(childWindow: Window, menuId: string, width: number, maxHeight: number = Infinity) {\r\n\t\tthis.width = width;\r\n\t\tthis.maxHeight = maxHeight;\r\n\t\tthis.childWindow = childWindow;\r\n\t\tthis.menuId = menuId;\r\n\t\tthis.updateWindowDimensions = this.updateWindowDimensions.bind(this);\r\n\t\t/* The external window does not have a URL and so its origin\r\n\t\twill not match the toolbar's origin, in that case\r\n\t\twe won't have onload, DOMContentLoaded or any other events.\r\n\t\tThat makes it hard to know when the content are loaded, we cant\r\n\t\teven inject custom JS as it will be already late.\r\n\t\tThe only way to know about a DOM change was MutationObserver!\r\n\t\t*/\r\n\t\tthis.observer = new MutationObserver(this.updateWindowDimensions);\r\n\t\t/* Now we watch for any DOM changes in the childWindow\r\n\t\tKnowing the height of the window contents is crucial for\r\n\t\tmaking decision about its position (below/above the toolbar).\r\n\t\t*/\r\n\t\tthis.observer.observe(this.childWindow.document, {\r\n\t\t\tchildList: true,\r\n\t\t\tcharacterData: false,\r\n\t\t\tsubtree: true,\r\n\t\t});\r\n\r\n\t\t// Initialize the window to the correct height\r\n\t\tsetTimeout(this.updateWindowDimensions, 0);\r\n\t}\r\n\r\n\tdisconnect() {\r\n\t\tthis.observer.disconnect();\r\n\t}\r\n\r\n\t/**\r\n\t * Callback for MutationObserver\r\n\t */\r\n\tprivate async updateWindowDimensions() {\r\n\t\t// If the original menu button has been removed then bypass updating the window dimensions.\r\n\t\t// Probably the menu itself is in the process of being removed but the mutation observer has\r\n\t\t// not yet disconnected\r\n\t\tif (!document.querySelector(`#${this.menuId}-menu-toggle`)) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tconst { left, top, height } = await calculateDimensions(this.childWindow, this.menuId, 0, this.maxHeight);\r\n\r\n\t\tconst params: SpawnParams = {\r\n\t\t\tmonitor: \"mine\",\r\n\t\t\tposition: \"monitor\",\r\n\t\t\tleft: left,\r\n\t\t\ttop: top,\r\n\t\t\twidth: this.width,\r\n\t\t\theight: height,\r\n\t\t\tsetBoundsOnly: true,\r\n\t\t\tforceOntoMonitor: \"monitorRect\",\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * See comment in MenuPortal.tsx on why we use showWindow() here instead of childWindow.moveTo()\r\n\t\t */\r\n\t\t//this.childWindow.moveTo(left, top);\r\n\t\t//this.childWindow.resizeTo(this.width, height);\r\n\t\tFSBL.Clients.LauncherClient.showWindow({ windowName: this.childWindow.window.name }, params);\r\n\t\tthis.childWindow.document.body.setAttribute(\"resizing\", \"false\");\r\n\t}\r\n}\r\n"]}

package/react/components/menu/MenuPortal.js

@@ -31,7 +31,7 @@ export const MenuPortal = ({ show, children }) => {
                     height: height,
                     forceOntoMonitor: "monitorRect",
                 };
-                const { name } = childWindow.window;
+                const { name } = childWindow;
                 FSBL.Clients.LauncherClient.showWindow({ windowName: name }, params);
                 finWindow.focus();
                 FSBL.FinsembleWindow.getInstance({ name: name }, (e, fsblWindow) => {
@@ -43,7 +43,7 @@ export const MenuPortal = ({ show, children }) => {
                 }
             }
             else {
-                const { name } = childWindow.window;
+                const { name } = childWindow;
                 FSBL.FinsembleWindow.getInstance({ name: name }, (e, fsblWindow) => {
                     fsblWindow.setAlwaysOnTop({ alwaysOnTop: false });
                 });
@@ -74,7 +74,7 @@ export const MenuPortal = ({ show, children }) => {
                 newWindow.portalHeight = menuHeight;
                 newWindow.addEventListener("blur", blurMenu);
                 ["mouseDown", "click", "mouseUp"].forEach((eventName) => {
-                    newWindow?.document.addEventListener(eventName, (event) => {
+                    newWindow === null || newWindow === void 0 ? void 0 : newWindow.document.addEventListener(eventName, (event) => {
                         document.dispatchEvent(new CustomEvent(`portal:${eventName}`, {
                             detail: {
                                 mouseEvent: new MouseEvent(eventName, event),
@@ -84,7 +84,7 @@ export const MenuPortal = ({ show, children }) => {
                     });
                 });
                 ["keyup", "keydown", "keypress"].forEach((eventName) => {
-                    newWindow?.document.addEventListener(eventName, (event) => {
+                    newWindow === null || newWindow === void 0 ? void 0 : newWindow.document.addEventListener(eventName, (event) => {
                         document.dispatchEvent(new CustomEvent(`portal:${eventName}`, {
                             detail: new KeyboardEvent(event.type, event),
                         }));
@@ -96,8 +96,9 @@ export const MenuPortal = ({ show, children }) => {
         };
         initMenu();
         return () => {
-            const win = childWindow || menuAutoResizer?.childWindow;
-            const keyboardNav = keyboardNavigation || win?.keyboardNavigation;
+            var _a;
+            const win = childWindow || (menuAutoResizer === null || menuAutoResizer === void 0 ? void 0 : menuAutoResizer.childWindow);
+            const keyboardNav = keyboardNavigation || ((_a = win) === null || _a === void 0 ? void 0 : _a.keyboardNavigation);
             if (keyboardNav)
                 keyboardNav.detach();
             if (menuAutoResizer) {

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

@@ -1 +1 @@
-{"version":3,"file":"MenuPortal.js","sourceRoot":"","sources":["../../../src/components/menu/MenuPortal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport { MenuContext } from \"./menuContext\";\r\nimport { calculateDimensions, injectCSS } from \"./menuHelpers\";\r\nimport { KeyboardNavigation } from \"./keyboardNavigation\";\r\nimport { MenuAutoResizer } from \"./MenuAutoResizer\";\r\nimport { useState, useEffect, useContext, useMemo } from \"react\";\r\nimport { useMenu } from \"../../hooks/useMenu\";\r\n// Typescript ambient module loaded auto-magically from typeroots from core/types/index.d.ts\r\nimport { SpawnParams } from \"services/window/Launcher/launcher\";\r\n\r\nexport const MenuPortal: React.FunctionComponent<{\r\n\tshow: boolean;\r\n}> = ({ show, children }) => {\r\n\tconst { thisMenuId, menuWidth, menuHeight, className, maxHeight } = useContext(MenuContext);\r\n\r\n\tconst { blurMenu } = useMenu();\r\n\t// Container div for React portal\r\n\tconst [element, setElement] = useState<HTMLElement>();\r\n\tconst [childWindow, setChildWindow] = useState<Window | null>(null);\r\n\tconst isAutoResizable = !menuHeight;\r\n\r\n\t/**\r\n\t * KeyboardNavigation registers global hotkeys for navigating through a menu with cursor keys.\r\n\t * Those hotkeys are registered/unregistered based on visibility of the child window.\r\n\t * The KeyboardNavigation class is a singleton and so is memoized. It is created when the child window is available.\r\n\t */\r\n\tconst keyboardNavigation = useMemo(() => {\r\n\t\tif (childWindow) return new KeyboardNavigation(childWindow, \".menu-item\");\r\n\t\telse return null;\r\n\t}, [childWindow]);\r\n\r\n\t/**\r\n\t * Show and hide window. This effect will run whenever the `show` prop changes,\r\n\t * generally initiated by a click to <MenuToggle>.\r\n\t */\r\n\tuseEffect(() => {\r\n\t\t// If child window isn't yet initialized then no-op\r\n\t\tif (!childWindow) return;\r\n\r\n\t\t/**\r\n\t\t * Sets visibility of the window.\r\n\t\t * When being made visible, the window size and location is recalculated and updated.\r\n\t\t */\r\n\t\tconst runWindowEffects = async () => {\r\n\t\t\tconst finWindow = (childWindow as any).fin.desktop.Window.getCurrent();\r\n\t\t\tif (show) {\r\n\t\t\t\tconst { left, top, height } = await calculateDimensions(childWindow, thisMenuId, menuHeight, maxHeight);\r\n\r\n\t\t\t\tconst params: SpawnParams = {\r\n\t\t\t\t\tposition: \"absolute\",\r\n\t\t\t\t\tleft: left,\r\n\t\t\t\t\ttop: top,\r\n\t\t\t\t\theight: height,\r\n\t\t\t\t\tforceOntoMonitor: \"monitorRect\",\r\n\t\t\t\t};\r\n\r\n\t\t\t\tconst { name } = childWindow.window;\r\n\r\n\t\t\t\t/**\r\n\t\t\t\t * Use Finsemble to show the window. We might be tempted simply to use childWindow.moveTo() or childWindow.resizeTo()\r\n\t\t\t\t * but those commands limit the child window to a single monitor. We want to position the window relative to the\r\n\t\t\t\t * monitor on which the toolbar currently resides. showWindow() is monitor aware, so by using monitor=\"mine\" we can\r\n\t\t\t\t * ensure that the menu will always open on the same monitor as the toolbar. Since our toolbar has built in logic\r\n\t\t\t\t * to avoid straddling, we can be sure that the menu will never have to guess whether it exists on the left or right\r\n\t\t\t\t * side of the toolbar. Finally, showWindow() forces windows to open entirely on a monitor, so it will slide the\r\n\t\t\t\t * menu to the left or right as necessary to prevent it from straddling.\r\n\t\t\t\t */\r\n\t\t\t\tFSBL.Clients.LauncherClient.showWindow({ windowName: name }, params);\r\n\t\t\t\tfinWindow.focus();\r\n\r\n\t\t\t\tFSBL.FinsembleWindow.getInstance({ name: name }, (e: any, fsblWindow: any) => {\r\n\t\t\t\t\tfsblWindow.setAlwaysOnTop({ alwaysOnTop: true });\r\n\t\t\t\t});\r\n\r\n\t\t\t\tif (keyboardNavigation) {\r\n\t\t\t\t\t(childWindow as any).keyboardNavigation = keyboardNavigation;\r\n\t\t\t\t\tkeyboardNavigation.attach();\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tconst { name } = childWindow.window;\r\n\t\t\t\tFSBL.FinsembleWindow.getInstance({ name: name }, (e: any, fsblWindow: any) => {\r\n\t\t\t\t\tfsblWindow.setAlwaysOnTop({ alwaysOnTop: false });\r\n\t\t\t\t});\r\n\r\n\t\t\t\tfinWindow.hide();\r\n\t\t\t\tif (keyboardNavigation) keyboardNavigation.detach();\r\n\t\t\t}\r\n\t\t};\r\n\t\trunWindowEffects();\r\n\t}, [show]);\r\n\r\n\t/**\r\n\t * Initialize the window. This should only run once.\r\n\t */\r\n\tuseEffect(() => {\r\n\t\tlet menuAutoResizer: any = null;\r\n\t\t/**\r\n\t\t * This function creates the external window\r\n\t\t * appends portal container to childWindow's body\r\n\t\t * and enables keyboard navigation.\r\n\t\t *\r\n\t\t */\r\n\t\tconst initMenu = async () => {\r\n\t\t\t/**\r\n\t\t\t * Initial size and location of the menu is irrelevant because it is hidden.\r\n\t\t\t * The menu will be resized and positioned correctly when it is shown.\r\n\t\t\t */\r\n\t\t\tconst features = `height=1,width=${menuWidth},left=0,top=0,opacity=1`;\r\n\r\n\t\t\t/**\r\n\t\t\t * Opens the window which will contain the menu contents. This looks like a browser window open\r\n\t\t\t * but actually opens an Electron window which FEA intercepts. FEA uses the `childWindowOptions`\r\n\t\t\t * json configuration to determine how to display the window. `childWindowOptions.show` should\r\n\t\t\t * be set to `false` otherwise a white window will flash prior to the menu being rendered.\r\n\t\t\t *\r\n\t\t\t *\r\n\t\t\t * The \"/component/toolbar/menu.html\" is just an empty page. It's necessary to reference a real page\r\n\t\t\t * rather than about:blank in order that the \"origin\" is correct for the page. Many CSS ui-assets such\r\n\t\t\t * as fonts and images are set with relative paths that require a correct origin.\r\n\t\t\t *\r\n\t\t\t * Note, we append the menu ID for automated testing. This allows Selenium to\r\n\t\t\t * uniquely identify each menu.\r\n\t\t\t */\r\n\t\t\tlet newWindow = window.open(`./menu.html#${thisMenuId}`, undefined, features);\r\n\t\t\tsetChildWindow(newWindow);\r\n\r\n\t\t\tconst insertWindowContent = () => {\r\n\t\t\t\tif (!newWindow) return;\r\n\r\n\t\t\t\t// Set the child window's <html> tag to class \"menu-portal\" for scrollbar styling\r\n\t\t\t\tnewWindow.document.documentElement.className = \"menu-portal\";\r\n\t\t\t\tisAutoResizable && newWindow.document.body.setAttribute(\"resizing\", \"true\");\r\n\r\n\t\t\t\t// Create the element which will hold our react elements and then append it into the child window's body.\r\n\t\t\t\tconst containerDiv: HTMLElement = document.createElement(\"div\");\r\n\t\t\t\tnewWindow.document.body.appendChild(containerDiv);\r\n\r\n\t\t\t\t// The className that was passed to MenuShell is added to the child window's <body>\r\n\t\t\t\tclassName && className.split(\" \").forEach((name: string) => newWindow!.document.body.classList.add(name));\r\n\t\t\t\t// This will update local state which will cause this React Functional Component\r\n\t\t\t\t// to return a react portal. See comments at the end of this file.\r\n\t\t\t\tsetElement(containerDiv);\r\n\t\t\t\t// Inject css into the child window's <head>\r\n\t\t\t\tinjectCSS(newWindow);\r\n\t\t\t\t// Attach MenuAutoResizer only if the menu doesn't have a fixed height\r\n\t\t\t\tisAutoResizable && (menuAutoResizer = new MenuAutoResizer(newWindow, thisMenuId, menuWidth, maxHeight));\r\n\r\n\t\t\t\t// THE FOLLOWING IS LIKELY DEPRECATED BUT KEEPING JUST IN CASE\r\n\t\t\t\t// Place height on the portal.\r\n\t\t\t\t// inside of the portal, window.outerHeight === 39 (toolbar height).\r\n\t\t\t\t// Knowing the height of the window is important because some menus use that\r\n\t\t\t\t// information to force overflow on certain sections of the menu.\r\n\t\t\t\t(newWindow as any).portalHeight = menuHeight;\r\n\r\n\t\t\t\t/* Close window when a user clicks away.\r\n\t\t\t\tAre you wondering why not just close the window without calling\r\n\t\t\t\ttoggle? because we want to update the state in the store first\r\n\t\t\t\twhich will cause openMenuId to no longer match the shell id\r\n\t\t\t\tand eventually destroy this component which will cause the window\r\n\t\t\t\tto close (see cleanup function).\r\n\t\t\t\t*/\r\n\t\t\t\tnewWindow.addEventListener(\"blur\", blurMenu);\r\n\r\n\t\t\t\t// We need to proxy/fake some events for the following reason:\r\n\t\t\t\t// If you do document.addEventListener inside a component\r\n\t\t\t\t// that is rendered inside react portal, `document` will refer\r\n\t\t\t\t// to toolbar's document instead of the childWindow's document\r\n\t\t\t\t// and for that reason, clicking inside portal will not fire\r\n\t\t\t\t// the window's click event. It will do so when you click\r\n\t\t\t\t// anywhere in the toolbar.\r\n\t\t\t\t[\"mouseDown\", \"click\", \"mouseUp\"].forEach((eventName) => {\r\n\t\t\t\t\tnewWindow?.document.addEventListener(eventName, (event) => {\r\n\t\t\t\t\t\tdocument.dispatchEvent(\r\n\t\t\t\t\t\t\tnew CustomEvent(`portal:${eventName}`, {\r\n\t\t\t\t\t\t\t\tdetail: {\r\n\t\t\t\t\t\t\t\t\t// Devs may need access to the x and y of the cursor\r\n\t\t\t\t\t\t\t\t\tmouseEvent: new MouseEvent(eventName, event),\r\n\t\t\t\t\t\t\t\t\t// And possibly the target element\r\n\t\t\t\t\t\t\t\t\ttarget: event.target,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t});\r\n\t\t\t\t});\r\n\r\n\t\t\t\t/**\r\n\t\t\t\t * Proxies keyboard events from the portal up into the parent window.\r\n\t\t\t\t * instead of e.key, you'll need to access e.detail.key.\r\n\t\t\t\t */\r\n\t\t\t\t[\"keyup\", \"keydown\", \"keypress\"].forEach((eventName) => {\r\n\t\t\t\t\tnewWindow?.document.addEventListener(eventName, (event) => {\r\n\t\t\t\t\t\tdocument.dispatchEvent(\r\n\t\t\t\t\t\t\tnew CustomEvent(`portal:${eventName}`, {\r\n\t\t\t\t\t\t\t\tdetail: new KeyboardEvent(event.type, event),\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t});\r\n\t\t\t\t});\r\n\t\t\t};\r\n\r\n\t\t\tif (newWindow) newWindow.addEventListener(\"load\", insertWindowContent, true);\r\n\t\t};\r\n\r\n\t\tinitMenu();\r\n\r\n\t\treturn () => {\r\n\t\t\t// @todo imesner 20210406 childwindow and keyboardNavigation were both null but hadn't closed the window or released global hotkeys\r\n\t\t\t// This file is a mess and needs significant refactoring to ensure the cleanup occurs and to have less event-hell\r\n\t\t\tconst win = childWindow || menuAutoResizer?.childWindow;\r\n\t\t\tconst keyboardNav = keyboardNavigation || (win as any)?.keyboardNavigation;\r\n\r\n\t\t\tif (keyboardNav) keyboardNav.detach();\r\n\r\n\t\t\tif (menuAutoResizer) {\r\n\t\t\t\tmenuAutoResizer.disconnect();\r\n\t\t\t}\r\n\t\t\tif (win) {\r\n\t\t\t\twin.close();\r\n\t\t\t\tsetChildWindow(null);\r\n\t\t\t}\r\n\t\t};\r\n\t}, [blurMenu, className, menuWidth, menuHeight, maxHeight, thisMenuId]);\r\n\r\n\t// We should only return a react portal when window is ready\r\n\t// and container div appended to its body\r\n\t// See Dan abramov comment about this at:\r\n\t// https://github.com/facebook/react/issues/12355#issuecomment-410996235\r\n\treturn element ? ReactDOM.createPortal(children, element) : null;\r\n};\r\n"]}
+{"version":3,"file":"MenuPortal.js","sourceRoot":"","sources":["../../../src/components/menu/MenuPortal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,QAAQ,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAK9C,MAAM,CAAC,MAAM,UAAU,GAElB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3B,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE5F,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,CAAC;IAE/B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAe,CAAC;IACtD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACpE,MAAM,eAAe,GAAG,CAAC,UAAU,CAAC;IAOpC,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,IAAI,WAAW;YAAE,OAAO,IAAI,kBAAkB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;;YACrE,OAAO,IAAI,CAAC;IAClB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAMlB,SAAS,CAAC,GAAG,EAAE;QAEd,IAAI,CAAC,WAAW;YAAE,OAAO;QAMzB,MAAM,gBAAgB,GAAG,KAAK,IAAI,EAAE;YACnC,MAAM,SAAS,GAAkB,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;YAC7E,IAAI,IAAI,EAAE;gBACT,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,MAAM,mBAAmB,CAAC,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;gBAExG,MAAM,MAAM,GAAgB;oBAC3B,QAAQ,EAAE,UAAU;oBACpB,IAAI,EAAE,IAAI;oBACV,GAAG,EAAE,GAAG;oBACR,MAAM,EAAE,MAAM;oBACd,gBAAgB,EAAE,aAAa;iBAC/B,CAAC;gBAEF,MAAM,EAAE,IAAI,EAAE,GAAG,WAAW,CAAC;gBAW7B,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE,MAAM,CAAC,CAAC;gBAGrE,SAAS,CAAC,KAAK,EAAE,CAAC;gBAGlB,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAM,EAAE,UAAe,EAAE,EAAE;oBAC5E,UAAU,CAAC,cAAc,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;gBAClD,CAAC,CAAC,CAAC;gBAEH,IAAI,kBAAkB,EAAE;oBAEtB,WAAmB,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;oBAC7D,kBAAkB,CAAC,MAAM,EAAE,CAAC;iBAC5B;aACD;iBAAM;gBACN,MAAM,EAAE,IAAI,EAAE,GAAG,WAAW,CAAC;gBAC7B,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAM,EAAE,UAAe,EAAE,EAAE;oBAC5E,UAAU,CAAC,cAAc,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;gBACnD,CAAC,CAAC,CAAC;gBAEH,SAAS,CAAC,IAAI,EAAE,CAAC;gBACjB,IAAI,kBAAkB;oBAAE,kBAAkB,CAAC,MAAM,EAAE,CAAC;aACpD;QACF,CAAC,CAAC;QACF,gBAAgB,EAAE,CAAC;IACpB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAKX,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,eAAe,GAAQ,IAAI,CAAC;QAOhC,MAAM,QAAQ,GAAG,KAAK,IAAI,EAAE;YAK3B,MAAM,QAAQ,GAAG,kBAAkB,SAAS,yBAAyB,CAAC;YAgBtE,IAAI,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,UAAU,EAAE,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;YAC9E,cAAc,CAAC,SAAS,CAAC,CAAC;YAE1B,MAAM,mBAAmB,GAAG,GAAG,EAAE;gBAChC,IAAI,CAAC,SAAS;oBAAE,OAAO;gBAGvB,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,GAAG,aAAa,CAAC;gBAC7D,eAAe,IAAI,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;gBAG5E,MAAM,YAAY,GAAgB,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBAChE,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;gBAGlD,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,IAAY,EAAE,EAAE,CAAC,SAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;gBAG1G,UAAU,CAAC,YAAY,CAAC,CAAC;gBAEzB,SAAS,CAAC,SAAS,CAAC,CAAC;gBAErB,eAAe,IAAI,CAAC,eAAe,GAAG,IAAI,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;gBAOvG,SAAiB,CAAC,YAAY,GAAG,UAAU,CAAC;gBAS7C,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;gBAS7C,CAAC,WAAW,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;oBACvD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;wBACzD,QAAQ,CAAC,aAAa,CACrB,IAAI,WAAW,CAAC,UAAU,SAAS,EAAE,EAAE;4BACtC,MAAM,EAAE;gCAEP,UAAU,EAAE,IAAI,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC;gCAE5C,MAAM,EAAE,KAAK,CAAC,MAAM;6BACpB;yBACD,CAAC,CACF,CAAC;oBACH,CAAC,CAAC,CAAC;gBACJ,CAAC,CAAC,CAAC;gBAMH,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;oBACtD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;wBACzD,QAAQ,CAAC,aAAa,CACrB,IAAI,WAAW,CAAC,UAAU,SAAS,EAAE,EAAE;4BACtC,MAAM,EAAE,IAAI,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;yBAC5C,CAAC,CACF,CAAC;oBACH,CAAC,CAAC,CAAC;gBACJ,CAAC,CAAC,CAAC;YACJ,CAAC,CAAC;YAEF,IAAI,SAAS;gBAAE,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,mBAAmB,EAAE,IAAI,CAAC,CAAC;QAC9E,CAAC,CAAC;QAEF,QAAQ,EAAE,CAAC;QAEX,OAAO,GAAG,EAAE;;YAGX,MAAM,GAAG,GAAG,WAAW,KAAI,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,WAAW,CAAA,CAAC;YACxD,MAAM,WAAW,GAAG,kBAAkB,KAAI,MAAC,GAAW,0CAAE,kBAAkB,CAAA,CAAC;YAE3E,IAAI,WAAW;gBAAE,WAAW,CAAC,MAAM,EAAE,CAAC;YAEtC,IAAI,eAAe,EAAE;gBACpB,eAAe,CAAC,UAAU,EAAE,CAAC;aAC7B;YACD,IAAI,GAAG,EAAE;gBACR,GAAG,CAAC,KAAK,EAAE,CAAC;gBACZ,cAAc,CAAC,IAAI,CAAC,CAAC;aACrB;QACF,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAMxE,OAAO,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AAClE,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport { MenuContext } from \"./menuContext\";\r\nimport { calculateDimensions, injectCSS } from \"./menuHelpers\";\r\nimport { KeyboardNavigation } from \"./keyboardNavigation\";\r\nimport { MenuAutoResizer } from \"./MenuAutoResizer\";\r\nimport { useState, useEffect, useContext, useMemo } from \"react\";\r\nimport { useMenu } from \"../../hooks/useMenu\";\r\nimport { services, FEA } from \"@finsemble/finsemble-core\";\r\n\r\ntype SpawnParams = services.window.types.SpawnParams;\r\n\r\nexport const MenuPortal: React.FunctionComponent<{\r\n\tshow: boolean;\r\n}> = ({ show, children }) => {\r\n\tconst { thisMenuId, menuWidth, menuHeight, className, maxHeight } = useContext(MenuContext);\r\n\r\n\tconst { blurMenu } = useMenu();\r\n\t// Container div for React portal\r\n\tconst [element, setElement] = useState<HTMLElement>();\r\n\tconst [childWindow, setChildWindow] = useState<Window | null>(null);\r\n\tconst isAutoResizable = !menuHeight;\r\n\r\n\t/**\r\n\t * KeyboardNavigation registers global hotkeys for navigating through a menu with cursor keys.\r\n\t * Those hotkeys are registered/unregistered based on visibility of the child window.\r\n\t * The KeyboardNavigation class is a singleton and so is memoized. It is created when the child window is available.\r\n\t */\r\n\tconst keyboardNavigation = useMemo(() => {\r\n\t\tif (childWindow) return new KeyboardNavigation(childWindow, \".menu-item\");\r\n\t\telse return null;\r\n\t}, [childWindow]);\r\n\r\n\t/**\r\n\t * Show and hide window. This effect will run whenever the `show` prop changes,\r\n\t * generally initiated by a click to <MenuToggle>.\r\n\t */\r\n\tuseEffect(() => {\r\n\t\t// If child window isn't yet initialized then no-op\r\n\t\tif (!childWindow) return;\r\n\r\n\t\t/**\r\n\t\t * Sets visibility of the window.\r\n\t\t * When being made visible, the window size and location is recalculated and updated.\r\n\t\t */\r\n\t\tconst runWindowEffects = async () => {\r\n\t\t\tconst finWindow: FEA.FEAWindow = childWindow.fin.desktop.Window.getCurrent();\r\n\t\t\tif (show) {\r\n\t\t\t\tconst { left, top, height } = await calculateDimensions(childWindow, thisMenuId, menuHeight, maxHeight);\r\n\r\n\t\t\t\tconst params: SpawnParams = {\r\n\t\t\t\t\tposition: \"absolute\",\r\n\t\t\t\t\tleft: left,\r\n\t\t\t\t\ttop: top,\r\n\t\t\t\t\theight: height,\r\n\t\t\t\t\tforceOntoMonitor: \"monitorRect\",\r\n\t\t\t\t};\r\n\r\n\t\t\t\tconst { name } = childWindow;\r\n\r\n\t\t\t\t/**\r\n\t\t\t\t * Use Finsemble to show the window. We might be tempted simply to use childWindow.moveTo() or childWindow.resizeTo()\r\n\t\t\t\t * but those commands limit the child window to a single monitor. We want to position the window relative to the\r\n\t\t\t\t * monitor on which the toolbar currently resides. showWindow() is monitor aware, so by using monitor=\"mine\" we can\r\n\t\t\t\t * ensure that the menu will always open on the same monitor as the toolbar. Since our toolbar has built in logic\r\n\t\t\t\t * to avoid straddling, we can be sure that the menu will never have to guess whether it exists on the left or right\r\n\t\t\t\t * side of the toolbar. Finally, showWindow() forces windows to open entirely on a monitor, so it will slide the\r\n\t\t\t\t * menu to the left or right as necessary to prevent it from straddling.\r\n\t\t\t\t */\r\n\t\t\t\tFSBL.Clients.LauncherClient.showWindow({ windowName: name }, params);\r\n\r\n\t\t\t\t// Ensures that the menu has keyboard focus for accessibility\r\n\t\t\t\tfinWindow.focus();\r\n\r\n\t\t\t\t// Ensures that the menu is positioned above any other windows that have setAlwaysOnTop flagged\r\n\t\t\t\tFSBL.FinsembleWindow.getInstance({ name: name }, (e: any, fsblWindow: any) => {\r\n\t\t\t\t\tfsblWindow.setAlwaysOnTop({ alwaysOnTop: true });\r\n\t\t\t\t});\r\n\r\n\t\t\t\tif (keyboardNavigation) {\r\n\t\t\t\t\t// Why??\r\n\t\t\t\t\t(childWindow as any).keyboardNavigation = keyboardNavigation;\r\n\t\t\t\t\tkeyboardNavigation.attach();\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tconst { name } = childWindow;\r\n\t\t\t\tFSBL.FinsembleWindow.getInstance({ name: name }, (e: any, fsblWindow: any) => {\r\n\t\t\t\t\tfsblWindow.setAlwaysOnTop({ alwaysOnTop: false });\r\n\t\t\t\t});\r\n\r\n\t\t\t\tfinWindow.hide();\r\n\t\t\t\tif (keyboardNavigation) keyboardNavigation.detach();\r\n\t\t\t}\r\n\t\t};\r\n\t\trunWindowEffects();\r\n\t}, [show]);\r\n\r\n\t/**\r\n\t * Initialize the window. This should only run once.\r\n\t */\r\n\tuseEffect(() => {\r\n\t\tlet menuAutoResizer: any = null;\r\n\t\t/**\r\n\t\t * This function creates the external window\r\n\t\t * appends portal container to childWindow's body\r\n\t\t * and enables keyboard navigation.\r\n\t\t *\r\n\t\t */\r\n\t\tconst initMenu = async () => {\r\n\t\t\t/**\r\n\t\t\t * Initial size and location of the menu is irrelevant because it is hidden.\r\n\t\t\t * The menu will be resized and positioned correctly when it is shown.\r\n\t\t\t */\r\n\t\t\tconst features = `height=1,width=${menuWidth},left=0,top=0,opacity=1`;\r\n\r\n\t\t\t/**\r\n\t\t\t * Opens the window which will contain the menu contents. This looks like a browser window open\r\n\t\t\t * but actually opens an Electron window which FEA intercepts. FEA uses the `childWindowOptions`\r\n\t\t\t * json configuration to determine how to display the window. `childWindowOptions.show` should\r\n\t\t\t * be set to `false` otherwise a white window will flash prior to the menu being rendered.\r\n\t\t\t *\r\n\t\t\t *\r\n\t\t\t * The \"/component/toolbar/menu.html\" is just an empty page. It's necessary to reference a real page\r\n\t\t\t * rather than about:blank in order that the \"origin\" is correct for the page. Many CSS ui-assets such\r\n\t\t\t * as fonts and images are set with relative paths that require a correct origin.\r\n\t\t\t *\r\n\t\t\t * Note, we append the menu ID for automated testing. This allows Selenium to\r\n\t\t\t * uniquely identify each menu.\r\n\t\t\t */\r\n\t\t\tlet newWindow = window.open(`./menu.html#${thisMenuId}`, undefined, features);\r\n\t\t\tsetChildWindow(newWindow);\r\n\r\n\t\t\tconst insertWindowContent = () => {\r\n\t\t\t\tif (!newWindow) return;\r\n\r\n\t\t\t\t// Set the child window's <html> tag to class \"menu-portal\" for scrollbar styling\r\n\t\t\t\tnewWindow.document.documentElement.className = \"menu-portal\";\r\n\t\t\t\tisAutoResizable && newWindow.document.body.setAttribute(\"resizing\", \"true\");\r\n\r\n\t\t\t\t// Create the element which will hold our react elements and then append it into the child window's body.\r\n\t\t\t\tconst containerDiv: HTMLElement = document.createElement(\"div\");\r\n\t\t\t\tnewWindow.document.body.appendChild(containerDiv);\r\n\r\n\t\t\t\t// The className that was passed to MenuShell is added to the child window's <body>\r\n\t\t\t\tclassName && className.split(\" \").forEach((name: string) => newWindow!.document.body.classList.add(name));\r\n\t\t\t\t// This will update local state which will cause this React Functional Component\r\n\t\t\t\t// to return a react portal. See comments at the end of this file.\r\n\t\t\t\tsetElement(containerDiv);\r\n\t\t\t\t// Inject css into the child window's <head>\r\n\t\t\t\tinjectCSS(newWindow);\r\n\t\t\t\t// Attach MenuAutoResizer only if the menu doesn't have a fixed height\r\n\t\t\t\tisAutoResizable && (menuAutoResizer = new MenuAutoResizer(newWindow, thisMenuId, menuWidth, maxHeight));\r\n\r\n\t\t\t\t// THE FOLLOWING IS LIKELY DEPRECATED BUT KEEPING JUST IN CASE\r\n\t\t\t\t// Place height on the portal.\r\n\t\t\t\t// inside of the portal, window.outerHeight === 39 (toolbar height).\r\n\t\t\t\t// Knowing the height of the window is important because some menus use that\r\n\t\t\t\t// information to force overflow on certain sections of the menu.\r\n\t\t\t\t(newWindow as any).portalHeight = menuHeight;\r\n\r\n\t\t\t\t/* Close window when a user clicks away.\r\n\t\t\t\tAre you wondering why not just close the window without calling\r\n\t\t\t\ttoggle? because we want to update the state in the store first\r\n\t\t\t\twhich will cause openMenuId to no longer match the shell id\r\n\t\t\t\tand eventually destroy this component which will cause the window\r\n\t\t\t\tto close (see cleanup function).\r\n\t\t\t\t*/\r\n\t\t\t\tnewWindow.addEventListener(\"blur\", blurMenu);\r\n\r\n\t\t\t\t// We need to proxy/fake some events for the following reason:\r\n\t\t\t\t// If you do document.addEventListener inside a component\r\n\t\t\t\t// that is rendered inside react portal, `document` will refer\r\n\t\t\t\t// to toolbar's document instead of the childWindow's document\r\n\t\t\t\t// and for that reason, clicking inside portal will not fire\r\n\t\t\t\t// the window's click event. It will do so when you click\r\n\t\t\t\t// anywhere in the toolbar.\r\n\t\t\t\t[\"mouseDown\", \"click\", \"mouseUp\"].forEach((eventName) => {\r\n\t\t\t\t\tnewWindow?.document.addEventListener(eventName, (event) => {\r\n\t\t\t\t\t\tdocument.dispatchEvent(\r\n\t\t\t\t\t\t\tnew CustomEvent(`portal:${eventName}`, {\r\n\t\t\t\t\t\t\t\tdetail: {\r\n\t\t\t\t\t\t\t\t\t// Devs may need access to the x and y of the cursor\r\n\t\t\t\t\t\t\t\t\tmouseEvent: new MouseEvent(eventName, event),\r\n\t\t\t\t\t\t\t\t\t// And possibly the target element\r\n\t\t\t\t\t\t\t\t\ttarget: event.target,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t});\r\n\t\t\t\t});\r\n\r\n\t\t\t\t/**\r\n\t\t\t\t * Proxies keyboard events from the portal up into the parent window.\r\n\t\t\t\t * instead of e.key, you'll need to access e.detail.key.\r\n\t\t\t\t */\r\n\t\t\t\t[\"keyup\", \"keydown\", \"keypress\"].forEach((eventName) => {\r\n\t\t\t\t\tnewWindow?.document.addEventListener(eventName, (event) => {\r\n\t\t\t\t\t\tdocument.dispatchEvent(\r\n\t\t\t\t\t\t\tnew CustomEvent(`portal:${eventName}`, {\r\n\t\t\t\t\t\t\t\tdetail: new KeyboardEvent(event.type, event),\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t});\r\n\t\t\t\t});\r\n\t\t\t};\r\n\r\n\t\t\tif (newWindow) newWindow.addEventListener(\"load\", insertWindowContent, true);\r\n\t\t};\r\n\r\n\t\tinitMenu();\r\n\r\n\t\treturn () => {\r\n\t\t\t// @todo imesner 20210406 childwindow and keyboardNavigation were both null but hadn't closed the window or released global hotkeys\r\n\t\t\t// This file is a mess and needs significant refactoring to ensure the cleanup occurs and to have less event-hell\r\n\t\t\tconst win = childWindow || menuAutoResizer?.childWindow;\r\n\t\t\tconst keyboardNav = keyboardNavigation || (win as any)?.keyboardNavigation;\r\n\r\n\t\t\tif (keyboardNav) keyboardNav.detach();\r\n\r\n\t\t\tif (menuAutoResizer) {\r\n\t\t\t\tmenuAutoResizer.disconnect();\r\n\t\t\t}\r\n\t\t\tif (win) {\r\n\t\t\t\twin.close();\r\n\t\t\t\tsetChildWindow(null);\r\n\t\t\t}\r\n\t\t};\r\n\t}, [blurMenu, className, menuWidth, menuHeight, maxHeight, thisMenuId]);\r\n\r\n\t// We should only return a react portal when window is ready\r\n\t// and container div appended to its body\r\n\t// See Dan abramov comment about this at:\r\n\t// https://github.com/facebook/react/issues/12355#issuecomment-410996235\r\n\treturn element ? ReactDOM.createPortal(children, element) : null;\r\n};\r\n"]}

package/react/components/menu/keyboardNavigation.js

@@ -1,4 +1,3 @@
-const { HotkeyClient } = FSBL.Clients;
 export class KeyboardNavigation {
     constructor(childWin, className) {
         this.selectedItem = undefined;
@@ -171,22 +170,22 @@ export class KeyboardNavigation {
         }
     }
     attach() {
-        HotkeyClient.addGlobalHotkey(["up arrow"], this.onArrowUp);
-        HotkeyClient.addGlobalHotkey(["right arrow"], this.onArrowRight);
-        HotkeyClient.addGlobalHotkey(["left arrow"], this.onArrowLeft);
-        HotkeyClient.addGlobalHotkey(["down arrow"], this.onArrowDown);
-        HotkeyClient.addGlobalHotkey(["return"], this.clickOnItem);
-        HotkeyClient.addGlobalHotkey(["home"], this.focusOnFirst);
-        HotkeyClient.addGlobalHotkey(["end"], this.focusOnLast);
+        FSBL.Clients.HotkeyClient.addGlobalHotkey(["up arrow"], this.onArrowUp);
+        FSBL.Clients.HotkeyClient.addGlobalHotkey(["right arrow"], this.onArrowRight);
+        FSBL.Clients.HotkeyClient.addGlobalHotkey(["left arrow"], this.onArrowLeft);
+        FSBL.Clients.HotkeyClient.addGlobalHotkey(["down arrow"], this.onArrowDown);
+        FSBL.Clients.HotkeyClient.addGlobalHotkey(["return"], this.clickOnItem);
+        FSBL.Clients.HotkeyClient.addGlobalHotkey(["home"], this.focusOnFirst);
+        FSBL.Clients.HotkeyClient.addGlobalHotkey(["end"], this.focusOnLast);
     }
     detach() {
-        HotkeyClient.removeGlobalHotkey(["up arrow"], this.onArrowUp);
-        HotkeyClient.removeGlobalHotkey(["right arrow"], this.onArrowRight);
-        HotkeyClient.removeGlobalHotkey(["left arrow"], this.onArrowLeft);
-        HotkeyClient.removeGlobalHotkey(["down arrow"], this.onArrowDown);
-        HotkeyClient.removeGlobalHotkey(["return"], this.clickOnItem);
-        HotkeyClient.removeGlobalHotkey(["home"], this.focusOnFirst);
-        HotkeyClient.removeGlobalHotkey(["end"], this.focusOnLast);
+        FSBL.Clients.HotkeyClient.removeGlobalHotkey(["up arrow"], this.onArrowUp);
+        FSBL.Clients.HotkeyClient.removeGlobalHotkey(["right arrow"], this.onArrowRight);
+        FSBL.Clients.HotkeyClient.removeGlobalHotkey(["left arrow"], this.onArrowLeft);
+        FSBL.Clients.HotkeyClient.removeGlobalHotkey(["down arrow"], this.onArrowDown);
+        FSBL.Clients.HotkeyClient.removeGlobalHotkey(["return"], this.clickOnItem);
+        FSBL.Clients.HotkeyClient.removeGlobalHotkey(["home"], this.focusOnFirst);
+        FSBL.Clients.HotkeyClient.removeGlobalHotkey(["end"], this.focusOnLast);
     }
 }
 //# sourceMappingURL=keyboardNavigation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"keyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/menu/keyboardNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["const { HotkeyClient }: any = FSBL.Clients;\r\n\r\n/**\r\n * Keyboard navigation allows the end user to navigate through menus using\r\n * cursor keys and to select items using the enter key.\r\n *\r\n * This is stateful. As implemented in MenuPortal, the currently selected\r\n * menu item will remain selected between menu opens and closes.\r\n *\r\n * When an element is selected then the keyboard navigation state is reset\r\n * so that the user will begin again with the first item.\r\n *\r\n * @param childWin Main window or child window reference.\r\n * @param className Selector of elements to apply navigation on.\r\n * @example\r\n * const keyboardNav = KeyboardNavigation(window, \".menu-item\");\r\n * keyboardNav.attach() // enable navigation\r\n * keyboardNav.detach() // disable navigation\r\n */\r\nexport class KeyboardNavigation {\r\n\tprivate childWin: Window;\r\n\r\n\tprivate className: string;\r\n\r\n\tprivate selectedItem: number | undefined = undefined;\r\n\r\n\tprivate selectedIcon: number = -1;\r\n\r\n\t/**\r\n\t *\r\n\t * @param childWin Main window or child window reference\r\n\t * @param className The selector string e.g .menu-item\r\n\t */\r\n\tconstructor(childWin: Window, className: string) {\r\n\t\tthis.childWin = childWin;\r\n\t\tthis.className = className;\r\n\t\tthis.onArrowDown = this.onArrowDown.bind(this);\r\n\t\tthis.onArrowUp = this.onArrowUp.bind(this);\r\n\t\tthis.onArrowRight = this.onArrowRight.bind(this);\r\n\t\tthis.onArrowLeft = this.onArrowLeft.bind(this);\r\n\t\tthis.clickOnItem = this.clickOnItem.bind(this);\r\n\t\tthis.focusOnFirst = this.focusOnFirst.bind(this);\r\n\t\tthis.focusOnLast = this.focusOnLast.bind(this);\r\n\t\tthis.resetFocusOnDOMChanges();\r\n\t}\r\n\r\n\t/**\r\n\t * A mutation observer to watch changes in the DOM\r\n\t * and set the selectedIndex to undefined when changes\r\n\t * observed. We want to start focusing from element with index 0\r\n\t * when the elements order changes.\r\n\t */\r\n\tprivate resetFocusOnDOMChanges() {\r\n\t\tnew MutationObserver(() => {\r\n\t\t\t// Reset selectedIndex when elements added or removed\r\n\t\t\t// from the DOM. The motivation behind this was an issue\r\n\t\t\t// with Brad's search menu where the order of focus is\r\n\t\t\t// messed up when his list of result changes.\r\n\t\t\tthis.selectedItem = undefined;\r\n\t\t}).observe(this.childWin.document.body, {\r\n\t\t\tchildList: true,\r\n\t\t\tcharacterData: false,\r\n\t\t\tsubtree: true,\r\n\t\t});\r\n\t}\r\n\r\n\t/**\r\n\t * Returns list of elements\r\n\t */\r\n\tprivate getElements() {\r\n\t\treturn this.childWin.document.querySelectorAll(this.className);\r\n\t}\r\n\r\n\tprivate getMenuItemIcons(index: number) {\r\n\t\tconst menuItems = this.getElements();\r\n\t\treturn menuItems[index].querySelectorAll(\".menu-item-icon\");\r\n\t}\r\n\r\n\t/**\r\n\t * Remove all focus classes.\r\n\t */\r\n\tprivate removeAllFocus() {\r\n\t\tconst menuItems = this.getElements();\r\n\t\tmenuItems.forEach((item: Element, key: number) => {\r\n\t\t\titem.removeAttribute(\"focused\");\r\n\t\t\tconst icons = this.getMenuItemIcons(key);\r\n\t\t\ticons.forEach((icon: Element) => {\r\n\t\t\t\ticon.removeAttribute(\"focused\");\r\n\t\t\t});\r\n\t\t});\r\n\t}\r\n\r\n\t/**\r\n\t * Sets the focus on a menu item\r\n\t * @param index The index of the menu item in the list\r\n\t */\r\n\tprivate focusOn(index: number) {\r\n\t\tthis.removeAllFocus();\r\n\r\n\t\tconst menuItems = this.getElements();\r\n\t\t// Menu could have no items\r\n\t\tif (!menuItems.length) return;\r\n\t\t// Focus on element and scroll if needed\r\n\t\tmenuItems[index].setAttribute(\"focused\", \"true\");\r\n\t\t(menuItems[index] as any).scrollIntoViewIfNeeded({\r\n\t\t\tbehavior: \"smooth\",\r\n\t\t});\r\n\t}\r\n\r\n\t/**\r\n\t * Sets the focus on a menu item's icon\r\n\t * @param index The index of the menu item in the list\r\n\t * @param iconIndex The index of the menu item's icon (-1 = menu text, not icon)\r\n\t */\r\n\tprivate focusOnIcon(index: number, iconIndex: number) {\r\n\t\tthis.removeAllFocus();\r\n\r\n\t\tconst menuItems = this.getElements();\r\n\t\t// Menu could have no items\r\n\t\tif (!menuItems.length) return;\r\n\r\n\t\tconst icons = this.getMenuItemIcons(index);\r\n\t\t// Defend against possible js runtime error\r\n\t\tif (icons.length < iconIndex) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// scroll if needed\r\n\t\t(menuItems[index] as any).scrollIntoViewIfNeeded({\r\n\t\t\tbehavior: \"smooth\",\r\n\t\t});\r\n\t\t// Focus on menu item text, if relevant\r\n\t\tif (iconIndex === -1) {\r\n\t\t\tmenuItems[index].setAttribute(\"focused\", \"true\");\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\ticons[iconIndex].setAttribute(\"focused\", \"true\");\r\n\t}\r\n\r\n\t/**\r\n\t * Simulates mouse events\r\n\t */\r\n\tprivate clickOnItem() {\r\n\t\tthis.removeAllFocus();\r\n\t\tif (this.selectedItem !== undefined) {\r\n\t\t\tconst elements = this.getElements();\r\n\t\t\tconst selectedItem = elements[this.selectedItem as any];\r\n\t\t\t[\"mousedown\", \"click\", \"mouseup\"].forEach((event) => {\r\n\t\t\t\tif (this.selectedIcon > -1) {\r\n\t\t\t\t\tconst icons = this.getMenuItemIcons(this.selectedItem as any);\r\n\t\t\t\t\tconst selectedIcon = icons[this.selectedIcon as any];\r\n\t\t\t\t\tif (selectedIcon) {\r\n\t\t\t\t\t\tselectedIcon.dispatchEvent(\r\n\t\t\t\t\t\t\tnew MouseEvent(event, {\r\n\t\t\t\t\t\t\t\tview: this.childWin,\r\n\t\t\t\t\t\t\t\tbubbles: true,\r\n\t\t\t\t\t\t\t\tcancelable: true,\r\n\t\t\t\t\t\t\t\tbuttons: 1,\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\tif (selectedItem && selectedItem.dispatchEvent) {\r\n\t\t\t\t\tselectedItem.dispatchEvent(\r\n\t\t\t\t\t\tnew MouseEvent(event, {\r\n\t\t\t\t\t\t\tview: this.childWin,\r\n\t\t\t\t\t\t\tbubbles: true,\r\n\t\t\t\t\t\t\tcancelable: true,\r\n\t\t\t\t\t\t\tbuttons: 1,\r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\t/**\r\n\t\t\t * When an element is selected we reset the menu to focus on the first item.\r\n\t\t\t * Per Dan Nicolai UX specialist.\r\n\t\t\t */\r\n\t\t\tthis.selectedItem = undefined;\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Invoked when a user presses on the arrow up key\r\n\t */\r\n\tprivate onArrowUp() {\r\n\t\t// On first key up/down press, we want\r\n\t\t// the focus to be on first item\r\n\t\tif (this.selectedItem === undefined) {\r\n\t\t\tthis.selectedItem = 0;\r\n\t\t\treturn this.focusOn(0);\r\n\t\t}\r\n\t\t// Set the focus on the previous item\r\n\t\tthis.selectedItem--;\r\n\t\tif (this.selectedItem < 0) {\r\n\t\t\t// If we are back to the begining\r\n\t\t\t// set the focus on last item\r\n\t\t\tthis.selectedItem = this.getElements().length - 1;\r\n\t\t}\r\n\t\tthis.focusOn(this.selectedItem);\r\n\t}\r\n\r\n\t/**\r\n\t * Invoked when user press the arrow down key\r\n\t */\r\n\tprivate onArrowDown() {\r\n\t\tif (this.selectedItem === undefined) {\r\n\t\t\tthis.selectedItem = 0;\r\n\t\t\treturn this.focusOn(0);\r\n\t\t}\r\n\t\t// The the focus on the next item\r\n\t\tthis.selectedItem++;\r\n\t\t// If we reached the end, then go back to first item\r\n\t\tif (this.selectedItem === this.getElements().length) {\r\n\t\t\tthis.selectedItem = 0;\r\n\t\t}\r\n\t\tthis.focusOn(this.selectedItem);\r\n\t}\r\n\r\n\t/**\r\n\t * Invoked when user press the arrow right key\r\n\t */\r\n\tprivate onArrowRight() {\r\n\t\tif (this.selectedItem === undefined) {\r\n\t\t\tthis.selectedItem = 0;\r\n\t\t\treturn this.focusOn(0);\r\n\t\t}\r\n\r\n\t\tconst menuItems = this.getElements();\r\n\t\t// Menu could have no items\r\n\t\tif (!menuItems.length) return;\r\n\r\n\t\tconst icons = this.getMenuItemIcons(this.selectedItem);\r\n\t\tif (icons.length === 0) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tthis.selectedIcon++;\r\n\t\tif (this.selectedIcon === icons.length) {\r\n\t\t\tthis.selectedIcon = -1;\r\n\t\t}\r\n\t\tthis.focusOnIcon(this.selectedItem, this.selectedIcon);\r\n\t}\r\n\r\n\t/**\r\n\t * Invoked when user press the arrow left key\r\n\t */\r\n\tprivate onArrowLeft() {\r\n\t\tif (this.selectedItem === undefined) {\r\n\t\t\tthis.selectedItem = 0;\r\n\t\t\treturn this.focusOn(0);\r\n\t\t}\r\n\r\n\t\tconst menuItems = this.getElements();\r\n\t\t// Menu could have no items\r\n\t\tif (!menuItems.length) return;\r\n\r\n\t\tconst icons = this.getMenuItemIcons(this.selectedItem);\r\n\t\tif (icons.length === 0) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tthis.selectedIcon--;\r\n\t\tif (this.selectedIcon === icons.length) {\r\n\t\t\tthis.selectedIcon = -1;\r\n\t\t}\r\n\t\tthis.focusOnIcon(this.selectedItem, this.selectedIcon);\r\n\t}\r\n\r\n\tprivate focusOnFirst() {\r\n\t\tthis.selectedItem = 0;\r\n\t\tthis.selectedIcon = -1;\r\n\t\tthis.focusOn(0);\r\n\t}\r\n\r\n\tprivate focusOnLast() {\r\n\t\tthis.selectedIcon = -1;\r\n\t\tconst { length } = this.getElements();\r\n\t\tif (length) {\r\n\t\t\tthis.selectedItem = length - 1;\r\n\t\t\tthis.focusOn(length - 1);\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Adds global hot keys for up/down arrow\r\n\t */\r\n\tpublic attach() {\r\n\t\t// Register hotkeys\r\n\t\tHotkeyClient.addGlobalHotkey([\"up arrow\"], this.onArrowUp);\r\n\t\tHotkeyClient.addGlobalHotkey([\"right arrow\"], this.onArrowRight);\r\n\t\tHotkeyClient.addGlobalHotkey([\"left arrow\"], this.onArrowLeft);\r\n\t\tHotkeyClient.addGlobalHotkey([\"down arrow\"], this.onArrowDown);\r\n\t\tHotkeyClient.addGlobalHotkey([\"return\"], this.clickOnItem);\r\n\t\tHotkeyClient.addGlobalHotkey([\"home\"], this.focusOnFirst);\r\n\t\tHotkeyClient.addGlobalHotkey([\"end\"], this.focusOnLast);\r\n\t}\r\n\r\n\t/**\r\n\t * Remove global got keys for up/down arrow\r\n\t */\r\n\tpublic detach() {\r\n\t\t// Remove registered hotkeys\r\n\t\tHotkeyClient.removeGlobalHotkey([\"up arrow\"], this.onArrowUp);\r\n\t\tHotkeyClient.removeGlobalHotkey([\"right arrow\"], this.onArrowRight);\r\n\t\tHotkeyClient.removeGlobalHotkey([\"left arrow\"], this.onArrowLeft);\r\n\t\tHotkeyClient.removeGlobalHotkey([\"down arrow\"], this.onArrowDown);\r\n\t\tHotkeyClient.removeGlobalHotkey([\"return\"], this.clickOnItem);\r\n\t\tHotkeyClient.removeGlobalHotkey([\"home\"], this.focusOnFirst);\r\n\t\tHotkeyClient.removeGlobalHotkey([\"end\"], this.focusOnLast);\r\n\t}\r\n}\r\n"]}
+{"version":3,"file":"keyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/menu/keyboardNavigation.ts"],"names":[],"mappings":"AAiBA,MAAM,OAAO,kBAAkB;IAc9B,YAAY,QAAgB,EAAE,SAAiB;QATvC,iBAAY,GAAuB,SAAS,CAAC;QAE7C,iBAAY,GAAW,CAAC,CAAC,CAAC;QAQjC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAC/B,CAAC;IAQO,sBAAsB;QAC7B,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAKzB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAC/B,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE;YACvC,SAAS,EAAE,IAAI;YACf,aAAa,EAAE,KAAK;YACpB,OAAO,EAAE,IAAI;SACb,CAAC,CAAC;IACJ,CAAC;IAKO,WAAW;QAClB,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAChE,CAAC;IAEO,gBAAgB,CAAC,KAAa;QACrC,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QACrC,OAAO,SAAS,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IAC7D,CAAC;IAKO,cAAc;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QACrC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAa,EAAE,GAAW,EAAE,EAAE;YAChD,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;YAChC,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;YACzC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAa,EAAE,EAAE;gBAC/B,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;YACjC,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACJ,CAAC;IAMO,OAAO,CAAC,KAAa;QAC5B,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAErC,IAAI,CAAC,SAAS,CAAC,MAAM;YAAE,OAAO;QAE9B,SAAS,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QAChD,SAAS,CAAC,KAAK,CAAS,CAAC,sBAAsB,CAAC;YAChD,QAAQ,EAAE,QAAQ;SAClB,CAAC,CAAC;IACJ,CAAC;IAOO,WAAW,CAAC,KAAa,EAAE,SAAiB;QACnD,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAErC,IAAI,CAAC,SAAS,CAAC,MAAM;YAAE,OAAO;QAE9B,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAE3C,IAAI,KAAK,CAAC,MAAM,GAAG,SAAS,EAAE;YAC7B,OAAO;SACP;QAGA,SAAS,CAAC,KAAK,CAAS,CAAC,sBAAsB,CAAC;YAChD,QAAQ,EAAE,QAAQ;SAClB,CAAC,CAAC;QAEH,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE;YACrB,SAAS,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;YACjD,OAAO;SACP;QAED,KAAK,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAClD,CAAC;IAKO,WAAW;QAClB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE;YACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YACpC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAmB,CAAC,CAAC;YACxD,CAAC,WAAW,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBACnD,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,EAAE;oBAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAmB,CAAC,CAAC;oBAC9D,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,YAAmB,CAAC,CAAC;oBACrD,IAAI,YAAY,EAAE;wBACjB,YAAY,CAAC,aAAa,CACzB,IAAI,UAAU,CAAC,KAAK,EAAE;4BACrB,IAAI,EAAE,IAAI,CAAC,QAAQ;4BACnB,OAAO,EAAE,IAAI;4BACb,UAAU,EAAE,IAAI;4BAChB,OAAO,EAAE,CAAC;yBACV,CAAC,CACF,CAAC;wBACF,OAAO;qBACP;iBACD;gBACD,IAAI,YAAY,IAAI,YAAY,CAAC,aAAa,EAAE;oBAC/C,YAAY,CAAC,aAAa,CACzB,IAAI,UAAU,CAAC,KAAK,EAAE;wBACrB,IAAI,EAAE,IAAI,CAAC,QAAQ;wBACnB,OAAO,EAAE,IAAI;wBACb,UAAU,EAAE,IAAI;wBAChB,OAAO,EAAE,CAAC;qBACV,CAAC,CACF,CAAC;iBACF;YACF,CAAC,CAAC,CAAC;YAKH,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;SAC9B;IACF,CAAC;IAKO,SAAS;QAGhB,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE;YACpC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;YACtB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SACvB;QAED,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE;YAG1B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;SAClD;QACD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACjC,CAAC;IAKO,WAAW;QAClB,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE;YACpC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;YACtB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SACvB;QAED,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpB,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE;YACpD,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;SACtB;QACD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACjC,CAAC;IAKO,YAAY;QACnB,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE;YACpC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;YACtB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SACvB;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAErC,IAAI,CAAC,SAAS,CAAC,MAAM;YAAE,OAAO;QAE9B,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YACvB,OAAO;SACP;QAED,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK,CAAC,MAAM,EAAE;YACvC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;SACvB;QACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACxD,CAAC;IAKO,WAAW;QAClB,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE;YACpC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;YACtB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SACvB;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAErC,IAAI,CAAC,SAAS,CAAC,MAAM;YAAE,OAAO;QAE9B,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YACvB,OAAO;SACP;QAED,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK,CAAC,MAAM,EAAE;YACvC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;SACvB;QACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACxD,CAAC;IAEO,YAAY;QACnB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QACtB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;QACvB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACjB,CAAC;IAEO,WAAW;QAClB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;QACvB,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QACtC,IAAI,MAAM,EAAE;YACX,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,CAAC,CAAC;YAC/B,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;SACzB;IACF,CAAC;IAKM,MAAM;QAEZ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACxE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,aAAa,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9E,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5E,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5E,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACxE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACvE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACtE,CAAC;IAKM,MAAM;QAEZ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAC3E,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,aAAa,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACjF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC/E,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC/E,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC3E,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1E,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACzE,CAAC;CACD","sourcesContent":["/**\r\n * Keyboard navigation allows the end user to navigate through menus using\r\n * cursor keys and to select items using the enter key.\r\n *\r\n * This is stateful. As implemented in MenuPortal, the currently selected\r\n * menu item will remain selected between menu opens and closes.\r\n *\r\n * When an element is selected then the keyboard navigation state is reset\r\n * so that the user will begin again with the first item.\r\n *\r\n * @param childWin Main window or child window reference.\r\n * @param className Selector of elements to apply navigation on.\r\n * @example\r\n * const keyboardNav = KeyboardNavigation(window, \".menu-item\");\r\n * keyboardNav.attach() // enable navigation\r\n * keyboardNav.detach() // disable navigation\r\n */\r\nexport class KeyboardNavigation {\r\n\tprivate childWin: Window;\r\n\r\n\tprivate className: string;\r\n\r\n\tprivate selectedItem: number | undefined = undefined;\r\n\r\n\tprivate selectedIcon: number = -1;\r\n\r\n\t/**\r\n\t *\r\n\t * @param childWin Main window or child window reference\r\n\t * @param className The selector string e.g .menu-item\r\n\t */\r\n\tconstructor(childWin: Window, className: string) {\r\n\t\tthis.childWin = childWin;\r\n\t\tthis.className = className;\r\n\t\tthis.onArrowDown = this.onArrowDown.bind(this);\r\n\t\tthis.onArrowUp = this.onArrowUp.bind(this);\r\n\t\tthis.onArrowRight = this.onArrowRight.bind(this);\r\n\t\tthis.onArrowLeft = this.onArrowLeft.bind(this);\r\n\t\tthis.clickOnItem = this.clickOnItem.bind(this);\r\n\t\tthis.focusOnFirst = this.focusOnFirst.bind(this);\r\n\t\tthis.focusOnLast = this.focusOnLast.bind(this);\r\n\t\tthis.resetFocusOnDOMChanges();\r\n\t}\r\n\r\n\t/**\r\n\t * A mutation observer to watch changes in the DOM\r\n\t * and set the selectedIndex to undefined when changes\r\n\t * observed. We want to start focusing from element with index 0\r\n\t * when the elements order changes.\r\n\t */\r\n\tprivate resetFocusOnDOMChanges() {\r\n\t\tnew MutationObserver(() => {\r\n\t\t\t// Reset selectedIndex when elements added or removed\r\n\t\t\t// from the DOM. The motivation behind this was an issue\r\n\t\t\t// with Brad's search menu where the order of focus is\r\n\t\t\t// messed up when his list of result changes.\r\n\t\t\tthis.selectedItem = undefined;\r\n\t\t}).observe(this.childWin.document.body, {\r\n\t\t\tchildList: true,\r\n\t\t\tcharacterData: false,\r\n\t\t\tsubtree: true,\r\n\t\t});\r\n\t}\r\n\r\n\t/**\r\n\t * Returns list of elements\r\n\t */\r\n\tprivate getElements() {\r\n\t\treturn this.childWin.document.querySelectorAll(this.className);\r\n\t}\r\n\r\n\tprivate getMenuItemIcons(index: number) {\r\n\t\tconst menuItems = this.getElements();\r\n\t\treturn menuItems[index].querySelectorAll(\".menu-item-icon\");\r\n\t}\r\n\r\n\t/**\r\n\t * Remove all focus classes.\r\n\t */\r\n\tprivate removeAllFocus() {\r\n\t\tconst menuItems = this.getElements();\r\n\t\tmenuItems.forEach((item: Element, key: number) => {\r\n\t\t\titem.removeAttribute(\"focused\");\r\n\t\t\tconst icons = this.getMenuItemIcons(key);\r\n\t\t\ticons.forEach((icon: Element) => {\r\n\t\t\t\ticon.removeAttribute(\"focused\");\r\n\t\t\t});\r\n\t\t});\r\n\t}\r\n\r\n\t/**\r\n\t * Sets the focus on a menu item\r\n\t * @param index The index of the menu item in the list\r\n\t */\r\n\tprivate focusOn(index: number) {\r\n\t\tthis.removeAllFocus();\r\n\r\n\t\tconst menuItems = this.getElements();\r\n\t\t// Menu could have no items\r\n\t\tif (!menuItems.length) return;\r\n\t\t// Focus on element and scroll if needed\r\n\t\tmenuItems[index].setAttribute(\"focused\", \"true\");\r\n\t\t(menuItems[index] as any).scrollIntoViewIfNeeded({\r\n\t\t\tbehavior: \"smooth\",\r\n\t\t});\r\n\t}\r\n\r\n\t/**\r\n\t * Sets the focus on a menu item's icon\r\n\t * @param index The index of the menu item in the list\r\n\t * @param iconIndex The index of the menu item's icon (-1 = menu text, not icon)\r\n\t */\r\n\tprivate focusOnIcon(index: number, iconIndex: number) {\r\n\t\tthis.removeAllFocus();\r\n\r\n\t\tconst menuItems = this.getElements();\r\n\t\t// Menu could have no items\r\n\t\tif (!menuItems.length) return;\r\n\r\n\t\tconst icons = this.getMenuItemIcons(index);\r\n\t\t// Defend against possible js runtime error\r\n\t\tif (icons.length < iconIndex) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// scroll if needed\r\n\t\t(menuItems[index] as any).scrollIntoViewIfNeeded({\r\n\t\t\tbehavior: \"smooth\",\r\n\t\t});\r\n\t\t// Focus on menu item text, if relevant\r\n\t\tif (iconIndex === -1) {\r\n\t\t\tmenuItems[index].setAttribute(\"focused\", \"true\");\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\ticons[iconIndex].setAttribute(\"focused\", \"true\");\r\n\t}\r\n\r\n\t/**\r\n\t * Simulates mouse events\r\n\t */\r\n\tprivate clickOnItem() {\r\n\t\tthis.removeAllFocus();\r\n\t\tif (this.selectedItem !== undefined) {\r\n\t\t\tconst elements = this.getElements();\r\n\t\t\tconst selectedItem = elements[this.selectedItem as any];\r\n\t\t\t[\"mousedown\", \"click\", \"mouseup\"].forEach((event) => {\r\n\t\t\t\tif (this.selectedIcon > -1) {\r\n\t\t\t\t\tconst icons = this.getMenuItemIcons(this.selectedItem as any);\r\n\t\t\t\t\tconst selectedIcon = icons[this.selectedIcon as any];\r\n\t\t\t\t\tif (selectedIcon) {\r\n\t\t\t\t\t\tselectedIcon.dispatchEvent(\r\n\t\t\t\t\t\t\tnew MouseEvent(event, {\r\n\t\t\t\t\t\t\t\tview: this.childWin,\r\n\t\t\t\t\t\t\t\tbubbles: true,\r\n\t\t\t\t\t\t\t\tcancelable: true,\r\n\t\t\t\t\t\t\t\tbuttons: 1,\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\tif (selectedItem && selectedItem.dispatchEvent) {\r\n\t\t\t\t\tselectedItem.dispatchEvent(\r\n\t\t\t\t\t\tnew MouseEvent(event, {\r\n\t\t\t\t\t\t\tview: this.childWin,\r\n\t\t\t\t\t\t\tbubbles: true,\r\n\t\t\t\t\t\t\tcancelable: true,\r\n\t\t\t\t\t\t\tbuttons: 1,\r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\t/**\r\n\t\t\t * When an element is selected we reset the menu to focus on the first item.\r\n\t\t\t * Per Dan Nicolai UX specialist.\r\n\t\t\t */\r\n\t\t\tthis.selectedItem = undefined;\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Invoked when a user presses on the arrow up key\r\n\t */\r\n\tprivate onArrowUp() {\r\n\t\t// On first key up/down press, we want\r\n\t\t// the focus to be on first item\r\n\t\tif (this.selectedItem === undefined) {\r\n\t\t\tthis.selectedItem = 0;\r\n\t\t\treturn this.focusOn(0);\r\n\t\t}\r\n\t\t// Set the focus on the previous item\r\n\t\tthis.selectedItem--;\r\n\t\tif (this.selectedItem < 0) {\r\n\t\t\t// If we are back to the begining\r\n\t\t\t// set the focus on last item\r\n\t\t\tthis.selectedItem = this.getElements().length - 1;\r\n\t\t}\r\n\t\tthis.focusOn(this.selectedItem);\r\n\t}\r\n\r\n\t/**\r\n\t * Invoked when user press the arrow down key\r\n\t */\r\n\tprivate onArrowDown() {\r\n\t\tif (this.selectedItem === undefined) {\r\n\t\t\tthis.selectedItem = 0;\r\n\t\t\treturn this.focusOn(0);\r\n\t\t}\r\n\t\t// The the focus on the next item\r\n\t\tthis.selectedItem++;\r\n\t\t// If we reached the end, then go back to first item\r\n\t\tif (this.selectedItem === this.getElements().length) {\r\n\t\t\tthis.selectedItem = 0;\r\n\t\t}\r\n\t\tthis.focusOn(this.selectedItem);\r\n\t}\r\n\r\n\t/**\r\n\t * Invoked when user press the arrow right key\r\n\t */\r\n\tprivate onArrowRight() {\r\n\t\tif (this.selectedItem === undefined) {\r\n\t\t\tthis.selectedItem = 0;\r\n\t\t\treturn this.focusOn(0);\r\n\t\t}\r\n\r\n\t\tconst menuItems = this.getElements();\r\n\t\t// Menu could have no items\r\n\t\tif (!menuItems.length) return;\r\n\r\n\t\tconst icons = this.getMenuItemIcons(this.selectedItem);\r\n\t\tif (icons.length === 0) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tthis.selectedIcon++;\r\n\t\tif (this.selectedIcon === icons.length) {\r\n\t\t\tthis.selectedIcon = -1;\r\n\t\t}\r\n\t\tthis.focusOnIcon(this.selectedItem, this.selectedIcon);\r\n\t}\r\n\r\n\t/**\r\n\t * Invoked when user press the arrow left key\r\n\t */\r\n\tprivate onArrowLeft() {\r\n\t\tif (this.selectedItem === undefined) {\r\n\t\t\tthis.selectedItem = 0;\r\n\t\t\treturn this.focusOn(0);\r\n\t\t}\r\n\r\n\t\tconst menuItems = this.getElements();\r\n\t\t// Menu could have no items\r\n\t\tif (!menuItems.length) return;\r\n\r\n\t\tconst icons = this.getMenuItemIcons(this.selectedItem);\r\n\t\tif (icons.length === 0) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tthis.selectedIcon--;\r\n\t\tif (this.selectedIcon === icons.length) {\r\n\t\t\tthis.selectedIcon = -1;\r\n\t\t}\r\n\t\tthis.focusOnIcon(this.selectedItem, this.selectedIcon);\r\n\t}\r\n\r\n\tprivate focusOnFirst() {\r\n\t\tthis.selectedItem = 0;\r\n\t\tthis.selectedIcon = -1;\r\n\t\tthis.focusOn(0);\r\n\t}\r\n\r\n\tprivate focusOnLast() {\r\n\t\tthis.selectedIcon = -1;\r\n\t\tconst { length } = this.getElements();\r\n\t\tif (length) {\r\n\t\t\tthis.selectedItem = length - 1;\r\n\t\t\tthis.focusOn(length - 1);\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Adds global hot keys for up/down arrow\r\n\t */\r\n\tpublic attach() {\r\n\t\t// Register hotkeys\r\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey([\"up arrow\"], this.onArrowUp);\r\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey([\"right arrow\"], this.onArrowRight);\r\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey([\"left arrow\"], this.onArrowLeft);\r\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey([\"down arrow\"], this.onArrowDown);\r\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey([\"return\"], this.clickOnItem);\r\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey([\"home\"], this.focusOnFirst);\r\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey([\"end\"], this.focusOnLast);\r\n\t}\r\n\r\n\t/**\r\n\t * Remove global got keys for up/down arrow\r\n\t */\r\n\tpublic detach() {\r\n\t\t// Remove registered hotkeys\r\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey([\"up arrow\"], this.onArrowUp);\r\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey([\"right arrow\"], this.onArrowRight);\r\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey([\"left arrow\"], this.onArrowLeft);\r\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey([\"down arrow\"], this.onArrowDown);\r\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey([\"return\"], this.clickOnItem);\r\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey([\"home\"], this.focusOnFirst);\r\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey([\"end\"], this.focusOnLast);\r\n\t}\r\n}\r\n"]}

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

@@ -1,7 +1,5 @@
 import React from "react";
-const NoNotifications = () => {
-    return (React.createElement("div", { className: "no-notifications" },
-        React.createElement("p", null, "No notifications to display")));
-};
+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

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

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

@@ -1,7 +1,5 @@
 import React from "react";
-const Drawer = (props) => {
-    return (React.createElement("div", { id: "drawer", className: props.classNames },
-        React.createElement("div", { className: "drawer-container" }, props.children)));
-};
+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

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

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

@@ -19,13 +19,11 @@ const DrawerControls = () => {
                 }
             }
         });
-        setDrawerControlProps({ ...drawerControlProps });
+        setDrawerControlProps(Object.assign({}, drawerControlProps));
     };
     const renderControls = () => {
         let className = "notifications-center-controls__filter-btn";
-        return drawerControlProps.controls.map((control) => {
-            return (React.createElement("div", { key: control.action, className: `${className} ${drawerControlProps.active === control.action ? "active" : ""}`, onClick: () => toggleControl(control), style: selectionMode === SelectionMode.SELECTION ? { pointerEvents: "none", opacity: "0.4" } : {} }, control.label));
-        });
+        return drawerControlProps.controls.map((control) => (React.createElement("div", { key: control.action, className: `${className} ${drawerControlProps.active === control.action ? "active" : ""}`, onClick: () => 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);

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerControls.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/drawer/DrawerControls.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext } from \"react\";\r\n\r\n// Context\r\nimport { NotificationsContext } from \"../../notificationsContext\";\r\n\r\n// Types & Constants\r\nimport { Control } from \"../../types\";\r\nimport { ViewMode, SelectionMode } from \"../../constants\";\r\n\r\n// Hooks\r\nimport {\r\n\tmarkNotificationsRead,\r\n\tmarkNotificationsUnread,\r\n\tdismissNotification,\r\n\tsnoozeNotifications,\r\n} from \"../../../../hooks/useNotifications\";\r\n\r\n// Components\r\nimport IconButton from \"../shared/IconButton\";\r\n\r\nconst DrawerControls: React.FunctionComponent = () => {\r\n\tconst notificationsContext = useContext(NotificationsContext);\r\n\tconst {\r\n\t\tviewMode,\r\n\t\tsetViewMode,\r\n\t\tdrawerControlProps,\r\n\t\tsetDrawerControlProps,\r\n\t\tselectionMode,\r\n\t\tsetSelectionMode,\r\n\t\tcheckedNotifications,\r\n\t} = notificationsContext;\r\n\r\n\tconst toggleControl = (clickedControl: Control) => {\r\n\t\t// If we click on the control aready active, then there's nothing to toggle and we bail out.\r\n\t\tif (clickedControl.action === drawerControlProps.active) return;\r\n\t\tdrawerControlProps.controls.map((control: Control) => {\r\n\t\t\tif (control.action === clickedControl.action) {\r\n\t\t\t\tif (drawerControlProps.active === control.action) {\r\n\t\t\t\t\tdelete drawerControlProps.active;\r\n\t\t\t\t} else {\r\n\t\t\t\t\tdrawerControlProps.active = control.action;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\t\tsetDrawerControlProps({ ...drawerControlProps });\r\n\t};\r\n\r\n\tconst renderControls = () => {\r\n\t\tlet className = \"notifications-center-controls__filter-btn\";\r\n\t\treturn drawerControlProps.controls.map((control: Control) => {\r\n\t\t\treturn (\r\n\t\t\t\t<div\r\n\t\t\t\t\tkey={control.action}\r\n\t\t\t\t\tclassName={`${className} ${drawerControlProps.active === control.action ? \"active\" : \"\"}`}\r\n\t\t\t\t\tonClick={() => toggleControl(control)}\r\n\t\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { pointerEvents: \"none\", opacity: \"0.4\" } : {}}\r\n\t\t\t\t>\r\n\t\t\t\t\t{control.label}\r\n\t\t\t\t</div>\r\n\t\t\t);\r\n\t\t});\r\n\t};\r\n\r\n\tconst toggleSelect = () => {\r\n\t\tsetSelectionMode(\r\n\t\t\tselectionMode === SelectionMode.NO_SELECTION ? SelectionMode.SELECTION : SelectionMode.NO_SELECTION\r\n\t\t);\r\n\t};\r\n\r\n\tconst readChecked = () => {\r\n\t\tmarkNotificationsRead(checkedNotifications);\r\n\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\r\n\t};\r\n\r\n\tconst unreadChecked = () => {\r\n\t\tmarkNotificationsUnread(checkedNotifications);\r\n\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\r\n\t};\r\n\r\n\tconst hideChecked = () => {\r\n\t\tdismissNotification(checkedNotifications);\r\n\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\r\n\t};\r\n\r\n\tconst snoozeChecked = () => {\r\n\t\tsnoozeNotifications(checkedNotifications);\r\n\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div id=\"notifications-center-controls\">\r\n\t\t\t<div className=\"notifications-center-controls__row\">{renderControls()}</div>\r\n\t\t\t<div className=\"notifications-center-controls__row\">\r\n\t\t\t\t<div className=\"notifications-center-controls__filter-btn\" onClick={() => toggleSelect()}>\r\n\t\t\t\t\t<i\r\n\t\t\t\t\t\tclassName={selectionMode === SelectionMode.NO_SELECTION ? \"ff-check-mark\" : \"ff-close\"}\r\n\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\tpaddingRight: \"5px\",\r\n\t\t\t\t\t\t\tcolor: selectionMode === SelectionMode.NO_SELECTION ? \"var(--accent-positive)\" : \"\",\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\tSelect\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"notifications-center-controls__filter-btn active\"\r\n\t\t\t\t\tonClick={() => readChecked()}\r\n\t\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { visibility: \"visible\" } : { visibility: \"hidden\" }}\r\n\t\t\t\t>\r\n\t\t\t\t\tMark Read\r\n\t\t\t\t</div>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"notifications-center-controls__filter-btn active\"\r\n\t\t\t\t\tonClick={() => unreadChecked()}\r\n\t\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { visibility: \"visible\" } : { visibility: \"hidden\" }}\r\n\t\t\t\t>\r\n\t\t\t\t\tMark Unread\r\n\t\t\t\t</div>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"notifications-center-controls__filter-btn active\"\r\n\t\t\t\t\tonClick={() => hideChecked()}\r\n\t\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { visibility: \"visible\" } : { visibility: \"hidden\" }}\r\n\t\t\t\t>\r\n\t\t\t\t\tHide\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"notifications-center-controls__filter-btn active\"\r\n\t\t\t\t\tonClick={() => snoozeChecked()}\r\n\t\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { visibility: \"visible\" } : { visibility: \"hidden\" }}\r\n\t\t\t\t>\r\n\t\t\t\t\tSnooze\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div className=\"notifications-center-controls__view_mode\">\r\n\t\t\t\t\t<IconButton\r\n\t\t\t\t\t\ticonName=\"ff-chart-alt-2\"\r\n\t\t\t\t\t\tclassNames={viewMode === ViewMode.CARD ? \"active\" : \"\"}\r\n\t\t\t\t\t\tclickHandler={() => {\r\n\t\t\t\t\t\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\r\n\t\t\t\t\t\t\tsetViewMode(ViewMode.CARD);\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<IconButton\r\n\t\t\t\t\t\ticonName=\"ff-adp-hamburger\"\r\n\t\t\t\t\t\tclassNames={viewMode === ViewMode.LIST ? \"active\" : \"\"}\r\n\t\t\t\t\t\tclickHandler={() => {\r\n\t\t\t\t\t\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\r\n\t\t\t\t\t\t\tsetViewMode(ViewMode.LIST);\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default DrawerControls;\r\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 } from \"react\";\r\n\r\n// Context\r\nimport { NotificationsContext } from \"../../notificationsContext\";\r\n\r\n// Types & Constants\r\nimport { Control } from \"../../types\";\r\nimport { ViewMode, SelectionMode } from \"../../constants\";\r\n\r\n// Hooks\r\nimport {\r\n\tmarkNotificationsRead,\r\n\tmarkNotificationsUnread,\r\n\tdismissNotification,\r\n\tsnoozeNotifications,\r\n} from \"../../../../hooks/useNotifications\";\r\n\r\n// Components\r\nimport IconButton from \"../shared/IconButton\";\r\n\r\nconst DrawerControls: React.FunctionComponent = () => {\r\n\tconst notificationsContext = useContext(NotificationsContext);\r\n\tconst {\r\n\t\tviewMode,\r\n\t\tsetViewMode,\r\n\t\tdrawerControlProps,\r\n\t\tsetDrawerControlProps,\r\n\t\tselectionMode,\r\n\t\tsetSelectionMode,\r\n\t\tcheckedNotifications,\r\n\t} = notificationsContext;\r\n\r\n\tconst toggleControl = (clickedControl: Control) => {\r\n\t\t// If we click on the control aready active, then there's nothing to toggle and we bail out.\r\n\t\tif (clickedControl.action === drawerControlProps.active) return;\r\n\t\tdrawerControlProps.controls.map((control: Control) => {\r\n\t\t\tif (control.action === clickedControl.action) {\r\n\t\t\t\tif (drawerControlProps.active === control.action) {\r\n\t\t\t\t\tdelete drawerControlProps.active;\r\n\t\t\t\t} else {\r\n\t\t\t\t\tdrawerControlProps.active = control.action;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\t\tsetDrawerControlProps({ ...drawerControlProps });\r\n\t};\r\n\r\n\tconst renderControls = () => {\r\n\t\tlet className = \"notifications-center-controls__filter-btn\";\r\n\t\treturn drawerControlProps.controls.map((control: Control) => (\r\n\t\t\t<div\r\n\t\t\t\tkey={control.action}\r\n\t\t\t\tclassName={`${className} ${drawerControlProps.active === control.action ? \"active\" : \"\"}`}\r\n\t\t\t\tonClick={() => toggleControl(control)}\r\n\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { pointerEvents: \"none\", opacity: \"0.4\" } : {}}\r\n\t\t\t>\r\n\t\t\t\t{control.label}\r\n\t\t\t</div>\r\n\t\t));\r\n\t};\r\n\r\n\tconst toggleSelect = () => {\r\n\t\tsetSelectionMode(\r\n\t\t\tselectionMode === SelectionMode.NO_SELECTION ? SelectionMode.SELECTION : SelectionMode.NO_SELECTION\r\n\t\t);\r\n\t};\r\n\r\n\tconst readChecked = () => {\r\n\t\tmarkNotificationsRead(checkedNotifications);\r\n\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\r\n\t};\r\n\r\n\tconst unreadChecked = () => {\r\n\t\tmarkNotificationsUnread(checkedNotifications);\r\n\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\r\n\t};\r\n\r\n\tconst hideChecked = () => {\r\n\t\tdismissNotification(checkedNotifications);\r\n\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\r\n\t};\r\n\r\n\tconst snoozeChecked = () => {\r\n\t\tsnoozeNotifications(checkedNotifications);\r\n\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div id=\"notifications-center-controls\">\r\n\t\t\t<div className=\"notifications-center-controls__row\">{renderControls()}</div>\r\n\t\t\t<div className=\"notifications-center-controls__row\">\r\n\t\t\t\t<div className=\"notifications-center-controls__filter-btn\" onClick={() => toggleSelect()}>\r\n\t\t\t\t\t<i\r\n\t\t\t\t\t\tclassName={selectionMode === SelectionMode.NO_SELECTION ? \"ff-check-mark\" : \"ff-close\"}\r\n\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\tpaddingRight: \"5px\",\r\n\t\t\t\t\t\t\tcolor: selectionMode === SelectionMode.NO_SELECTION ? \"var(--accent-positive)\" : \"\",\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\tSelect\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"notifications-center-controls__filter-btn active\"\r\n\t\t\t\t\tonClick={() => readChecked()}\r\n\t\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { visibility: \"visible\" } : { visibility: \"hidden\" }}\r\n\t\t\t\t>\r\n\t\t\t\t\tMark Read\r\n\t\t\t\t</div>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"notifications-center-controls__filter-btn active\"\r\n\t\t\t\t\tonClick={() => unreadChecked()}\r\n\t\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { visibility: \"visible\" } : { visibility: \"hidden\" }}\r\n\t\t\t\t>\r\n\t\t\t\t\tMark Unread\r\n\t\t\t\t</div>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"notifications-center-controls__filter-btn active\"\r\n\t\t\t\t\tonClick={() => hideChecked()}\r\n\t\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { visibility: \"visible\" } : { visibility: \"hidden\" }}\r\n\t\t\t\t>\r\n\t\t\t\t\tHide\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"notifications-center-controls__filter-btn active\"\r\n\t\t\t\t\tonClick={() => snoozeChecked()}\r\n\t\t\t\t\tstyle={selectionMode === SelectionMode.SELECTION ? { visibility: \"visible\" } : { visibility: \"hidden\" }}\r\n\t\t\t\t>\r\n\t\t\t\t\tSnooze\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div className=\"notifications-center-controls__view_mode\">\r\n\t\t\t\t\t<IconButton\r\n\t\t\t\t\t\ticonName=\"ff-chart-alt-2\"\r\n\t\t\t\t\t\tclassNames={viewMode === ViewMode.CARD ? \"active\" : \"\"}\r\n\t\t\t\t\t\tclickHandler={() => {\r\n\t\t\t\t\t\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\r\n\t\t\t\t\t\t\tsetViewMode(ViewMode.CARD);\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<IconButton\r\n\t\t\t\t\t\ticonName=\"ff-adp-hamburger\"\r\n\t\t\t\t\t\tclassNames={viewMode === ViewMode.LIST ? \"active\" : \"\"}\r\n\t\t\t\t\t\tclickHandler={() => {\r\n\t\t\t\t\t\t\tsetSelectionMode(SelectionMode.NO_SELECTION);\r\n\t\t\t\t\t\t\tsetViewMode(ViewMode.LIST);\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default DrawerControls;\r\n"]}

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

@@ -33,10 +33,7 @@ const DrawerHeader = ({ poppedOutStatus, popOutToggle }) => {
     const [searchInputValue, setSearchInputValue] = useState(searchString);
     const [showMenu, setShowMenu] = useState(false);
     const closeDrawerClick = () => {
-        setUIState({
-            ...uiState,
-            showCenter: false,
-        });
+        setUIState(Object.assign(Object.assign({}, uiState), { showCenter: false }));
     };
     const toggleMenu = () => {
         setShowMenu(!showMenu);

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