@finsemble/finsemble-ui 1.0.0-beta-1

package/react/components/linker/LinkerMenu.js

@@ -0,0 +1,129 @@
+/*!
+ * Copyright 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React, { useEffect, useState, useRef } from "react";
+import { FinsembleProvider } from "../FinsembleProvider";
+import { useDispatch, useSelector, Provider } from "react-redux";
+import { actions, store } from "./remoteRedux";
+import "../../assets/css/linkerWindow.css";
+import { LinkerElement as LinkerElementDeprecated } from "./LinkerMenuDeprecated";
+const LinkerElement = () => {
+    var _a, _b, _c, _d;
+    const state = useSelector((currentState) => currentState);
+    const dispatch = useDispatch();
+    const { activeWindowName } = state;
+    const joinedChannels = (_c = (_b = (_a = state === null || state === void 0 ? void 0 : state.clients) === null || _a === void 0 ? void 0 : _a[activeWindowName !== null && activeWindowName !== void 0 ? activeWindowName : ""]) === null || _b === void 0 ? void 0 : _b.joinedChannels) !== null && _c !== void 0 ? _c : [];
+    const allChannels = (_d = state === null || state === void 0 ? void 0 : state.allChannels) !== null && _d !== void 0 ? _d : [];
+    // Track which menu item has focus for keyboard users
+    const [focusedMenuIndex, setFocusedMenuIndex] = useState(0);
+    const containerElement = useRef(null);
+    const hideWindow = () => {
+        // Must blur or you end up having to click twice to show the window.
+        // If you just hide, the first time the user clicks
+        // on the linker button, the blur will trigger, which will hide the window.
+        finsembleWindow.blur();
+        finsembleWindow.hide();
+        setFocusedMenuIndex(0);
+    };
+    useEffect(() => {
+        // Move focus to container element, so that keystrokes can be captured for keyboard users (accessibility)
+        containerElement.current && containerElement.current.focus();
+        // Without these events, the linker menu is opened but doesn't focus, so the blur event never fires, and the menu is left
+        // orphaned and sad.
+        const focusWindow = () => {
+            finsembleWindow.focus();
+        };
+        FSBL.Clients.Logger.system.log("Linker component is mounted. Initializing.");
+        finsembleWindow.addEventListener("blurred", hideWindow);
+        finsembleWindow.addEventListener("shown", focusWindow);
+        return () => {
+            FSBL.Clients.Logger.system.log("Linker component is unmounted. Cleaning up the event listeners.");
+            finsembleWindow.removeEventListener("blurred", hideWindow);
+            finsembleWindow.removeEventListener("shown", focusWindow);
+        };
+    }, []);
+    const toggleChannel = (name) => {
+        // These action creators can now be imported from finsemble-api
+        if (activeWindowName) {
+            if (joinedChannels.includes(name)) {
+                dispatch(actions.unlinkChannels({
+                    type: "linker/unlinkChannels",
+                    payload: {
+                        channels: [name],
+                    },
+                    meta: {
+                        windowName: activeWindowName,
+                    },
+                }));
+            }
+            else {
+                dispatch(actions.linkChannels({
+                    type: "linker/linkChannels",
+                    payload: {
+                        channels: [name],
+                    },
+                    meta: {
+                        windowName: activeWindowName,
+                    },
+                }));
+            }
+        }
+        hideWindow();
+    };
+    const channelElements = activeWindowName &&
+        allChannels.map(({ name, cssClassName }, index) => {
+            const active = joinedChannels.includes(name);
+            return (React.createElement("div", { key: name, className: `channel-wrapper ${cssClassName} ${focusedMenuIndex === index ? "focused" : ""}`, onClick: () => toggleChannel(name) },
+                React.createElement("div", { className: "channel-label" }, name),
+                React.createElement("div", { className: "linker-glyph" }, active ? React.createElement("i", { className: "active-linker-group ff-check-mark" }) : null)));
+        });
+    const manageKeyboardNavigation = (evt) => {
+        const lastChannelIndex = allChannels.length - 1;
+        if (evt.key === "ArrowDown") {
+            setFocusedMenuIndex(focusedMenuIndex >= lastChannelIndex ? 0 : focusedMenuIndex + 1);
+        }
+        else if (evt.key === "ArrowUp") {
+            setFocusedMenuIndex(focusedMenuIndex <= 0 ? lastChannelIndex : focusedMenuIndex - 1);
+        }
+        else if (evt.key === "Enter") {
+            toggleChannel(allChannels[focusedMenuIndex].name);
+        }
+        else if (evt.key === "Escape") {
+            hideWindow();
+        }
+    };
+    return (React.createElement("div", { className: "linkerContainer", tabIndex: 0, role: "menu", onKeyDown: manageKeyboardNavigation, ref: containerElement }, channelElements));
+};
+/**
+ * Picks whether to display the current or deprecated LinkerElement.
+ * If config `finsemble.servicesConfig.linker.enabled` is set to true then the deprecated version will be used.
+ *
+ * This code should be removed once the linkerClient is removed from Finsemble.
+ */
+const WhichLinker = () => {
+    const [whichLinker, setWhichLinker] = React.useState("");
+    useEffect(() => {
+        (async () => {
+            const { data } = await FSBL.Clients.ConfigClient.getValue({
+                field: "finsemble.servicesConfig.linker.enabled",
+            });
+            if (data) {
+                setWhichLinker("LinkerElementDeprecated");
+            }
+            else {
+                setWhichLinker("LinkerElement");
+            }
+        })();
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        whichLinker === "LinkerElement" && (React.createElement(Provider, { store: store },
+            React.createElement(LinkerElement, null))),
+        whichLinker === "LinkerElementDeprecated" && React.createElement(LinkerElementDeprecated, null)));
+};
+/**
+ * The Linker icon on the window titlebar that launches the linker menu.
+ */
+export const LinkerMenu = () => (React.createElement(FinsembleProvider, null,
+    React.createElement(WhichLinker, null)));
+//# sourceMappingURL=LinkerMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkerMenu.js","sourceRoot":"","sources":["../../../src/components/linker/LinkerMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React, { useEffect, useState, useRef } from \"react\";\nimport { FinsembleProvider } from \"../FinsembleProvider\";\nimport { useDispatch, useSelector, Provider } from \"react-redux\";\nimport { LinkerStore, actions, store } from \"./remoteRedux\";\nimport \"../../assets/css/linkerWindow.css\";\nimport { LinkerElement as LinkerElementDeprecated } from \"./LinkerMenuDeprecated\";\n\ntype Channel = LinkerStore[\"allChannels\"][0];\ntype JoinedChannels = string[];\n\nconst LinkerElement: React.FunctionComponent = () => {\n\tconst state: LinkerStore = useSelector((currentState: any) => currentState);\n\tconst dispatch = useDispatch();\n\tconst { activeWindowName } = state;\n\tconst joinedChannels: JoinedChannels = state?.clients?.[activeWindowName ?? \"\"]?.joinedChannels ?? [];\n\tconst allChannels: Channel[] = state?.allChannels ?? [];\n\t// Track which menu item has focus for keyboard users\n\tconst [focusedMenuIndex, setFocusedMenuIndex] = useState(0);\n\tconst containerElement = useRef<HTMLDivElement>(null);\n\n\tconst hideWindow = () => {\n\t\t// Must blur or you end up having to click twice to show the window.\n\t\t// If you just hide, the first time the user clicks\n\t\t// on the linker button, the blur will trigger, which will hide the window.\n\t\tfinsembleWindow.blur();\n\t\tfinsembleWindow.hide();\n\t\tsetFocusedMenuIndex(0);\n\t};\n\n\tuseEffect(() => {\n\t\t// Move focus to container element, so that keystrokes can be captured for keyboard users (accessibility)\n\t\tcontainerElement.current && containerElement.current.focus();\n\n\t\t// Without these events, the linker menu is opened but doesn't focus, so the blur event never fires, and the menu is left\n\t\t// orphaned and sad.\n\n\t\tconst focusWindow = () => {\n\t\t\tfinsembleWindow.focus();\n\t\t};\n\n\t\tFSBL.Clients.Logger.system.log(\"Linker component is mounted. Initializing.\");\n\t\tfinsembleWindow.addEventListener(\"blurred\", hideWindow);\n\t\tfinsembleWindow.addEventListener(\"shown\", focusWindow);\n\n\t\treturn () => {\n\t\t\tFSBL.Clients.Logger.system.log(\"Linker component is unmounted. Cleaning up the event listeners.\");\n\t\t\tfinsembleWindow.removeEventListener(\"blurred\", hideWindow);\n\t\t\tfinsembleWindow.removeEventListener(\"shown\", focusWindow);\n\t\t};\n\t}, []);\n\n\tconst toggleChannel = (name: string) => {\n\t\t// These action creators can now be imported from finsemble-api\n\t\tif (activeWindowName) {\n\t\t\tif (joinedChannels.includes(name)) {\n\t\t\t\tdispatch(\n\t\t\t\t\tactions.unlinkChannels({\n\t\t\t\t\t\ttype: \"linker/unlinkChannels\",\n\t\t\t\t\t\tpayload: {\n\t\t\t\t\t\t\tchannels: [name],\n\t\t\t\t\t\t},\n\t\t\t\t\t\tmeta: {\n\t\t\t\t\t\t\twindowName: activeWindowName,\n\t\t\t\t\t\t},\n\t\t\t\t\t})\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tdispatch(\n\t\t\t\t\tactions.linkChannels({\n\t\t\t\t\t\ttype: \"linker/linkChannels\",\n\t\t\t\t\t\tpayload: {\n\t\t\t\t\t\t\tchannels: [name],\n\t\t\t\t\t\t},\n\t\t\t\t\t\tmeta: {\n\t\t\t\t\t\t\twindowName: activeWindowName,\n\t\t\t\t\t\t},\n\t\t\t\t\t})\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t\thideWindow();\n\t};\n\n\tconst channelElements =\n\t\tactiveWindowName &&\n\t\tallChannels.map(({ name, cssClassName }, index: number) => {\n\t\t\tconst active = joinedChannels.includes(name);\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tkey={name}\n\t\t\t\t\tclassName={`channel-wrapper ${cssClassName} ${focusedMenuIndex === index ? \"focused\" : \"\"}`}\n\t\t\t\t\tonClick={() => toggleChannel(name)}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"channel-label\">{name}</div>\n\t\t\t\t\t<div className=\"linker-glyph\">{active ? <i className=\"active-linker-group ff-check-mark\"></i> : null}</div>\n\t\t\t\t</div>\n\t\t\t);\n\t\t});\n\n\tconst manageKeyboardNavigation = (evt: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tconst lastChannelIndex = allChannels.length - 1;\n\t\tif (evt.key === \"ArrowDown\") {\n\t\t\tsetFocusedMenuIndex(focusedMenuIndex >= lastChannelIndex ? 0 : focusedMenuIndex + 1);\n\t\t} else if (evt.key === \"ArrowUp\") {\n\t\t\tsetFocusedMenuIndex(focusedMenuIndex <= 0 ? lastChannelIndex : focusedMenuIndex - 1);\n\t\t} else if (evt.key === \"Enter\") {\n\t\t\ttoggleChannel(allChannels[focusedMenuIndex].name);\n\t\t} else if (evt.key === \"Escape\") {\n\t\t\thideWindow();\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"linkerContainer\"\n\t\t\ttabIndex={0}\n\t\t\trole=\"menu\"\n\t\t\tonKeyDown={manageKeyboardNavigation}\n\t\t\tref={containerElement}\n\t\t>\n\t\t\t{channelElements}\n\t\t</div>\n\t);\n};\n\n/**\n * Picks whether to display the current or deprecated LinkerElement.\n * If config `finsemble.servicesConfig.linker.enabled` is set to true then the deprecated version will be used.\n *\n * This code should be removed once the linkerClient is removed from Finsemble.\n */\nconst WhichLinker = () => {\n\tconst [whichLinker, setWhichLinker] = React.useState(\"\");\n\n\tuseEffect(() => {\n\t\t(async () => {\n\t\t\tconst { data } = await FSBL.Clients.ConfigClient.getValue({\n\t\t\t\tfield: \"finsemble.servicesConfig.linker.enabled\",\n\t\t\t});\n\t\t\tif (data) {\n\t\t\t\tsetWhichLinker(\"LinkerElementDeprecated\");\n\t\t\t} else {\n\t\t\t\tsetWhichLinker(\"LinkerElement\");\n\t\t\t}\n\t\t})();\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t{whichLinker === \"LinkerElement\" && (\n\t\t\t\t<Provider store={store}>\n\t\t\t\t\t<LinkerElement />\n\t\t\t\t</Provider>\n\t\t\t)}\n\t\t\t{whichLinker === \"LinkerElementDeprecated\" && <LinkerElementDeprecated />}\n\t\t</>\n\t);\n};\n\n/**\n * The Linker icon on the window titlebar that launches the linker menu.\n */\nexport const LinkerMenu = () => (\n\t<FinsembleProvider>\n\t\t<WhichLinker />\n\t</FinsembleProvider>\n);\n"]}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import "../../assets/css/linkerWindow.css";
+export declare const LinkerElement: () => JSX.Element;
+/**
+ * The Linker icon on the window titlebar that launches the linker menu.
+ */
+export declare const LinkerMenu: () => JSX.Element;

package/react/components/linker/LinkerMenuDeprecated.js

@@ -0,0 +1,38 @@
+/*!
+ * Copyright 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ *
+ * This is a deprecated version of LinkerMenu which uses the linkerClient. It is not compatible with FDC3 interop.
+ */
+import * as React from "react";
+import { useLinker } from "../../hooks/useLinker";
+import { FinsembleProvider } from "../FinsembleProvider";
+import "../../assets/css/linkerWindow.css";
+const MAXIMUM_CHANNEL_SELECTIONS = 20;
+const HIT_MAXIMUM_CHANNEL_SELECTIONS_ERROR_MESSAGE = `Attempted to render more channels than allowed. UI may look bad displaying more than ${MAXIMUM_CHANNEL_SELECTIONS} channels`;
+export const LinkerElement = () => {
+    FSBL.Clients.Logger.deprecated("This is a deprecated version of LinkerMenu which uses the linkerClient.  It will be removed in a future Finsemble version. It is not compatible with FDC3 interop.");
+    const { state, toggleChannel } = useLinker();
+    const allChannels = Object.values(state.channels);
+    const channelElements = allChannels.map(({ color, border, name, active, id }, index) => {
+        if (index > MAXIMUM_CHANNEL_SELECTIONS - 1) {
+            FSBL.Clients.Logger.error(HIT_MAXIMUM_CHANNEL_SELECTIONS_ERROR_MESSAGE);
+            return;
+        }
+        const groupClass = `linkerGroup ${color}`;
+        const style = {
+            backgroundColor: color,
+            border: `1px solid ${border !== null && border !== void 0 ? border : color}`,
+        };
+        return (React.createElement("div", { key: id, className: "channel-wrapper", onClick: () => toggleChannel(id) },
+            state.isAccessibleLinker ? React.createElement("div", { className: "channel-label" }, name) : null,
+            React.createElement("div", { className: groupClass, style: style }, active ? React.createElement("i", { className: "active-linker-group ff-check-mark" }) : null)));
+    });
+    return React.createElement("div", { className: "linkerContainer" }, channelElements);
+};
+/**
+ * The Linker icon on the window titlebar that launches the linker menu.
+ */
+export const LinkerMenu = () => (React.createElement(FinsembleProvider, null,
+    React.createElement(LinkerElement, null)));
+//# sourceMappingURL=LinkerMenuDeprecated.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkerMenuDeprecated.js","sourceRoot":"","sources":["../../../src/components/linker/LinkerMenuDeprecated.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,mCAAmC,CAAC;AAE3C,MAAM,0BAA0B,GAAG,EAAE,CAAC;AACtC,MAAM,4CAA4C,GAAG,wFAAwF,0BAA0B,WAAW,CAAC;AAEnL,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IACjC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAC7B,oKAAoK,CACpK,CAAC;IACF,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,CAAC;IAE7C,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAc,CAAC;IAC/D,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;QACtF,IAAI,KAAK,GAAG,0BAA0B,GAAG,CAAC,EAAE;YAC3C,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,4CAA4C,CAAC,CAAC;YACxE,OAAO;SACP;QACD,MAAM,UAAU,GAAG,eAAe,KAAK,EAAE,CAAC;QAC1C,MAAM,KAAK,GAAG;YACb,eAAe,EAAE,KAAK;YACtB,MAAM,EAAE,aAAa,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,KAAK,EAAE;SACtC,CAAC;QACF,OAAO,CACN,6BAAK,GAAG,EAAE,EAAE,EAAE,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC;YACxE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,eAAe,IAAE,IAAI,CAAO,CAAC,CAAC,CAAC,IAAI;YAC9E,6BAAK,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,IACtC,MAAM,CAAC,CAAC,CAAC,2BAAG,SAAS,EAAC,mCAAmC,GAAK,CAAC,CAAC,CAAC,IAAI,CACjE,CACD,CACN,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,6BAAK,SAAS,EAAC,iBAAiB,IAAE,eAAe,CAAO,CAAC;AACjE,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CAC/B,oBAAC,iBAAiB;IACjB,oBAAC,aAAa,OAAG,CACE,CACpB,CAAC","sourcesContent":["/*!\n * Copyright 2020 by ChartIQ, Inc.\n * All rights reserved.\n *\n * This is a deprecated version of LinkerMenu which uses the linkerClient. It is not compatible with FDC3 interop.\n */\nimport * as React from \"react\";\n\nimport { Channel } from \"../../types/linkerTypes\";\nimport { useLinker } from \"../../hooks/useLinker\";\nimport { FinsembleProvider } from \"../FinsembleProvider\";\nimport \"../../assets/css/linkerWindow.css\";\n\nconst MAXIMUM_CHANNEL_SELECTIONS = 20;\nconst HIT_MAXIMUM_CHANNEL_SELECTIONS_ERROR_MESSAGE = `Attempted to render more channels than allowed. UI may look bad displaying more than ${MAXIMUM_CHANNEL_SELECTIONS} channels`;\n\nexport const LinkerElement = () => {\n\tFSBL.Clients.Logger.deprecated(\n\t\t\"This is a deprecated version of LinkerMenu which uses the linkerClient.  It will be removed in a future Finsemble version. It is not compatible with FDC3 interop.\"\n\t);\n\tconst { state, toggleChannel } = useLinker();\n\n\tconst allChannels = Object.values(state.channels) as Channel[];\n\tconst channelElements = allChannels.map(({ color, border, name, active, id }, index) => {\n\t\tif (index > MAXIMUM_CHANNEL_SELECTIONS - 1) {\n\t\t\tFSBL.Clients.Logger.error(HIT_MAXIMUM_CHANNEL_SELECTIONS_ERROR_MESSAGE);\n\t\t\treturn;\n\t\t}\n\t\tconst groupClass = `linkerGroup ${color}`;\n\t\tconst style = {\n\t\t\tbackgroundColor: color,\n\t\t\tborder: `1px solid ${border ?? color}`,\n\t\t};\n\t\treturn (\n\t\t\t<div key={id} className=\"channel-wrapper\" onClick={() => toggleChannel(id)}>\n\t\t\t\t{state.isAccessibleLinker ? <div className=\"channel-label\">{name}</div> : null}\n\t\t\t\t<div className={groupClass} style={style}>\n\t\t\t\t\t{active ? <i className=\"active-linker-group ff-check-mark\"></i> : null}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t});\n\n\treturn <div className=\"linkerContainer\">{channelElements}</div>;\n};\n\n/**\n * The Linker icon on the window titlebar that launches the linker menu.\n */\nexport const LinkerMenu = () => (\n\t<FinsembleProvider>\n\t\t<LinkerElement />\n\t</FinsembleProvider>\n);\n"]}

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

@@ -0,0 +1 @@
+export { LinkerMenu } from "./LinkerMenu";

package/react/components/linker/index.js

@@ -0,0 +1,2 @@
+export { LinkerMenu } from "./LinkerMenu";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/linker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { LinkerMenu } from \"./LinkerMenu\";\n"]}

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

@@ -0,0 +1,12 @@
+import { EnhancedStore } from "@reduxjs/toolkit";
+import { services } from "@finsemble/finsemble-api";
+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<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

@@ -0,0 +1,21 @@
+import { configureStore, createAction } from "@reduxjs/toolkit";
+const { remoteRedux } = FSBL;
+const dummyReducer = (state) => state;
+const emptyStore = {
+    clients: {},
+    allChannels: [],
+    connectIdToJoinedChannel: {},
+};
+export const store = configureStore({
+    preloadedState: emptyStore,
+    reducer: dummyReducer,
+    enhancers: [
+        remoteRedux.remoteReduxClientEnhancer({ server: "@@finsemble/remoteRedux/InteropStore", slice: "linker" }),
+    ],
+});
+export const actions = {
+    setActiveWindow: createAction("linker/setActiveWindow"),
+    linkChannels: createAction("linker/linkChannels"),
+    unlinkChannels: createAction("linker/unlinkChannels"),
+};
+//# sourceMappingURL=remoteRedux.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"remoteRedux.js","sourceRoot":"","sources":["../../../src/components/linker/remoteRedux.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAiB,MAAM,kBAAkB,CAAC;AAQ/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;IACf,wBAAwB,EAAE,EAAE;CAC5B,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\";\nimport { services } from \"@finsemble/finsemble-api\";\n\nexport type LinkerStore = services.Interop.types.LinkerStore;\nexport type InteropLinkChannels = services.Interop.modules.linker.InteropLinkChannels;\nexport type InteropUnlinkChannels = services.Interop.modules.linker.InteropUnlinkChannels;\nexport type InteropLinkerSetActiveWindow = services.Interop.modules.linker.InteropLinkerSetActiveWindow;\n\nconst { remoteRedux } = FSBL;\n\nconst dummyReducer = (state: any) => state;\n\nconst emptyStore: LinkerStore = {\n\tclients: {},\n\tallChannels: [],\n\tconnectIdToJoinedChannel: {},\n};\n\nexport const store: EnhancedStore<LinkerStore, any, any> = configureStore({\n\tpreloadedState: emptyStore,\n\treducer: dummyReducer,\n\tenhancers: [\n\t\tremoteRedux.remoteReduxClientEnhancer({ server: \"@@finsemble/remoteRedux/InteropStore\", slice: \"linker\" }),\n\t],\n});\n\nexport const actions = {\n\tsetActiveWindow: createAction<InteropLinkerSetActiveWindow>(\"linker/setActiveWindow\"),\n\tlinkChannels: createAction<InteropLinkChannels>(\"linker/linkChannels\"),\n\tunlinkChannels: createAction<InteropUnlinkChannels>(\"linker/unlinkChannels\"),\n};\n"]}

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+export declare type MenuProps = {
+    className?: string;
+    closeHotkey?: Array<string>;
+    height?: number;
+    id?: string;
+    maxHeight?: number;
+    minHeight?: number;
+    openHotkey?: Array<string>;
+    width?: number;
+    title?: React.ReactNode | string;
+};
+/**
+ * A convenience component that fully encapsulates a menu by constructing a <MenuShell> and its contents.
+ * All of the props are passed to MenuShell.
+ *
+ * @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.
+ * @param {array} [closeHotkey=["escape"] ] - A hotkey combination to close the menu. Defaults to ["escape"].
+ * @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.
+ * @param {string} [id] - Unique ID for the menu. Defaults to a random string.
+ * @param {number} [maxHeight=Infinity] - Maximum height of the menu.
+ * @param {number} [minHeight] - Minimum height of the menu
+ * @param {array} [openHotkey] - A hotkey combination to open the menu.
+ * @param {number} [width=180] - Custom width for the menu.
+ * @param {title} [string] - Name that appears in the menu's <MenuToggle> button.
+ *
+ */
+export declare const Menu: React.FunctionComponent<MenuProps>;

package/react/components/menu/Menu.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { MenuShell } from "./MenuShell";
+import { MenuToggle } from "./MenuToggle";
+import { MenuContent } from "./MenuContent";
+/**
+ * A convenience component that fully encapsulates a menu by constructing a <MenuShell> and its contents.
+ * All of the props are passed to MenuShell.
+ *
+ * @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.
+ * @param {array} [closeHotkey=["escape"] ] - A hotkey combination to close the menu. Defaults to ["escape"].
+ * @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.
+ * @param {string} [id] - Unique ID for the menu. Defaults to a random string.
+ * @param {number} [maxHeight=Infinity] - Maximum height of the menu.
+ * @param {number} [minHeight] - Minimum height of the menu
+ * @param {array} [openHotkey] - A hotkey combination to open the menu.
+ * @param {number} [width=180] - Custom width for the menu.
+ * @param {title} [string] - Name that appears in the menu's <MenuToggle> button.
+ *
+ */
+export const Menu = (props) => {
+    const { children, title } = props;
+    return (React.createElement(MenuShell, Object.assign({}, props),
+        React.createElement(MenuToggle, null, title),
+        React.createElement(MenuContent, null, children)));
+};
+//# sourceMappingURL=Menu.js.map

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

@@ -0,0 +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;AAc5C;;;;;;;;;;;;;;GAcG;AAEH,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\";\nimport { MenuShell } from \"./MenuShell\";\nimport { MenuToggle } from \"./MenuToggle\";\nimport { MenuContent } from \"./MenuContent\";\n\nexport type MenuProps = {\n\tclassName?: string;\n\tcloseHotkey?: Array<string>;\n\theight?: number;\n\tid?: string;\n\tmaxHeight?: number;\n\tminHeight?: number;\n\topenHotkey?: Array<string>;\n\twidth?: number;\n\ttitle?: React.ReactNode | string;\n};\n\n/**\n * A convenience component that fully encapsulates a menu by constructing a <MenuShell> and its contents.\n * All of the props are passed to MenuShell.\n *\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.\n * @param {array} [closeHotkey=[\"escape\"] ] - A hotkey combination to close the menu. Defaults to [\"escape\"].\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.\n * @param {string} [id] - Unique ID for the menu. Defaults to a random string.\n * @param {number} [maxHeight=Infinity] - Maximum height of the menu.\n * @param {number} [minHeight] - Minimum height of the menu\n * @param {array} [openHotkey] - A hotkey combination to open the menu.\n * @param {number} [width=180] - Custom width for the menu.\n * @param {title} [string] - Name that appears in the menu's <MenuToggle> button.\n *\n */\n\nexport const Menu: React.FunctionComponent<MenuProps> = (props) => {\n\tconst { children, title } = props;\n\n\treturn (\n\t\t<MenuShell {...props}>\n\t\t\t<MenuToggle>{title}</MenuToggle>\n\t\t\t<MenuContent>{children}</MenuContent>\n\t\t</MenuShell>\n\t);\n};\n"]}

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

@@ -0,0 +1,18 @@
+/**
+ * To make sure that MenuPortal.tsx remain small
+ * I have isolated the auto resize logic in this class.
+ */
+export declare class MenuAutoResizer {
+    private width;
+    private maxHeight;
+    private childWindow;
+    private menuId;
+    private observer;
+    private minHeight;
+    constructor(childWindow: Window, menuId: string, width: number, maxHeight?: number, minHeight?: number);
+    disconnect(): void;
+    /**
+     * Callback for MutationObserver
+     */
+    private updateWindowDimensions;
+}

package/react/components/menu/MenuAutoResizer.js

@@ -0,0 +1,67 @@
+import { calculateDimensions } from "./menuHelpers";
+/**
+ * To make sure that MenuPortal.tsx remain small
+ * I have isolated the auto resize logic in this class.
+ */
+export class MenuAutoResizer {
+    constructor(childWindow, menuId, width, maxHeight = Infinity, minHeight = 0) {
+        this.width = width;
+        this.maxHeight = maxHeight;
+        this.minHeight = minHeight;
+        this.childWindow = childWindow;
+        this.menuId = menuId;
+        this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
+        /* The external window does not have a URL and so its origin
+        will not match the toolbar's origin, in that case
+        we won't have onload, DOMContentLoaded or any other events.
+        That makes it hard to know when the content are loaded, we cant
+        even inject custom JS as it will be already late.
+        The only way to know about a DOM change was MutationObserver!
+        */
+        this.observer = new MutationObserver(this.updateWindowDimensions);
+        /* Now we watch for any DOM changes in the childWindow
+        Knowing the height of the window contents is crucial for
+        making decision about its position (below/above the toolbar).
+        */
+        this.observer.observe(this.childWindow.document, {
+            childList: true,
+            characterData: false,
+            subtree: true,
+        });
+        // Initialize the window to the correct height
+        setTimeout(this.updateWindowDimensions, 0);
+    }
+    disconnect() {
+        this.observer.disconnect();
+    }
+    /**
+     * Callback for MutationObserver
+     */
+    async updateWindowDimensions() {
+        // If the original menu button has been removed then bypass updating the window dimensions.
+        // Probably the menu itself is in the process of being removed but the mutation observer has
+        // not yet disconnected
+        if (!document.querySelector(`#${this.menuId}-menu-toggle`)) {
+            return;
+        }
+        const { left, top, height } = await calculateDimensions(this.childWindow, this.menuId, 0, this.maxHeight, this.minHeight);
+        const params = {
+            monitor: "mine",
+            position: "absolute",
+            left: left,
+            top: top,
+            width: this.width,
+            height: height,
+            setBoundsOnly: true,
+            forceOntoMonitor: "monitorRect",
+        };
+        /**
+         * See comment in MenuPortal.tsx on why we use showWindow() here instead of childWindow.moveTo()
+         */
+        //this.childWindow.moveTo(left, top);
+        //this.childWindow.resizeTo(this.width, height);
+        FSBL.Clients.LauncherClient.showWindow({ windowName: this.childWindow.window.name }, params);
+        this.childWindow.document.body.setAttribute("resizing", "false");
+    }
+}
+//# sourceMappingURL=MenuAutoResizer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuAutoResizer.js","sourceRoot":"","sources":["../../../src/components/menu/MenuAutoResizer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAKpD;;;GAGG;AACH,MAAM,OAAO,eAAe;IAa3B,YAAY,WAAmB,EAAE,MAAc,EAAE,KAAa,EAAE,YAAoB,QAAQ,EAAE,YAAoB,CAAC;QAClH,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,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;QACrE;;;;;;UAME;QACF,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QAClE;;;UAGE;QACF,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;QAEH,8CAA8C;QAC9C,UAAU,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC,CAAC;IAC5C,CAAC;IAED,UAAU;QACT,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC5B,CAAC;IAED;;OAEG;IACK,KAAK,CAAC,sBAAsB;QACnC,2FAA2F;QAC3F,4FAA4F;QAC5F,uBAAuB;QACvB,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,CACtD,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,MAAM,EACX,CAAC,EACD,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,SAAS,CACd,CAAC;QAEF,MAAM,MAAM,GAAgB;YAC3B,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,UAAU;YACpB,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;QAEF;;WAEG;QACH,qCAAqC;QACrC,gDAAgD;QAChD,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\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype SpawnParams = services.window.types.SpawnParams;\n\n/**\n * To make sure that MenuPortal.tsx remain small\n * I have isolated the auto resize logic in this class.\n */\nexport class MenuAutoResizer {\n\tprivate width: number;\n\n\tprivate maxHeight: number;\n\n\tprivate childWindow: Window;\n\n\tprivate menuId: string;\n\n\tprivate observer: MutationObserver;\n\n\tprivate minHeight: number;\n\n\tconstructor(childWindow: Window, menuId: string, width: number, maxHeight: number = Infinity, minHeight: number = 0) {\n\t\tthis.width = width;\n\t\tthis.maxHeight = maxHeight;\n\t\tthis.minHeight = minHeight;\n\t\tthis.childWindow = childWindow;\n\t\tthis.menuId = menuId;\n\t\tthis.updateWindowDimensions = this.updateWindowDimensions.bind(this);\n\t\t/* The external window does not have a URL and so its origin\n\t\twill not match the toolbar's origin, in that case\n\t\twe won't have onload, DOMContentLoaded or any other events.\n\t\tThat makes it hard to know when the content are loaded, we cant\n\t\teven inject custom JS as it will be already late.\n\t\tThe only way to know about a DOM change was MutationObserver!\n\t\t*/\n\t\tthis.observer = new MutationObserver(this.updateWindowDimensions);\n\t\t/* Now we watch for any DOM changes in the childWindow\n\t\tKnowing the height of the window contents is crucial for\n\t\tmaking decision about its position (below/above the toolbar).\n\t\t*/\n\t\tthis.observer.observe(this.childWindow.document, {\n\t\t\tchildList: true,\n\t\t\tcharacterData: false,\n\t\t\tsubtree: true,\n\t\t});\n\n\t\t// Initialize the window to the correct height\n\t\tsetTimeout(this.updateWindowDimensions, 0);\n\t}\n\n\tdisconnect() {\n\t\tthis.observer.disconnect();\n\t}\n\n\t/**\n\t * Callback for MutationObserver\n\t */\n\tprivate async updateWindowDimensions() {\n\t\t// If the original menu button has been removed then bypass updating the window dimensions.\n\t\t// Probably the menu itself is in the process of being removed but the mutation observer has\n\t\t// not yet disconnected\n\t\tif (!document.querySelector(`#${this.menuId}-menu-toggle`)) {\n\t\t\treturn;\n\t\t}\n\t\tconst { left, top, height } = await calculateDimensions(\n\t\t\tthis.childWindow,\n\t\t\tthis.menuId,\n\t\t\t0,\n\t\t\tthis.maxHeight,\n\t\t\tthis.minHeight\n\t\t);\n\n\t\tconst params: SpawnParams = {\n\t\t\tmonitor: \"mine\",\n\t\t\tposition: \"absolute\",\n\t\t\tleft: left,\n\t\t\ttop: top,\n\t\t\twidth: this.width,\n\t\t\theight: height,\n\t\t\tsetBoundsOnly: true,\n\t\t\tforceOntoMonitor: \"monitorRect\",\n\t\t};\n\n\t\t/**\n\t\t * See comment in MenuPortal.tsx on why we use showWindow() here instead of childWindow.moveTo()\n\t\t */\n\t\t//this.childWindow.moveTo(left, top);\n\t\t//this.childWindow.resizeTo(this.width, height);\n\t\tFSBL.Clients.LauncherClient.showWindow({ windowName: this.childWindow.window.name }, params);\n\t\tthis.childWindow.document.body.setAttribute(\"resizing\", \"false\");\n\t}\n}\n"]}

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+/**
+ * Holds all the menu contents
+ * @param {string} style - The custom CSS style for the menu. This is necessary because the DOM's style will be lost when this is sent through a React portal.
+ */
+export declare const MenuContent: React.FunctionComponent<{
+    style?: React.CSSProperties;
+}>;

package/react/components/menu/MenuContent.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { MenuContext } from "./menuContext";
+import { MenuPortal } from "./MenuPortal";
+import { useMenu } from "../../hooks/useMenu";
+/**
+ * Holds all the menu contents
+ * @param {string} style - The custom CSS style for the menu. This is necessary because the DOM's style will be lost when this is sent through a React portal.
+ */
+export const MenuContent = ({ children, style }) => {
+    const { thisMenuId } = React.useContext(MenuContext);
+    const { isMenuActive } = useMenu();
+    return (React.createElement(MenuPortal, { show: isMenuActive() },
+        React.createElement("div", { id: thisMenuId, className: "menu menu-primary", style: style }, children)));
+};
+//# sourceMappingURL=MenuContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAEnB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5B,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IACrD,MAAM,EAAE,YAAY,EAAE,GAAG,OAAO,EAAE,CAAC;IAEnC,OAAO,CACN,oBAAC,UAAU,IAAC,IAAI,EAAE,YAAY,EAAE;QAC/B,6BAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAC,mBAAmB,EAAC,KAAK,EAAE,KAAK,IAC7D,QAAQ,CACJ,CACM,CACb,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { MenuContext } from \"./menuContext\";\nimport { MenuPortal } from \"./MenuPortal\";\nimport { useMenu } from \"../../hooks/useMenu\";\n\n/**\n * Holds all the menu contents\n * @param {string} style - The custom CSS style for the menu. This is necessary because the DOM's style will be lost when this is sent through a React portal.\n */\nexport const MenuContent: React.FunctionComponent<{\n\tstyle?: React.CSSProperties;\n}> = ({ children, style }) => {\n\tconst { thisMenuId } = React.useContext(MenuContext);\n\tconst { isMenuActive } = useMenu();\n\n\treturn (\n\t\t<MenuPortal show={isMenuActive()}>\n\t\t\t<div id={thisMenuId} className=\"menu menu-primary\" style={style}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</MenuPortal>\n\t);\n};\n"]}

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+/**
+ * A component that registers a custom hotkeys pattern for opening and closing the menu.
+ * This component is used privately by <MenuShell>
+ *
+ * Note that a design decision was made to keep registry of "close" hotkeys simple.
+ * We *could* have written extra logic so that the close hotkey is only registered
+ * when the window is open but that seems unnecessary. Instead, every menu is always
+ * registered with its hotkey. The net effect is that every menu will dispatch a CLOSE_MENU
+ * action when "escape" is called. This creates a lot of dispatches but results in no operations
+ * since all the other menus will already be closed. This was preferable over the potential
+ * complication of logic that registers/unregisters a close hotkey with every menu open/close.
+ * @param {string[]} [open] - An array of key names for opening the menu.
+ * @param {string[]} [close="escape" ] - An array of key names for closing the menu. Defaults to `["escape"]` unless overridden with `null`.
+ */
+export declare const MenuHotKey: React.FunctionComponent<{
+    open?: string[];
+    close?: string[];
+}>;

package/react/components/menu/MenuHotKey.js

@@ -0,0 +1,35 @@
+import { useMenu } from "../../hooks/useMenu";
+import { useHotkey } from "../../hooks/useHotkey";
+/**
+ * A component that registers a custom hotkeys pattern for opening and closing the menu.
+ * This component is used privately by <MenuShell>
+ *
+ * Note that a design decision was made to keep registry of "close" hotkeys simple.
+ * We *could* have written extra logic so that the close hotkey is only registered
+ * when the window is open but that seems unnecessary. Instead, every menu is always
+ * registered with its hotkey. The net effect is that every menu will dispatch a CLOSE_MENU
+ * action when "escape" is called. This creates a lot of dispatches but results in no operations
+ * since all the other menus will already be closed. This was preferable over the potential
+ * complication of logic that registers/unregisters a close hotkey with every menu open/close.
+ * @param {string[]} [open] - An array of key names for opening the menu.
+ * @param {string[]} [close="escape" ] - An array of key names for closing the menu. Defaults to `["escape"]` unless overridden with `null`.
+ */
+export const MenuHotKey = ({ open, close }) => {
+    const { openMenu, closeMenu, isMenuActive } = useMenu();
+    useHotkey(open, openMenu);
+    function removeHotKeyAndCloseMenu() {
+        FSBL.Clients.HotkeyClient.removeGlobalHotkey(close || [], removeHotKeyAndCloseMenu, closeMenu);
+        // Once menu closes, return focus to the component that launched the menu
+        finsembleWindow.bringToFront(null, (err) => {
+            if (err) {
+                FSBL.Clients.Logger.system.error("failed to bringToFront, error:", err);
+            }
+            finsembleWindow.focus();
+        });
+    }
+    if (Array.isArray(close) && close.length > 0 && isMenuActive()) {
+        FSBL.Clients.HotkeyClient.addGlobalHotkey(close || [], removeHotKeyAndCloseMenu);
+    }
+    return null;
+};
+//# sourceMappingURL=MenuHotKey.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuHotKey.js","sourceRoot":"","sources":["../../../src/components/menu/MenuHotKey.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,UAAU,GAGlB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAQ,EAAE;IAC9B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,OAAO,EAAE,CAAC;IACxD,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAE1B,SAAS,wBAAwB;QAChC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,KAAK,IAAI,EAAE,EAAE,wBAAwB,EAAE,SAAS,CAAC,CAAC;QAE/F,yEAAyE;QACzE,eAAe,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,GAAQ,EAAE,EAAE;YAC/C,IAAI,GAAG,EAAE;gBACR,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,gCAAgC,EAAE,GAAG,CAAC,CAAC;aACxE;YAED,eAAe,CAAC,KAAK,EAAE,CAAC;QACzB,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,EAAE,EAAE;QAC/D,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,IAAI,EAAE,EAAE,wBAAwB,CAAC,CAAC;KACjF;IAED,OAAO,IAAI,CAAC;AACb,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { useMenu } from \"../../hooks/useMenu\";\nimport { useHotkey } from \"../../hooks/useHotkey\";\n\n/**\n * A component that registers a custom hotkeys pattern for opening and closing the menu.\n * This component is used privately by <MenuShell>\n *\n * Note that a design decision was made to keep registry of \"close\" hotkeys simple.\n * We *could* have written extra logic so that the close hotkey is only registered\n * when the window is open but that seems unnecessary. Instead, every menu is always\n * registered with its hotkey. The net effect is that every menu will dispatch a CLOSE_MENU\n * action when \"escape\" is called. This creates a lot of dispatches but results in no operations\n * since all the other menus will already be closed. This was preferable over the potential\n * complication of logic that registers/unregisters a close hotkey with every menu open/close.\n * @param {string[]} [open] - An array of key names for opening the menu.\n * @param {string[]} [close=\"escape\" ] - An array of key names for closing the menu. Defaults to `[\"escape\"]` unless overridden with `null`.\n */\nexport const MenuHotKey: React.FunctionComponent<{\n\topen?: string[];\n\tclose?: string[];\n}> = ({ open, close }): null => {\n\tconst { openMenu, closeMenu, isMenuActive } = useMenu();\n\tuseHotkey(open, openMenu);\n\n\tfunction removeHotKeyAndCloseMenu() {\n\t\tFSBL.Clients.HotkeyClient.removeGlobalHotkey(close || [], removeHotKeyAndCloseMenu, closeMenu);\n\n\t\t// Once menu closes, return focus to the component that launched the menu\n\t\tfinsembleWindow.bringToFront(null, (err: any) => {\n\t\t\tif (err) {\n\t\t\t\tFSBL.Clients.Logger.system.error(\"failed to bringToFront, error:\", err);\n\t\t\t}\n\n\t\t\tfinsembleWindow.focus();\n\t\t});\n\t}\n\n\tif (Array.isArray(close) && close.length > 0 && isMenuActive()) {\n\t\tFSBL.Clients.HotkeyClient.addGlobalHotkey(close || [], removeHotKeyAndCloseMenu);\n\t}\n\n\treturn null;\n};\n"]}

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+/**
+ * Individual menu item.
+ * @param {function} [onClick] - Custom onClick handler function for when the menu item is clicked.
+ * @param {string} [className] - Custom css class name for the menu item. Defaults to "menu-item".
+ * @param {string} [style] - Custom css styles for the menu item. This is necessary because the DOM's styles will be lost when this component is sent through a React portal.
+ * @param {boolean} [noClose=false] - If set to true, prevents the menu from closing when an item is clicked on.
+ */
+export declare const MenuItem: React.FunctionComponent<{
+    onClick?: () => void;
+    onKeyDown?: () => void;
+    className?: string;
+    style?: object;
+    noClose?: boolean;
+    lang?: string;
+}>;

package/react/components/menu/MenuItem.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { useMenu } from "../../hooks/useMenu";
+/**
+ * Individual menu item.
+ * @param {function} [onClick] - Custom onClick handler function for when the menu item is clicked.
+ * @param {string} [className] - Custom css class name for the menu item. Defaults to "menu-item".
+ * @param {string} [style] - Custom css styles for the menu item. This is necessary because the DOM's styles will be lost when this component is sent through a React portal.
+ * @param {boolean} [noClose=false] - If set to true, prevents the menu from closing when an item is clicked on.
+ */
+export const MenuItem = ({ children, onClick, style, noClose, className = "menu-item", onKeyDown, lang }) => {
+    const { closeMenu } = useMenu();
+    // Combines the passed onClick handler with our
+    // default onClick handler (which closes the menu)
+    const combinedOnClick = () => {
+        // Call the developer's custom onClick handler
+        onClick && onClick();
+        // Do not close menu when noClose attributes exist
+        !noClose && closeMenu();
+    };
+    return (React.createElement("div", { tabIndex: 0, role: "menuitem", className: className, onClick: combinedOnClick, style: style, onKeyDown: onKeyDown, lang: lang }, children));
+};
+//# sourceMappingURL=MenuItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAOhB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,GAAG,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,EAAO,EAAE;IAC7F,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAC;IAEhC,+CAA+C;IAC/C,kDAAkD;IAClD,MAAM,eAAe,GAAG,GAAG,EAAE;QAC5B,8CAA8C;QAC9C,OAAO,IAAI,OAAO,EAAE,CAAC;QAErB,kDAAkD;QAClD,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACN,6BACC,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,IAET,QAAQ,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { useMenu } from \"../../hooks/useMenu\";\n\n/**\n * Individual menu item.\n * @param {function} [onClick] - Custom onClick handler function for when the menu item is clicked.\n * @param {string} [className] - Custom css class name for the menu item. Defaults to \"menu-item\".\n * @param {string} [style] - Custom css styles for the menu item. This is necessary because the DOM's styles will be lost when this component is sent through a React portal.\n * @param {boolean} [noClose=false] - If set to true, prevents the menu from closing when an item is clicked on.\n */\nexport const MenuItem: React.FunctionComponent<{\n\tonClick?: () => void;\n\tonKeyDown?: () => void;\n\tclassName?: string;\n\tstyle?: object;\n\tnoClose?: boolean;\n\tlang?: string;\n}> = ({ children, onClick, style, noClose, className = \"menu-item\", onKeyDown, lang }): any => {\n\tconst { closeMenu } = useMenu();\n\n\t// Combines the passed onClick handler with our\n\t// default onClick handler (which closes the menu)\n\tconst combinedOnClick = () => {\n\t\t// Call the developer's custom onClick handler\n\t\tonClick && onClick();\n\n\t\t// Do not close menu when noClose attributes exist\n\t\t!noClose && closeMenu();\n\t};\n\n\treturn (\n\t\t<div\n\t\t\ttabIndex={0}\n\t\t\trole=\"menuitem\"\n\t\t\tclassName={className}\n\t\t\tonClick={combinedOnClick}\n\t\t\tstyle={style}\n\t\t\tonKeyDown={onKeyDown}\n\t\t\tlang={lang}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"]}

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+export declare const MenuPortal: React.FunctionComponent<{
+    show: boolean;
+}>;