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

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

@@ -1 +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"]}
+{"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

@@ -1,4 +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

@@ -1,3 +1,9 @@
+/*!
+ * 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";
@@ -24,6 +30,9 @@ export const LinkerElement = () => {
     });
     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

@@ -1 +1 @@
-{"version":3,"file":"LinkerMenuDeprecated.js","sourceRoot":"","sources":["../../../src/components/linker/LinkerMenuDeprecated.tsx"],"names":[],"mappings":"AAMA,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;AAKF,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"]}
+{"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/menu/Menu.d.ts

@@ -10,4 +10,19 @@ export declare type MenuProps = {
     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

@@ -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=["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),

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;AA8B5C,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"]}
+{"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

@@ -1,3 +1,7 @@
+/**
+ * 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;
@@ -7,5 +11,8 @@ export declare class MenuAutoResizer {
     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

@@ -1,4 +1,8 @@
 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;
@@ -7,18 +11,36 @@ export class MenuAutoResizer {
         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;
         }
@@ -33,6 +55,11 @@ export class MenuAutoResizer {
             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");
     }

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;AASpD,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;QAQrE,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QAKlE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;YAChD,SAAS,EAAE,IAAI;YACf,aAAa,EAAE,KAAK;YACpB,OAAO,EAAE,IAAI;SACb,CAAC,CAAC;QAGH,UAAU,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC,CAAC;IAC5C,CAAC;IAED,UAAU;QACT,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC5B,CAAC;IAKO,KAAK,CAAC,sBAAsB;QAInC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,MAAM,cAAc,CAAC,EAAE;YAC3D,OAAO;SACP;QACD,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,MAAM,mBAAmB,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;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\";\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"]}
+{"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

@@ -1,4 +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

@@ -2,6 +2,10 @@ 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();

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

@@ -1 +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;AAM9C,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"]}
+{"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

@@ -1,4 +1,18 @@
 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

@@ -1,10 +1,25 @@
 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);

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

@@ -1 +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;AAgBlD,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;QAG/F,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"]}
+{"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

@@ -1,8 +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

@@ -1,11 +1,22 @@
 import * as React from "react";
 import { useMenu } from "../../hooks/useMenu";
-export const MenuItem = ({ children, onClick, style, noClose, className = "menu-item", onKeyDown }) => {
+/**
+ * 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 }, children));
+    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

@@ -1 +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;AAS9C,MAAM,CAAC,MAAM,QAAQ,GAMhB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,GAAG,WAAW,EAAE,SAAS,EAAE,EAAO,EAAE;IACvF,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAC;IAIhC,MAAM,eAAe,GAAG,GAAG,EAAE;QAE5B,OAAO,IAAI,OAAO,EAAE,CAAC;QAGrB,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,IAEnB,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}> = ({ children, onClick, style, noClose, className = \"menu-item\", onKeyDown }): 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>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"]}
+{"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"]}