@finsemble/finsemble-ui 10.0.0-beta.3 → 10.0.0-iocd.2

package/react/components/legacyControls/FinsembleDraggable.d.ts

@@ -4,7 +4,13 @@ declare type DraggableProps = {
     isDragDisabled?: boolean;
     index: number;
     onClick?: () => void;
+    onKeydown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     wrapperClass?: string;
+    children?: React.ReactNode;
 };
-export declare const FinsembleDraggable: React.FunctionComponent<DraggableProps>;
+/**
+ * A FinsembleDraggable is a helper that makes its children draggable
+ */
+export declare const FinsembleDraggable: (props: DraggableProps) => JSX.Element;
 export {};
+//# sourceMappingURL=FinsembleDraggable.d.ts.map

package/react/components/legacyControls/FinsembleDraggable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FinsembleDraggable.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/legacyControls/FinsembleDraggable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,aAAK,cAAc,GAAG;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AA8BF;;GAEG;AACH,eAAO,MAAM,kBAAkB,UAAW,cAAc,gBAgBvD,CAAC"}

package/react/components/legacyControls/FinsembleDraggable.js

@@ -1,15 +1,22 @@
 import { SortableElement } from "react-sortable-hoc";
 import * as React from "react";
 const defaultClickHandler = () => { };
-const SortableItem = SortableElement(({ onClick, className, children }) => {
-    return (React.createElement("div", { onClick: onClick, className: className }, children));
-});
+const SortableItem = SortableElement(({ onClick, className, children, onKeydown }) => (React.createElement("div", { onClick: onClick, className: className, tabIndex: 0, role: "button", onKeyDown: (e) => {
+        if (["Enter", "Space"].includes(e.key)) {
+            onClick();
+        }
+        if (onKeydown) {
+            onKeydown(e);
+        }
+    } }, children)));
+/**
+ * A FinsembleDraggable is a helper that makes its children draggable
+ */
 export const FinsembleDraggable = (props) => {
-    var _a, _b, _c;
+    var _a, _b;
     const draggableId = (_a = props.draggableId) !== null && _a !== void 0 ? _a : `Id-Unset-${Math.random() * 23214}`;
-    const isDragDisabled = (_b = props.isDragDisabled) !== null && _b !== void 0 ? _b : false;
-    const onClick = (_c = props.onClick) !== null && _c !== void 0 ? _c : defaultClickHandler;
+    const onClick = (_b = props.onClick) !== null && _b !== void 0 ? _b : defaultClickHandler;
     const className = props.wrapperClass;
-    return (React.createElement(SortableItem, { key: draggableId, index: props.index, onClick: onClick, className: className }, props.children));
+    return (React.createElement(SortableItem, { key: draggableId, index: props.index, onClick: onClick, className: className, onKeydown: props.onKeydown }, props.children));
 };
 //# sourceMappingURL=FinsembleDraggable.js.map

package/react/components/legacyControls/FinsembleDraggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"FinsembleDraggable.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDraggable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,mBAAmB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;AAQrC,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC5F,OAAO,CACN,6BAAK,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,IACzC,QAAQ,CACJ,CACN,CAAC;AACH,CAAC,CAAC,CAAC;AAKH,MAAM,CAAC,MAAM,kBAAkB,GAA4C,CAAC,KAAK,EAAE,EAAE;;IACpF,MAAM,WAAW,SAAG,KAAK,CAAC,WAAW,mCAAI,YAAY,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC7E,MAAM,cAAc,SAAG,KAAK,CAAC,cAAc,mCAAI,KAAK,CAAC;IACrD,MAAM,OAAO,SAAG,KAAK,CAAC,OAAO,mCAAI,mBAAmB,CAAC;IACrD,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,CAAC;IAErC,OAAO,CACN,oBAAC,YAAY,IAAC,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,IACxF,KAAK,CAAC,QAAQ,CACD,CACf,CAAC;AACH,CAAC,CAAC","sourcesContent":["import { SortableElement } from \"react-sortable-hoc\";\r\nimport * as React from \"react\";\r\n\r\ntype DraggableProps = {\r\n\tdraggableId: string;\r\n\tisDragDisabled?: boolean;\r\n\tindex: number;\r\n\tonClick?: () => void;\r\n\twrapperClass?: string;\r\n};\r\n\r\nconst defaultClickHandler = () => {};\r\n\r\ntype SortableItemProps = {\r\n\tonClick: any;\r\n\tclassName: any;\r\n\tchildren: any;\r\n};\r\n\r\nconst SortableItem = SortableElement(({ onClick, className, children }: SortableItemProps) => {\r\n\treturn (\r\n\t\t<div onClick={onClick} className={className}>\r\n\t\t\t{children}\r\n\t\t</div>\r\n\t);\r\n});\r\n\r\n/**\r\n * A FinsembleDraggable is a helper that makes its children draggable\r\n */\r\nexport const FinsembleDraggable: React.FunctionComponent<DraggableProps> = (props) => {\r\n\tconst draggableId = props.draggableId ?? `Id-Unset-${Math.random() * 23214}`;\r\n\tconst isDragDisabled = props.isDragDisabled ?? false;\r\n\tconst onClick = props.onClick ?? defaultClickHandler;\r\n\tconst className = props.wrapperClass;\r\n\r\n\treturn (\r\n\t\t<SortableItem key={draggableId} index={props.index} onClick={onClick} className={className}>\r\n\t\t\t{props.children}\r\n\t\t</SortableItem>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"FinsembleDraggable.js","sourceRoot":"","sources":["../../../../../src/ui/components/legacyControls/FinsembleDraggable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,mBAAmB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;AASrC,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAqB,EAAE,EAAE,CAAC,CACxG,6BACC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAsC,EAAE,EAAE;QACrD,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;YACvC,OAAO,EAAE,CAAC;SACV;QACD,IAAI,SAAS,EAAE;YACd,SAAS,CAAC,CAAC,CAAC,CAAC;SACb;IACF,CAAC,IAEA,QAAQ,CACJ,CACN,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAqB,EAAE,EAAE;;IAC3D,MAAM,WAAW,GAAG,MAAA,KAAK,CAAC,WAAW,mCAAI,YAAY,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC7E,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,mBAAmB,CAAC;IACrD,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,CAAC;IAErC,OAAO,CACN,oBAAC,YAAY,IACZ,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,IAEzB,KAAK,CAAC,QAAQ,CACD,CACf,CAAC;AACH,CAAC,CAAC"}

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

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

package/react/components/linker/LinkerMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkerMenu.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/linker/LinkerMenu.tsx"],"names":[],"mappings":";AAaA,OAAO,mCAAmC,CAAC;AA8L3C;;GAEG;AACH,eAAO,MAAM,UAAU,mBAItB,CAAC"}

package/react/components/linker/LinkerMenu.js

@@ -1,28 +1,156 @@
-import * as React from "react";
-import { useLinker } from "../../hooks/useLinker";
+/*!
+ * Copyright 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React, { useEffect, useState, useRef } from "react";
+import { useTitle } from "../../hooks/useTitle";
 import { FinsembleProvider } from "../FinsembleProvider";
-import "../../ui-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`;
-const LinkerElement = () => {
-    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}`,
+import { getStore } from "./remoteRedux";
+import { LinkerElement as LinkerElementDeprecated } from "./LinkerMenuDeprecated";
+import { FEAGlobals } from "../../../common/Globals";
+import { linkerActions as actions } from "../../../platform/services/Interop/modules/actions";
+import { useDispatch, useSelector, Provider } from "react-redux";
+import "../../assets/css/linkerWindow.css";
+/**
+ * Helper function to focus a remote window.
+ * @param windowName The window to focus
+ */
+const focusWindow = async (windowName) => {
+    if (windowName === undefined) {
+        return;
+    }
+    const { wrap } = await FEAGlobals.FSBL.FinsembleWindow.getInstance({ windowName });
+    wrap === null || wrap === void 0 ? void 0 : wrap.focus();
+};
+const LinkerElement = ({ title }) => {
+    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 moveFocus = (newIndex) => {
+        var _a;
+        setFocusedMenuIndex(newIndex);
+        const elements = (_a = containerElement.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[role='menuitemcheckbox']");
+        elements === null || elements === void 0 ? void 0 : elements[newIndex].focus();
+    };
+    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.
+        FEAGlobals.finsembleWindow.blur();
+        FEAGlobals.finsembleWindow.hide();
+        // Reset internal focus to the first item in the linker for the next time the window is opened
+        moveFocus(0);
+        // Send focus back to the calling window when the linker is hidden
+        focusWindow(activeWindowName);
+    };
+    useTitle(title !== null && title !== void 0 ? title : "Linker");
+    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 = () => {
+            FEAGlobals.finsembleWindow.focus();
+        };
+        FEAGlobals.FSBL.Clients.Logger.system.log("Linker component is mounted. Initializing.");
+        FEAGlobals.finsembleWindow.addEventListener("blurred", hideWindow);
+        FEAGlobals.finsembleWindow.addEventListener("shown", focusWindow);
+        return () => {
+            FEAGlobals.FSBL.Clients.Logger.system.log("Linker component is unmounted. Cleaning up the event listeners.");
+            FEAGlobals.finsembleWindow.removeEventListener("blurred", hideWindow);
+            FEAGlobals.finsembleWindow.removeEventListener("shown", focusWindow);
         };
-        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);
+    }, []);
+    const toggleChannel = (name) => {
+        // These action creators can now be imported from core
+        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 }) => {
+            const active = joinedChannels.includes(name);
+            return (React.createElement("div", { key: name, className: `channel-wrapper ${cssClassName}`, onClick: () => toggleChannel(name), tabIndex: -1, role: "menuitemcheckbox", "aria-checked": active },
+                React.createElement("div", { className: "channel-label" }, name),
+                React.createElement("div", { className: "linker-glyph" }, active ? React.createElement("i", { className: "active-linker-group ff-check-mark", "aria-hidden": "true" }) : null)));
+        });
+    const manageKeyboardNavigation = (evt) => {
+        const lastChannelIndex = allChannels.length - 1;
+        if (evt.key === "ArrowDown") {
+            moveFocus(focusedMenuIndex >= lastChannelIndex ? 0 : focusedMenuIndex + 1);
+        }
+        else if (evt.key === "ArrowUp") {
+            moveFocus(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 FEAGlobals.FSBL.Clients.ConfigClient.get([
+                "finsemble",
+                "servicesConfig",
+                "linker",
+                "enabled",
+            ]);
+            if (data) {
+                setWhichLinker("LinkerElementDeprecated");
+            }
+            else {
+                setWhichLinker("LinkerElement");
+            }
+        })();
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        whichLinker === "LinkerElement" && (React.createElement(Provider, { store: getStore() },
+            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(LinkerElement, null)));
+    React.createElement(WhichLinker, null)));
 //# sourceMappingURL=LinkerMenu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LinkerMenu.js","sourceRoot":"","sources":["../../../src/components/linker/LinkerMenu.tsx"],"names":[],"mappings":"AAIA,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,sCAAsC,CAAC;AAE9C,MAAM,0BAA0B,GAAG,EAAE,CAAC;AACtC,MAAM,4CAA4C,GAAG,wFAAwF,0BAA0B,WAAW,CAAC;AAEnL,MAAM,aAAa,GAAG,GAAG,EAAE;IAC1B,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;AAKF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CAC/B,oBAAC,iBAAiB;IACjB,oBAAC,aAAa,OAAG,CACE,CACpB,CAAC","sourcesContent":["/*!\r\n * Copyright 2020 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\nimport * as React from \"react\";\r\n\r\nimport { Channel } from \"../../types/linkerTypes\";\r\nimport { useLinker } from \"../../hooks/useLinker\";\r\nimport { FinsembleProvider } from \"../FinsembleProvider\";\r\nimport \"../../ui-assets/css/linkerWindow.css\";\r\n\r\nconst MAXIMUM_CHANNEL_SELECTIONS = 20;\r\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`;\r\n\r\nconst LinkerElement = () => {\r\n\tconst { state, toggleChannel } = useLinker();\r\n\r\n\tconst allChannels = Object.values(state.channels) as Channel[];\r\n\tconst channelElements = allChannels.map(({ color, border, name, active, id }, index) => {\r\n\t\tif (index > MAXIMUM_CHANNEL_SELECTIONS - 1) {\r\n\t\t\tFSBL.Clients.Logger.error(HIT_MAXIMUM_CHANNEL_SELECTIONS_ERROR_MESSAGE);\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tconst groupClass = `linkerGroup ${color}`;\r\n\t\tconst style = {\r\n\t\t\tbackgroundColor: color,\r\n\t\t\tborder: `1px solid ${border ?? color}`,\r\n\t\t};\r\n\t\treturn (\r\n\t\t\t<div key={id} className=\"channel-wrapper\" onClick={() => toggleChannel(id)}>\r\n\t\t\t\t{state.isAccessibleLinker ? <div className=\"channel-label\">{name}</div> : null}\r\n\t\t\t\t<div className={groupClass} style={style}>\r\n\t\t\t\t\t{active ? <i className=\"active-linker-group ff-check-mark\"></i> : null}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t);\r\n\t});\r\n\r\n\treturn <div className=\"linkerContainer\">{channelElements}</div>;\r\n};\r\n\r\n/**\r\n * The Linker icon on the window titlebar that launches the linker menu.\r\n */\r\nexport const LinkerMenu = () => (\r\n\t<FinsembleProvider>\r\n\t\t<LinkerElement />\r\n\t</FinsembleProvider>\r\n);\r\n"]}
+{"version":3,"file":"LinkerMenu.js","sourceRoot":"","sources":["../../../../../src/ui/components/linker/LinkerMenu.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+/// <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;
+//# sourceMappingURL=LinkerMenuDeprecated.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkerMenuDeprecated.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/linker/LinkerMenuDeprecated.tsx"],"names":[],"mappings":";AAYA,OAAO,mCAAmC,CAAC;AAK3C,eAAO,MAAM,aAAa,mBA4BzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,mBAItB,CAAC"}

package/react/components/linker/LinkerMenuDeprecated.js

@@ -0,0 +1,39 @@
+/*!
+ * 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 { FEAGlobals } from "../../../common/Globals";
+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 = () => {
+    FEAGlobals.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) {
+            FEAGlobals.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/ui/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,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,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,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CACxC,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,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,4CAA4C,CAAC,CAAC;YACnF,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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/linker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

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

@@ -1 +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\";\r\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/components/linker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

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

@@ -0,0 +1,4 @@
+export declare const getStore: () => import("@reduxjs/toolkit").EnhancedStore<any, import("redux").AnyAction, [import("redux-thunk").ThunkMiddleware<any, import("redux").AnyAction, undefined>], import("redux").StoreEnhancer<{
+    dispatch: import("../../../common/redux/types").PromiseDispatch;
+}, {}>[]>;
+//# sourceMappingURL=remoteRedux.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"remoteRedux.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/linker/remoteRedux.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,QAAQ;;SACwF,CAAC"}

package/react/components/linker/remoteRedux.js

@@ -0,0 +1,10 @@
+import { getRemoteStore } from "../../../common/redux/getRemoteStore";
+// The store state will come from the remote redux store, but we still need to initialize our local store with a
+// starting state that is empty.
+const emptyStore = {
+    clients: {},
+    allChannels: [],
+    connectIdToJoinedChannel: {},
+};
+export const getStore = () => getRemoteStore({ server: "@@finsemble/remoteRedux/InteropStore", slice: "linker", emptyStore });
+//# sourceMappingURL=remoteRedux.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"remoteRedux.js","sourceRoot":"","sources":["../../../../../src/ui/components/linker/remoteRedux.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAEtE,gHAAgH;AAChH,gCAAgC;AAChC,MAAM,UAAU,GAAgB;IAC/B,OAAO,EAAE,EAAE;IACX,WAAW,EAAE,EAAE;IACf,wBAAwB,EAAE,EAAE;CAC5B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE,CAC5B,cAAc,CAAc,EAAE,MAAM,EAAE,sCAAsC,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC"}

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

@@ -5,8 +5,26 @@ export declare type MenuProps = {
     height?: number;
     id?: string;
     maxHeight?: number;
+    minHeight?: number;
     openHotkey?: Array<string>;
     width?: number;
-    title?: React.ReactNode;
+    title?: React.ReactNode | string;
+    children?: React.ReactNode;
 };
-export declare const Menu: React.FunctionComponent<MenuProps>;
+/**
+ * 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] - An optional key-chord (e.g. ["ctrl","H"]) which will close the menu. Use this for instance when you want the same key-chord to toggle a menu open and closed. Note that the escape key will always close the menu.
+ * @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: (props: MenuProps) => JSX.Element;
+//# sourceMappingURL=Menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,oBAAY,SAAS,GAAG;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AAEH,eAAO,MAAM,IAAI,UAAW,SAAS,gBASpC,CAAC"}

package/react/components/menu/Menu.js

@@ -2,6 +2,21 @@ 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] - An optional key-chord (e.g. ["ctrl","H"]) which will close the menu. Use this for instance when you want the same key-chord to toggle a menu open and closed. Note that the escape key will always close the menu.
+ * @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),

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,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;\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/ui/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;AAe5C;;;;;;;;;;;;;;GAcG;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;IACxC,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"}

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

@@ -1,9 +1,19 @@
+/**
+ * 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;
-    constructor(childWindow: Window, menuId: string, width: number, maxHeight?: number);
+    private minHeight;
+    constructor(childWindow: Window, menuId: string, width: number, maxHeight?: number, minHeight?: number);
+    disconnect(): void;
+    /**
+     * Callback for MutationObserver
+     */
     private updateWindowDimensions;
 }
+//# sourceMappingURL=MenuAutoResizer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuAutoResizer.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/menu/MenuAutoResizer.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,qBAAa,eAAe;IAC3B,OAAO,CAAC,KAAK,CAAS;IAEtB,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,QAAQ,CAAmB;IAEnC,OAAO,CAAC,SAAS,CAAS;gBAEd,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,GAAE,MAAiB,EAAE,SAAS,GAAE,MAAU;IA6BnH,UAAU;IAIV;;OAEG;YACW,sBAAsB;CAkCpC"}

package/react/components/menu/MenuAutoResizer.js

@@ -1,34 +1,67 @@
 import { calculateDimensions } from "./menuHelpers";
+import { FEAGlobals } from "../../../common/Globals";
+/**
+ * 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) {
+    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 (document.getElementById(this.menuId) === null) {
+        // 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);
+        const { left, top, height } = await calculateDimensions(this.childWindow, this.menuId, 0, this.maxHeight, this.minHeight);
         const params = {
             monitor: "mine",
-            position: "monitor",
+            position: "absolute",
             left: left,
             top: top,
             width: this.width,
             height: height,
             setBoundsOnly: true,
+            forceOntoMonitor: "monitorRect",
         };
-        FSBL.Clients.LauncherClient.showWindow({ windowName: this.childWindow.window.name }, params);
+        /**
+         * 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);
+        FEAGlobals.FSBL.Clients.LauncherClient.showWindow({ windowName: this.childWindow.window.name }, params);
         this.childWindow.document.body.setAttribute("resizing", "false");
     }
 }

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;IAKO,KAAK,CAAC,sBAAsB;QAGnC,IAAI,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE;YAClD,OAAO;SACP;QAED,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;SACnB,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\t/**\r\n\t * Callback for MutationObserver\r\n\t */\r\n\tprivate async updateWindowDimensions() {\r\n\t\t// This gets called when a child is added or removed. If the child was removed, that will throw errors,\r\n\t\t// so let's double-check if the child exists.\r\n\t\tif (document.getElementById(this.menuId) === null) {\r\n\t\t\treturn;\r\n\t\t}\r\n\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};\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/ui/components/menu/MenuAutoResizer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD;;;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,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,MAAM,CAAC,CAAC;QACxG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAClE,CAAC;CACD"}

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

@@ -1,4 +1,12 @@
 import * as React from "react";
-export declare const MenuContent: React.FunctionComponent<{
+declare type MenuContentType = {
     style?: React.CSSProperties;
-}>;
+    children?: React.ReactNode;
+};
+/**
+ * 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: ({ children, style }: MenuContentType) => JSX.Element;
+export {};
+//# sourceMappingURL=MenuContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/menu/MenuContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,aAAK,eAAe,GAAG;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AACF;;;GAGG;AACH,eAAO,MAAM,WAAW,wBAAyB,eAAe,gBAW/D,CAAC"}

package/react/components/menu/MenuContent.js

@@ -2,11 +2,14 @@ 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();
-    const menuContent = (React.createElement(MenuPortal, { show: isMenuActive() },
+    return (React.createElement(MenuPortal, { show: isMenuActive() },
         React.createElement("div", { id: thisMenuId, className: "menu menu-primary", style: style }, children)));
-    return menuContent;
 };
 //# sourceMappingURL=MenuContent.js.map