npm - @finsemble/finsemble-ui - Versions diffs - 6.6.1 → 7.0.0-beta.3 - Mend

@finsemble/finsemble-ui 6.6.1 → 7.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (262) hide show

package/react/components/favorites/FavoriteMaker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FavoriteMaker.js","sourceRoot":"","sources":["../../../src/components/favorites/FavoriteMaker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAmBxD,MAAM,CAAC,MAAM,aAAa,GAAgD,CAAC,EAC1E,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GACL,EAAE,EAAE;IACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAGpE,MAAM,cAAc,GAAmB,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI;QAC9C,SAAS,EAAE,UAAU;QACrB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,QAAQ;KAClB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC9C,cAAc,CAAC;QACf,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE;YACpB,cAAc,CAAC,EAAE,CAAC,CAAC;SACnB;aAAM;YACN,WAAW,CAAC;gBACX,EAAE;gBACF,QAAQ;gBACR,IAAI;gBACJ,IAAI,EAAE,cAAc;aACpB,CAAC,CAAC;SACH;IACF,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC;IAC/D,MAAM,OAAO,GAAG,kBAAkB,MAAM,IAAI,SAAS,EAAE,CAAC;IACxD,MAAM,KAAK,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;IAE1D,OAAO,CACN,6BAAK,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,~~IAC1E~~,QAAQ,IAAI,2BAAG,SAAS,EAAC,aAAa,GAAK,CACvC,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { useFavorites } from \"../../hooks/useFavorites\";\nimport { Favorite } from \"../../types/favoriteTypes\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype IconDescriptor = services.window.types.IconDescriptor;\n\ntype FavoriteMakerProps = Favorite & {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n};\n\n/*\n Creates a clickable \"favorite\" that coordinates with the toolbar's pinned <FavoritesShell>.\n * @param {string} [className] - An optional CSS className to append.\n * @param {string} [id] - The unique identifier for the favorite item. This must be consistent across restarts.\n * @param {string} [category] - \"Workspace\" \| \"Application\". The catagory of the favorite item. Currenly only workspaces and launchable Finsemble applications can be favorited.\n * @param {string} [name] - The name of the favorite item. This will be used for display in the FavoriteShell.\n * @param {IconDescriptor} [icon] - The icon of the favorite item. This displays in the FavoriteShell. It defaults to use the initials of the `name` field as its content.\n */\nexport const FavoriteMaker: React.FunctionComponent<FavoriteMakerProps> = ({\n\tid,\n\tcategory,\n\ticon,\n\tname,\n\tchildren,\n\tclassName = \"\",\n\tstyle,\n}) => {\n\tconst { isFavorited, addFavorite, removeFavorite } = useFavorites();\n\n\t// If no icon is specified then default to an avatar based on initials\n\tconst definitiveIcon: IconDescriptor = icon ?? {\n\t\timageType: \"initials\",\n\t\tname: name,\n\t\tcategory: category,\n\t};\n\n\tconst toggleFavorite = (e: React.MouseEvent) => {\n\t\tdefinitiveIcon;\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tif (isFavorited(id)) {\n\t\t\tremoveFavorite(id);\n\t\t} else {\n\t\t\taddFavorite({\n\t\t\t\tid,\n\t\t\t\tcategory,\n\t\t\t\tname,\n\t\t\t\ticon: definitiveIcon,\n\t\t\t});\n\t\t}\n\t};\n\n\tconst active = isFavorited(id) ? \"favorited\" : \"not-favorited\";\n\tconst classes = `favorite-maker ${active} ${className}`;\n\tconst title = isFavorited(id) ? \"Unfavorite\" : \"Favorite\";\n\n\treturn (\n\t\t<div onClick={toggleFavorite} className={classes} style={style} title={title}>\n\t\t\t{children \|\| <i className=\"ff-favorite\"></i>}\n\t\t</div>\n\t);\n};\n"]}
1	+ {"version":3,"file":"FavoriteMaker.js","sourceRoot":"","sources":["../../../src/components/favorites/FavoriteMaker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAmBxD,MAAM,CAAC,MAAM,aAAa,GAAgD,CAAC,EAC1E,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GACL,EAAE,EAAE;IACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAGpE,MAAM,cAAc,GAAmB,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI;QAC9C,SAAS,EAAE,UAAU;QACrB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,QAAQ;KAClB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC9C,cAAc,CAAC;QACf,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE;YACpB,cAAc,CAAC,EAAE,CAAC,CAAC;SACnB;aAAM;YACN,WAAW,CAAC;gBACX,EAAE;gBACF,QAAQ;gBACR,IAAI;gBACJ,IAAI,EAAE,cAAc;aACpB,CAAC,CAAC;SACH;IACF,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC;IAC/D,MAAM,OAAO,GAAG,kBAAkB,MAAM,IAAI,SAAS,EAAE,CAAC;IACxD,MAAM,KAAK,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;IAE1D,OAAO,CACN,6BAAK,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IACrG,QAAQ,IAAI,2BAAG,SAAS,EAAC,aAAa,GAAK,CACvC,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { useFavorites } from \"../../hooks/useFavorites\";\nimport { Favorite } from \"../../types/favoriteTypes\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype IconDescriptor = services.window.types.IconDescriptor;\n\ntype FavoriteMakerProps = Favorite & {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n};\n\n/*\n Creates a clickable \"favorite\" that coordinates with the toolbar's pinned <FavoritesShell>.\n * @param {string} [className] - An optional CSS className to append.\n * @param {string} [id] - The unique identifier for the favorite item. This must be consistent across restarts.\n * @param {string} [category] - \"Workspace\" \| \"Application\". The catagory of the favorite item. Currenly only workspaces and launchable Finsemble applications can be favorited.\n * @param {string} [name] - The name of the favorite item. This will be used for display in the FavoriteShell.\n * @param {IconDescriptor} [icon] - The icon of the favorite item. This displays in the FavoriteShell. It defaults to use the initials of the `name` field as its content.\n */\nexport const FavoriteMaker: React.FunctionComponent<FavoriteMakerProps> = ({\n\tid,\n\tcategory,\n\ticon,\n\tname,\n\tchildren,\n\tclassName = \"\",\n\tstyle,\n}) => {\n\tconst { isFavorited, addFavorite, removeFavorite } = useFavorites();\n\n\t// If no icon is specified then default to an avatar based on initials\n\tconst definitiveIcon: IconDescriptor = icon ?? {\n\t\timageType: \"initials\",\n\t\tname: name,\n\t\tcategory: category,\n\t};\n\n\tconst toggleFavorite = (e: React.MouseEvent) => {\n\t\tdefinitiveIcon;\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tif (isFavorited(id)) {\n\t\t\tremoveFavorite(id);\n\t\t} else {\n\t\t\taddFavorite({\n\t\t\t\tid,\n\t\t\t\tcategory,\n\t\t\t\tname,\n\t\t\t\ticon: definitiveIcon,\n\t\t\t});\n\t\t}\n\t};\n\n\tconst active = isFavorited(id) ? \"favorited\" : \"not-favorited\";\n\tconst classes = `favorite-maker ${active} ${className}`;\n\tconst title = isFavorited(id) ? \"Unfavorite\" : \"Favorite\";\n\n\treturn (\n\t\t<div role=\"button\" tabIndex={0} onClick={toggleFavorite} className={classes} style={style} title={title}>\n\t\t\t{children \|\| <i className=\"ff-favorite\"></i>}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/fdc3Resolver/ResolverContainer.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { ResolverDialog } from "./ResolverDialog";
-const { name: windowName } = FSBL.Clients.WindowClient.getCurrentWindow();
 export const ResolverContainer = () => {
     const [firstLoad, setFirstLoad] = useState(true);
     const [intentRaiser, setIntentRaiser] = useState("");
@@ -8,9 +7,7 @@ export const ResolverContainer = () => {
     const [cancelCallback, setCancelCallback] = useState(() => () => { });
     const [resolutionList, setResolutionList] = useState([]);
     const clearAll = () => {
-        FSBL.FinsembleWindow.getInstance({ name: windowName }, (err, win) => {
-            win.hide(() => { });
-        });
+        finsembleWindow.hide();
         setIntentRaiser("");
         setResolutionList([]);
     };
@@ -18,9 +15,7 @@ export const ResolverContainer = () => {
         var _a;
         setIntentRaiser((_a = choices.originatingAppName) !== null && _a !== void 0 ? _a : "");
         setResolutionList(choices.resolutionList);
-        FSBL.FinsembleWindow.getInstance({ name: windowName }, (err, win) => {
-            win.show(() => { });
-        });
+        finsembleWindow.show();
     };
     if (firstLoad) {
         setFirstLoad(false);
@@ -28,6 +23,8 @@ export const ResolverContainer = () => {
             handleChoices(choices);
             setSendCallback(() => (result) => {
                 clearAll();
+                result.originatingAppName = choices.originatingAppName;
+                result.originatingAppWindow = choices.originatingAppWindow;
                 resolve(result);
             });
             setCancelCallback(() => () => {

package/react/components/fdc3Resolver/ResolverContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResolverContainer.js","sourceRoot":"","sources":["../../../src/components/fdc3Resolver/ResolverContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;~~AAMlD~~,MAAM,~~EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,IAAI,~~CAAC,~~OAAO,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;AAO1E,~~MAAM,~~CAAC,MAAM,~~iBAAiB,GAAG,GAAG,EAAE;IACrC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAM,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IACtE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAM,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAC1E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE3E,MAAM,QAAQ,GAAG,GAAG,EAAE;QACrB,~~IAAI,CAAC,~~eAAe,CAAC,~~WAAW,CAAC,EAAE,~~IAAI,EAAE,~~UAAU,EAAE,EAAE,~~CAAC~~,GAAQ,EAAE,GAAQ,EAAE,EAAE~~;~~YAC7E~~,~~GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACpB,CAAC,CAAC,CAAC;QACH,~~eAAe,CAAC,EAAE,CAAC,CAAC;QACpB,iBAAiB,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,CAAC,OAA4B,EAAE,EAAE;;QACtD,eAAe,CAAC,MAAA,OAAO,CAAC,kBAAkB,mCAAI,EAAE,CAAC,CAAC;QAClD,iBAAiB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAC1C,~~IAAI,CAAC,~~eAAe,CAAC,~~WAAW,CAAC,EAAE,~~IAAI,EAAE,~~UAAU,EAAE,EAAE,~~CAAC~~,GAAQ,EAAE,GAAQ,EAAE,EAAE~~;~~YAC7E~~,~~GAAG,~~CAAC,~~IAAI,~~CAAC~~,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC~~;~~QACpB,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC;~~IAKF,IAAI,SAAS,EAAE;QACd,YAAY,CAAC,KAAK,CAAC,CAAC;QAEpB,MAAM,qBAAqB,GAAG,CAAC,OAA4B,EAAE,EAAE,CAC9D,IAAI,OAAO,CAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACnD,aAAa,CAAC,OAAO,CAAC,CAAC;YACvB,eAAe,CAAC,GAAG,EAAE,CAAC,CAAC,~~MAAc~~,EAAE,EAAE;~~gBACxC~~,QAAQ,EAAE,CAAC;~~gBACX~~,OAAO,CAAC,MAAM,CAAC,CAAC;YACjB,CAAC,CAAC,CAAC;YACH,iBAAiB,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE;gBAC5B,QAAQ,EAAE,CAAC;gBACX,MAAM,CAAC,EAAE,GAAG,EAAE,mBAAmB,EAAE,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEJ,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,0BAA0B,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QAC5F,QAAQ,EAAE,CAAC;KACX;IAED,OAAO,CACN,oBAAC,cAAc,IACd,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,CAAC,QAAa,EAAE,EAAE;YACzB,YAAY,CAAC,QAAQ,CAAC,CAAC;QACxB,CAAC,EACD,QAAQ,EAAE,GAAG,EAAE;YACd,cAAc,EAAE,CAAC;QAClB,CAAC,GACA,CACF,CAAC;AACH,CAAC,CAAC","sourcesContent":["/!\n Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React, { useState } from \"react\";\nimport { ResolverDialog } from \"./ResolverDialog\";\nimport { ResolutionList } from \"../../types/fdc3\";\nimport { clients } from \"@finsemble/finsemble-api\";\n\ntype ResolverResolution = clients.Interop.types.ResolverResolution;\n\~~nconst { name: windowName } = FSBL.Clients.WindowClient.getCurrentWindow();\n\~~ntype ResolverChoicesType = {\n\tresolutionList: ResolutionList[];\n\toriginatingAppName?: string;\n};\n\nexport const ResolverContainer = () => {\n\tconst [firstLoad, setFirstLoad] = useState(true);\n\tconst [intentRaiser, setIntentRaiser] = useState(\"\");\n\tconst [sendCallback, setSendCallback] = useState<any>(() => () => {});\n\tconst [cancelCallback, setCancelCallback] = useState<any>(() => () => {});\n\tconst [resolutionList, setResolutionList] = useState<ResolutionList[]>([]);\n\n\tconst clearAll = () => {\n\t\~~tFSBL~~.~~FinsembleWindow.getInstance({ name: windowName }, (err: any, win: any) => {\n\t\t\twin.~~hide(() ~~=> {})~~;\n\t\~~t});\n\t\~~tsetIntentRaiser(\"\");\n\t\tsetResolutionList([]);\n\t};\n\tconst handleChoices = (choices: ResolverChoicesType) => {\n\t\tsetIntentRaiser(choices.originatingAppName ?? \"\");\n\t\tsetResolutionList(choices.resolutionList);\n\t\~~tFSBL~~.~~FinsembleWindow.getInstance({ name: windowName }, (err: any, win: any) => {\n\t\t\twin.~~show(() ~~=> {})~~;\n\t\t});\n\~~t};\~~n\n\t// We want to register as an IntentResolverListener, but we only want to register once\n\t// However, the IntentResovlerListener handler needs to have access to this component's states\n\t// So, this block will register the listener, and then never be called again\n\tif (firstLoad) {\n\t\tsetFirstLoad(false);\n\n\t\tconst handleResolverChoices = (choices: ResolverChoicesType) =>\n\t\t\tnew Promise<ResolverResolution>((resolve, reject) => {\n\t\t\t\thandleChoices(choices);\n\t\t\t\tsetSendCallback(() => (result: ~~object~~) => {\n\t\t\t\t\tclearAll();\n\t\t\t\t\tresolve(result);\n\t\t\t\t});\n\t\t\t\tsetCancelCallback(() => () => {\n\t\t\t\t\tclearAll();\n\t\t\t\t\treject({ err: \"Cancelled by user\" });\n\t\t\t\t});\n\t\t\t});\n\n\t\tFSBL.internal.interopAdmin.registerUIResolverListener(handleResolverChoices).then(() => {});\n\t\tclearAll();\n\t}\n\n\treturn (\n\t\t<ResolverDialog\n\t\t\tintentRaiser={intentRaiser}\n\t\t\tresolutionList={resolutionList}\n\t\t\tonSend={(selected: any) => {\n\t\t\t\tsendCallback(selected);\n\t\t\t}}\n\t\t\tonCancel={() => {\n\t\t\t\tcancelCallback();\n\t\t\t}}\n\t\t/>\n\t);\n};\n"]}
1	+ {"version":3,"file":"ResolverContainer.js","sourceRoot":"","sources":["../../../src/components/fdc3Resolver/ResolverContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAYlD,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACrC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAM,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IACtE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAM,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAC1E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE3E,MAAM,QAAQ,GAAG,GAAG,EAAE;QACrB,eAAe,CAAC,IAAI,EAAE,CAAC;QACvB,eAAe,CAAC,EAAE,CAAC,CAAC;QACpB,iBAAiB,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,CAAC,OAA4B,EAAE,EAAE;;QACtD,eAAe,CAAC,MAAA,OAAO,CAAC,kBAAkB,mCAAI,EAAE,CAAC,CAAC;QAClD,iBAAiB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAC1C,eAAe,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC,CAAC;IAKF,IAAI,SAAS,EAAE;QACd,YAAY,CAAC,KAAK,CAAC,CAAC;QAEpB,MAAM,qBAAqB,GAAG,CAAC,OAA4B,EAAE,EAAE,CAC9D,IAAI,OAAO,CAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACnD,aAAa,CAAC,OAAO,CAAC,CAAC;YACvB,eAAe,CAAC,GAAG,EAAE,CAAC,CAAC,MAA0B,EAAE,EAAE;gBACpD,QAAQ,EAAE,CAAC;gBAEX,MAAM,CAAC,kBAAkB,GAAG,OAAO,CAAC,kBAAkB,CAAC;gBACvD,MAAM,CAAC,oBAAoB,GAAG,OAAO,CAAC,oBAAoB,CAAC;gBAC3D,OAAO,CAAC,MAAM,CAAC,CAAC;YACjB,CAAC,CAAC,CAAC;YACH,iBAAiB,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE;gBAC5B,QAAQ,EAAE,CAAC;gBACX,MAAM,CAAC,EAAE,GAAG,EAAE,mBAAmB,EAAE,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEJ,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,0BAA0B,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QAC5F,QAAQ,EAAE,CAAC;KACX;IAED,OAAO,CACN,oBAAC,cAAc,IACd,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,CAAC,QAAa,EAAE,EAAE;YACzB,YAAY,CAAC,QAAQ,CAAC,CAAC;QACxB,CAAC,EACD,QAAQ,EAAE,GAAG,EAAE;YACd,cAAc,EAAE,CAAC;QAClB,CAAC,GACA,CACF,CAAC;AACH,CAAC,CAAC","sourcesContent":["/!\n Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React, { useState } from \"react\";\nimport { ResolverDialog } from \"./ResolverDialog\";\nimport { ResolutionList } from \"../../types/fdc3\";\nimport { clients } from \"@finsemble/finsemble-api\";\n\ntype ResolverResolution = clients.Interop.types.ResolverResolution;\n\ntype ResolverChoicesType = {\n\tresolutionList: ResolutionList[];\n\toriginatingAppName?: string;\n\toriginatingAppWindow?: string;\n};\n\nexport const ResolverContainer = () => {\n\tconst [firstLoad, setFirstLoad] = useState(true);\n\tconst [intentRaiser, setIntentRaiser] = useState(\"\");\n\tconst [sendCallback, setSendCallback] = useState<any>(() => () => {});\n\tconst [cancelCallback, setCancelCallback] = useState<any>(() => () => {});\n\tconst [resolutionList, setResolutionList] = useState<ResolutionList[]>([]);\n\n\tconst clearAll = () => {\n\t\tfinsembleWindow.hide();\n\t\tsetIntentRaiser(\"\");\n\t\tsetResolutionList([]);\n\t};\n\tconst handleChoices = (choices: ResolverChoicesType) => {\n\t\tsetIntentRaiser(choices.originatingAppName ?? \"\");\n\t\tsetResolutionList(choices.resolutionList);\n\t\tfinsembleWindow.show();\n\t};\n\n\t// We want to register as an IntentResolverListener, but we only want to register once\n\t// However, the IntentResovlerListener handler needs to have access to this component's states\n\t// So, this block will register the listener, and then never be called again\n\tif (firstLoad) {\n\t\tsetFirstLoad(false);\n\n\t\tconst handleResolverChoices = (choices: ResolverChoicesType) =>\n\t\t\tnew Promise<ResolverResolution>((resolve, reject) => {\n\t\t\t\thandleChoices(choices);\n\t\t\t\tsetSendCallback(() => (result: ResolverResolution) => {\n\t\t\t\t\tclearAll();\n\t\t\t\t\t// originatingAppName and originatingAppWindow returned to support auto-associate\n\t\t\t\t\tresult.originatingAppName = choices.originatingAppName;\n\t\t\t\t\tresult.originatingAppWindow = choices.originatingAppWindow;\n\t\t\t\t\tresolve(result);\n\t\t\t\t});\n\t\t\t\tsetCancelCallback(() => () => {\n\t\t\t\t\tclearAll();\n\t\t\t\t\treject({ err: \"Cancelled by user\" });\n\t\t\t\t});\n\t\t\t});\n\n\t\tFSBL.internal.interopAdmin.registerUIResolverListener(handleResolverChoices).then(() => {});\n\t\tclearAll();\n\t}\n\n\treturn (\n\t\t<ResolverDialog\n\t\t\tintentRaiser={intentRaiser}\n\t\t\tresolutionList={resolutionList}\n\t\t\tonSend={(selected: any) => {\n\t\t\t\tsendCallback(selected);\n\t\t\t}}\n\t\t\tonCancel={() => {\n\t\t\t\tcancelCallback();\n\t\t\t}}\n\t\t/>\n\t);\n};\n"]}

package/react/components/icon/Icon.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { services } from "@finsemble/finsemble-api";
 declare type IconDescriptor = services.window.types.IconDescriptor;
-export declare const iconFromConfig: (config: any, title: string) => IconDescriptor;
+export declare const iconFromConfig: (config: any, title: string, appD: any) => IconDescriptor;
 declare type IconProps = IconDescriptor & {
     className?: string;
 };

package/react/components/icon/Icon.js CHANGED Viewed

@@ -1,5 +1,12 @@
 import * as React from "react";
-export const iconFromConfig = (config, title) => {
+export const iconFromConfig = (config, title, appD) => {
+    var _a;
+    if (((_a = appD === null || appD === void 0 ? void 0 : appD.icons) === null || _a === void 0 ? void 0 : _a.length) > 0 && appD.icons[0].src) {
+        return {
+            imageType: "url",
+            path: appD.icons[0].src,
+        };
+    }
     const defaultIcon = {
         imageType: "initials",
         name: title,

package/react/components/icon/Icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAW,EAAE,KAAa,EAAkB,EAAE;~~IAE5E~~,MAAM,WAAW,GAAmB;QACnC,SAAS,EAAE,UAAU;QACrB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,aAAa;KACvB,CAAC;IAGF,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS,EAAE;QACtB,OAAO;YACN,SAAS,EAAE,UAAU;YACrB,IAAI,EAAE,MAAM,CAAC,SAAS;SACtB,CAAC;KACF;IACD,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,EAAE;QACpB,OAAO;YACN,SAAS,EAAE,KAAK;YAChB,IAAI,EAAE,MAAM,CAAC,OAAO;SACpB,CAAC;KACF;IACD,OAAO,WAAW,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,SAAiB,EAAE,YAAoB,EAAE,EAAU,EAAE;IAC3E,IAAI,OAAO,GAAG,uBAAuB,SAAS,EAAE,CAAC;IACjD,IAAI,SAAS,KAAK,KAAK,EAAE;QACxB,OAAO,GAAG,GAAG,OAAO,kBAAkB,CAAC;KACvC;SAAM;QACN,OAAO,GAAG,GAAG,OAAO,cAAc,CAAC;KACnC;IACD,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC;AASF,MAAM,sBAAsB,GAAG,CAAC,IAAY,EAAU,EAAE;IAEvD,MAAM,gBAAgB,GAAG,IAAI;SAC3B,WAAW,EAAE;SACb,KAAK,CAAC,GAAG,CAAC;SACV,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAGlD,IAAI,gBAAgB,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAG5D,IAAI,gBAAgB,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAG3E,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAClF,CAAC,CAAC;AAUF,MAAM,CAAC,MAAM,IAAI,GAAgD,CAAC,KAAK,EAAE,EAAE;;IAC1E,IAAI,MAAM,CAAC;IACX,IAAI,KAAK,CAAC,SAAS,KAAK,UAAU,EAAE;QACnC,MAAM,IAAI,GAAG,MAAA,KAAK,CAAC,IAAI,mCAAI,EAAE,CAAC;QAC9B,MAAM,GAAG,kCAAO,sBAAsB,CAAC,IAAI,CAAC,CAAQ,CAAC;KACrD;IACD,IAAI,KAAK,CAAC,SAAS,KAAK,UAAU,EAAE;QACnC,MAAM,GAAG,2BAAG,SAAS,EAAE,KAAK,CAAC,IAAI,GAAM,CAAC;KACxC;IACD,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,EAAE;QAC9B,MAAM,GAAG,6BAAK,GAAG,EAAE,KAAK,CAAC,IAAI,GAAI,CAAC;KAClC;IACD,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI,UAAU,CAAC;IAChD,MAAM,OAAO,GAAG,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAE1D,OAAO,CACN,6BAAK,SAAS,EAAE,OAAO,mBAAiB,KAAK,CAAC,QAAQ,IACpD,MAAM,CACF,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype IconDescriptor = services.window.types.IconDescriptor;\n\n/*\n Converts a Finsemble config entry to an Icon type that can be used to create <Icon> components.\n * @param config A finsemble icon config entry as derived by the launcher (e.g. \"icons.toolBar\", \"icons.taskbar\" or \"icons.titleBar\")\n * @param title The title for the icon\n /\nexport const iconFromConfig = (config: any, title: string): IconDescriptor => {\n\t// Our default icon. The <Icon> component can generate an \"initials\" icon based just off of the `name`\n\tconst defaultIcon: IconDescriptor = {\n\t\timageType: \"initials\",\n\t\tname: title,\n\t\tcategory: \"Application\",\n\t};\n\n\t// Use iconography if available in the app's icon config entry\n\tif (config?.iconClass) {\n\t\treturn {\n\t\t\timageType: \"fonticon\",\n\t\t\tpath: config.iconClass,\n\t\t};\n\t}\n\tif (config?.iconURL) {\n\t\treturn {\n\t\t\timageType: \"url\",\n\t\t\tpath: config.iconURL,\n\t\t};\n\t}\n\treturn defaultIcon;\n};\n\nconst deriveClasses = (imageType: string, className: string = \"\"): string => {\n\tlet classes = `icon-avatar-wrapper ${className}`;\n\tif (imageType === \"url\") {\n\t\tclasses = `${classes} entity-with-img`;\n\t} else {\n\t\tclasses = `${classes} icon-avatar`;\n\t}\n\treturn classes;\n};\n\ntype IconProps = IconDescriptor & {\n\tclassName?: string;\n};\n\n/\n Derives two initials from a given name based on some simple heuristics.\n /\nconst avatarInitialsFromName = (name: string): string => {\n\t// Significant words are over three characters\n\tconst significantWords = name\n\t\t.toUpperCase()\n\t\t.split(\" \")\n\t\t.flatMap((str) => (str.length > 3 ? [str] : []));\n\n\t// If no significant words then just return first two characters of the original name\n\tif (significantWords.length === 0) return name.substr(0, 2);\n\n\t// If only one significant word then return its first two characters\n\tif (significantWords.length === 1) return significantWords[0].substr(0, 2);\n\n\t// Return the first character of the first two significant words\n\treturn significantWords[0].substr(0, 1).concat(significantWords[1].substr(0, 1));\n};\n\n/\n An icon to accompany Finsemble components or workspaces.\n * @param {string} [imageType] - \"fonticon\" \| \"url\" \| \"initials\" - Determines how the icon is generated.\n * @param {string} [path] - The path of the image.\n * @param {string} [name] - Used if imageType is \"initials\" to generate a text based icon.\n * @param {string} [category] - This will appear on the `data-category` attribute which can be used to drive CSS.\n * @param {string} [className] - Optional class to be appended.\n /\nexport const Icon: React.FunctionComponent<Partial<IconProps>> = (props) => {\n\tlet avatar;\n\tif (props.imageType === \"initials\") {\n\t\tconst name = props.name ?? \"\";\n\t\tavatar = <span>{avatarInitialsFromName(name)}</span>;\n\t}\n\tif (props.imageType === \"fonticon\") {\n\t\tavatar = <i className={props.path}></i>;\n\t}\n\tif (props.imageType === \"url\") {\n\t\tavatar = <img src={props.path} />;\n\t}\n\tconst imageType = props.imageType ?? \"initials\";\n\tconst classes = deriveClasses(imageType, props.className);\n\n\treturn (\n\t\t<div className={classes} data-category={props.category}>\n\t\t\t{avatar}\n\t\t</div>\n\t);\n};\n\n/\nexport const CategoryIcon: React.FunctionComponent<CategoryIconProps> = (props) => {\n\tlet className = \"\";\n\tif(props.category == \"Application\")\n\t\tclassName=`entity-component ${props.className}`;\n\tif(props.category == \"Workspace\")\n\t\tclassName=`entity-workspace ${props.className}`;\n\treturn (\n\t\t<Icon {...props} {...className} />\n\t)\n}\n*/\n"]}
1	+ {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAW,EAAE,KAAa,EAAE,IAAS,EAAkB,EAAE;;IACvF,IAAI,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,0CAAE,MAAM,IAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE;QACjD,OAAO;YACN,SAAS,EAAE,KAAK;YAChB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG;SACvB,CAAC;KACF;IAGD,MAAM,WAAW,GAAmB;QACnC,SAAS,EAAE,UAAU;QACrB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,aAAa;KACvB,CAAC;IAGF,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS,EAAE;QACtB,OAAO;YACN,SAAS,EAAE,UAAU;YACrB,IAAI,EAAE,MAAM,CAAC,SAAS;SACtB,CAAC;KACF;IACD,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,EAAE;QACpB,OAAO;YACN,SAAS,EAAE,KAAK;YAChB,IAAI,EAAE,MAAM,CAAC,OAAO;SACpB,CAAC;KACF;IACD,OAAO,WAAW,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,SAAiB,EAAE,YAAoB,EAAE,EAAU,EAAE;IAC3E,IAAI,OAAO,GAAG,uBAAuB,SAAS,EAAE,CAAC;IACjD,IAAI,SAAS,KAAK,KAAK,EAAE;QACxB,OAAO,GAAG,GAAG,OAAO,kBAAkB,CAAC;KACvC;SAAM;QACN,OAAO,GAAG,GAAG,OAAO,cAAc,CAAC;KACnC;IACD,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC;AASF,MAAM,sBAAsB,GAAG,CAAC,IAAY,EAAU,EAAE;IAEvD,MAAM,gBAAgB,GAAG,IAAI;SAC3B,WAAW,EAAE;SACb,KAAK,CAAC,GAAG,CAAC;SACV,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAGlD,IAAI,gBAAgB,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAG5D,IAAI,gBAAgB,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAG3E,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAClF,CAAC,CAAC;AAUF,MAAM,CAAC,MAAM,IAAI,GAAgD,CAAC,KAAK,EAAE,EAAE;;IAC1E,IAAI,MAAM,CAAC;IACX,IAAI,KAAK,CAAC,SAAS,KAAK,UAAU,EAAE;QACnC,MAAM,IAAI,GAAG,MAAA,KAAK,CAAC,IAAI,mCAAI,EAAE,CAAC;QAC9B,MAAM,GAAG,kCAAO,sBAAsB,CAAC,IAAI,CAAC,CAAQ,CAAC;KACrD;IACD,IAAI,KAAK,CAAC,SAAS,KAAK,UAAU,EAAE;QACnC,MAAM,GAAG,2BAAG,SAAS,EAAE,KAAK,CAAC,IAAI,GAAM,CAAC;KACxC;IACD,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,EAAE;QAC9B,MAAM,GAAG,6BAAK,GAAG,EAAE,KAAK,CAAC,IAAI,GAAI,CAAC;KAClC;IACD,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI,UAAU,CAAC;IAChD,MAAM,OAAO,GAAG,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAE1D,OAAO,CACN,6BAAK,SAAS,EAAE,OAAO,mBAAiB,KAAK,CAAC,QAAQ,IACpD,MAAM,CACF,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype IconDescriptor = services.window.types.IconDescriptor;\n\n/*\n Converts a Finsemble config entry to an Icon type that can be used to create <Icon> components.\n * @param config A finsemble icon config entry as derived by the launcher (e.g. \"icons.toolBar\", \"icons.taskbar\" or \"icons.titleBar\")\n * @param title The title for the icon\n /\nexport const iconFromConfig = (config: any, title: string, appD: any): IconDescriptor => {\n\tif (appD?.icons?.length > 0 && appD.icons[0].src) {\n\t\treturn {\n\t\t\timageType: \"url\",\n\t\t\tpath: appD.icons[0].src,\n\t\t};\n\t}\n\n\t// Our default icon. The <Icon> component can generate an \"initials\" icon based just off of the `name`\n\tconst defaultIcon: IconDescriptor = {\n\t\timageType: \"initials\",\n\t\tname: title,\n\t\tcategory: \"Application\",\n\t};\n\n\t// Use iconography if available in the app's icon config entry\n\tif (config?.iconClass) {\n\t\treturn {\n\t\t\timageType: \"fonticon\",\n\t\t\tpath: config.iconClass,\n\t\t};\n\t}\n\tif (config?.iconURL) {\n\t\treturn {\n\t\t\timageType: \"url\",\n\t\t\tpath: config.iconURL,\n\t\t};\n\t}\n\treturn defaultIcon;\n};\n\nconst deriveClasses = (imageType: string, className: string = \"\"): string => {\n\tlet classes = `icon-avatar-wrapper ${className}`;\n\tif (imageType === \"url\") {\n\t\tclasses = `${classes} entity-with-img`;\n\t} else {\n\t\tclasses = `${classes} icon-avatar`;\n\t}\n\treturn classes;\n};\n\ntype IconProps = IconDescriptor & {\n\tclassName?: string;\n};\n\n/\n Derives two initials from a given name based on some simple heuristics.\n /\nconst avatarInitialsFromName = (name: string): string => {\n\t// Significant words are over three characters\n\tconst significantWords = name\n\t\t.toUpperCase()\n\t\t.split(\" \")\n\t\t.flatMap((str) => (str.length > 3 ? [str] : []));\n\n\t// If no significant words then just return first two characters of the original name\n\tif (significantWords.length === 0) return name.substr(0, 2);\n\n\t// If only one significant word then return its first two characters\n\tif (significantWords.length === 1) return significantWords[0].substr(0, 2);\n\n\t// Return the first character of the first two significant words\n\treturn significantWords[0].substr(0, 1).concat(significantWords[1].substr(0, 1));\n};\n\n/\n An icon to accompany Finsemble components or workspaces.\n * @param {string} [imageType] - \"fonticon\" \| \"url\" \| \"initials\" - Determines how the icon is generated.\n * @param {string} [path] - The path of the image.\n * @param {string} [name] - Used if imageType is \"initials\" to generate a text based icon.\n * @param {string} [category] - This will appear on the `data-category` attribute which can be used to drive CSS.\n * @param {string} [className] - Optional class to be appended.\n /\nexport const Icon: React.FunctionComponent<Partial<IconProps>> = (props) => {\n\tlet avatar;\n\tif (props.imageType === \"initials\") {\n\t\tconst name = props.name ?? \"\";\n\t\tavatar = <span>{avatarInitialsFromName(name)}</span>;\n\t}\n\tif (props.imageType === \"fonticon\") {\n\t\tavatar = <i className={props.path}></i>;\n\t}\n\tif (props.imageType === \"url\") {\n\t\tavatar = <img src={props.path} />;\n\t}\n\tconst imageType = props.imageType ?? \"initials\";\n\tconst classes = deriveClasses(imageType, props.className);\n\n\treturn (\n\t\t<div className={classes} data-category={props.category}>\n\t\t\t{avatar}\n\t\t</div>\n\t);\n};\n\n/\nexport const CategoryIcon: React.FunctionComponent<CategoryIconProps> = (props) => {\n\tlet className = \"\";\n\tif(props.category == \"Application\")\n\t\tclassName=`entity-component ${props.className}`;\n\tif(props.category == \"Workspace\")\n\t\tclassName=`entity-workspace ${props.className}`;\n\treturn (\n\t\t<Icon {...props} {...className} />\n\t)\n}\n*/\n"]}

package/react/components/legacyControls/FinsembleDnDContext.js CHANGED Viewed

@@ -71,7 +71,7 @@ const ScrollingChevron = (props) => {
         React.createElement("i", { className: classNames, onClick: scrollFunction })));
 };
 export const FinsembleDnDContext = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { allowHorizontalScroll } = props;
     const onDragEnd = (_a = props.onDragEnd) !== null && _a !== void 0 ? _a : defaultOnDragEnd;
     const onDragBegin = (_b = props.onDragStart) !== null && _b !== void 0 ? _b : defaultOnDragBegin;
@@ -98,8 +98,6 @@ export const FinsembleDnDContext = (props) => {
     const isOverflowPresent = containerMeasurements.clientWidth !== 0 &&
         Math.abs(containerMeasurements.clientWidth - containerMeasurements.scrollWidth) > 0;
     const showChevrons = allowHorizontalScroll && isOverflowPresent;
-    const dashbar = (_h = props.metadata) === null || _h === void 0 ? void 0 : _h.dashbar;
-    const widgetDividerWidth = (dashbar === null || dashbar === void 0 ? void 0 : dashbar.widgetDividerWidth) || 0;
     const leftChevronDisabled = !!(showChevrons && containerScrollLeft === 0);
     const rightChevronDisabled = !!(showChevrons &&
         containerMeasurements.scrollWidth - containerScrollLeft - containerMeasurements.offsetWidth === 0);
@@ -116,7 +114,7 @@ export const FinsembleDnDContext = (props) => {
             return;
         let visibleLeftItem = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.childNodes[leftItemIndex - 1];
         if (visibleLeftItem) {
-            let calculatedFakeItemWidth = scrollHorizontally((_b = (visibleLeftItem === null || visibleLeftItem === void 0 ? void 0 : visibleLeftItem.clientWidth) - widgetDividerWidth) !== null && _b !== void 0 ? _b : chevronScrollDistance, scrollFunctionState, scrollFunctionStateSetters, 1);
+            let calculatedFakeItemWidth = scrollHorizontally((_b = visibleLeftItem === null || visibleLeftItem === void 0 ? void 0 : visibleLeftItem.clientWidth) !== null && _b !== void 0 ? _b : chevronScrollDistance, scrollFunctionState, scrollFunctionStateSetters, 1);
             setFakeItemWidth(calculatedFakeItemWidth);
             setLeftItemIndex(leftItemIndex - 1);
         }
@@ -127,7 +125,7 @@ export const FinsembleDnDContext = (props) => {
             return;
         let visibleLeftItem = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.childNodes[leftItemIndex];
         if (visibleLeftItem) {
-            let calculatedFakeItemWidth = scrollHorizontally((_b = (visibleLeftItem === null || visibleLeftItem === void 0 ? void 0 : visibleLeftItem.clientWidth) - widgetDividerWidth) !== null && _b !== void 0 ? _b : chevronScrollDistance, scrollFunctionState, scrollFunctionStateSetters, -1);
+            let calculatedFakeItemWidth = scrollHorizontally((_b = visibleLeftItem === null || visibleLeftItem === void 0 ? void 0 : visibleLeftItem.clientWidth) !== null && _b !== void 0 ? _b : chevronScrollDistance, scrollFunctionState, scrollFunctionStateSetters, -1);
             setFakeItemWidth(calculatedFakeItemWidth);
             setLeftItemIndex(leftItemIndex + 1);
         }
@@ -135,7 +133,9 @@ export const FinsembleDnDContext = (props) => {
     const scrollme = (event) => {
         if (!event.nativeEvent.deltaY)
             return;
-        event.nativeEvent.deltaY < 0 ? scrollToLeft() : scrollToRight();
+        if (isOverflowPresent) {
+            event.nativeEvent.deltaY < 0 ? scrollToLeft() : scrollToRight();
+        }
     };
     const doDOMManipulation = () => {
         if (props.allowHorizontalScroll && containerRef.current)
@@ -162,7 +162,7 @@ export const FinsembleDnDContext = (props) => {
     }, [SortContainer]);
     return (React.createElement("div", { id: props.id },
         showChevrons && (React.createElement(ScrollingChevron, { isDisabled: leftChevronDisabled, chevronDirection: ChevronDirection.left, showToolTip: props.showScrollButtonsTooltip, title: props.leftButtonTooltip, scrollFunction: scrollToLeft })),
-        React.createElement(SortContainer, { onSortEnd: onDragEnd, onSortStart: onDragBegin, onSortMove: onDragMove, onSortOver: onDragOver, distance: distance, axis: (_j = props.axis) !== null && _j !== void 0 ? _j : AllowableDnDAxis.y, lockAxis: props.lockAxis }, props.children),
+        React.createElement(SortContainer, { onSortEnd: onDragEnd, onSortStart: onDragBegin, onSortMove: onDragMove, onSortOver: onDragOver, distance: distance, axis: (_h = props.axis) !== null && _h !== void 0 ? _h : AllowableDnDAxis.y, lockAxis: props.lockAxis }, props.children),
         showChevrons && (React.createElement(ScrollingChevron, { isDisabled: rightChevronDisabled, chevronDirection: ChevronDirection.right, showToolTip: props.showScrollButtonsTooltip, title: props.rightButtonTooltip, scrollFunction: scrollToRight }))));
 };
 //# sourceMappingURL=FinsembleDnDContext.js.map

package/react/components/legacyControls/FinsembleDnDContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FinsembleDnDContext.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDnDContext.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { SortableContainer } from \"react-sortable-hoc\";\n\ntype ScrollFunctionState = {\n\tcontainerScrollLeft: number;\n\tcontainerMeasurements: ContainerMeasurements;\n};\n\ntype ScrollFunctionStateSetters = {\n\tsetScrollLeft: React.Dispatch<React.SetStateAction<number>>;\n};\n\nenum ChevronDirection {\n\tleft = \"left\",\n\tright = \"right\",\n}\n\nexport enum AllowableDnDAxis {\n\tx = \"x\",\n\ty = \"y\",\n}\n\ntype ScrollingChevronProps = {\n\tchevronDirection: ChevronDirection;\n\tisDisabled: boolean;\n\tshowToolTip?: boolean;\n\ttitle?: string;\n\tscrollFunction: React.MouseEventHandler;\n};\n\nconst SORT_CONTAINER_DRAG_DISTANCE = 10;\n\nconst defaultOnDragEnd = () => {\n\tconsole.warn(\"No onDragEnd passed to FinsembleDnDContext\");\n};\n\nconst defaultOnDragBegin = Function.prototype;\nconst defaultOnDrag = Function.prototype;\nconst defaultOnDragOver = Function.prototype;\nconst defaultOnLayoutUpdate = Function.prototype;\n\ntype ContainerMeasurements = {\n\tclientLeft: number;\n\tclientWidth: number;\n\tscrollLeft: number;\n\tscrollWidth: number;\n\toffsetLeft: number;\n\toffsetWidth: number;\n};\n\nconst DEFAULT_CONTAINER_MEASUREMENTS: ContainerMeasurements = {\n\tclientLeft: 0,\n\tclientWidth: 0,\n\tscrollLeft: 0,\n\tscrollWidth: 0,\n\toffsetLeft: 0,\n\toffsetWidth: 0,\n};\n\nconst DEFAULT_CHEVRON_SCROLL_DISTANCE = 60;\n/*\n Listens for resize events on the DOM and changes whether we should render the scrolling chevrons.\n * @param overflowStateSetter\n /\nconst addResizeHandler = (overflowStateSetter: () => void) => () => {\n\twindow.addEventListener(\"resize\", overflowStateSetter);\n\treturn () => {\n\t\twindow.removeEventListener(\"resize\", overflowStateSetter);\n\t};\n};\n\n/\n Scrolls forward or back\n * @param containerRef\n * @param distance How far to move\n * @param state Current scroll state\n * @param stateSetters Scroll state setters\n * @param scrollDir Whether we're scrolling forward or backwards\n * @param deltaY The scroll amount that came from the `wheel` event.\n /\nconst scrollHorizontally = (\n\tdistance: number,\n\tstate: ScrollFunctionState,\n\tstateSetters: ScrollFunctionStateSetters,\n\tscrollDir?: number,\n\tdeltaY?: number\n) => {\n\tconst { setScrollLeft } = stateSetters;\n\tconst { containerScrollLeft, containerMeasurements } = state;\n\n\tif (containerMeasurements.scrollWidth === 0) return;\n\tlet scrollAmount = 0;\n\n\tlet delta = 0;\n\tif (deltaY) {\n\t\tdelta = Math.max(-1, Math.min(1, -deltaY));\n\t} else if (scrollDir) {\n\t\tdelta = Math.max(-1, Math.min(1, scrollDir));\n\t}\n\n\tlet fakeItemWidth = 0;\n\n\t// advance the scroll position 40 px forward or back, depending on the mouse wheel direction.\n\t// eslint-disable-next-line no-mixed-operators\n\tlet newScrollLeft = containerScrollLeft - delta distance;\n\n\tif (scrollAmount >= distance) {\n\t\treturn fakeItemWidth;\n\t}\n\n\t// See the links inside of the main body of FinsembleDnDContext if offsetLeft/Width are unfamiliar to you\n\tconst rightEdgeOfScrollingViewport =\n\t\tcontainerMeasurements.offsetLeft + containerMeasurements.offsetWidth + newScrollLeft;\n\n\tconst rightMostEdgeOfScrollingArea = containerMeasurements.offsetLeft + containerMeasurements.scrollWidth;\n\n\t// if we've scrolled beyond the right-most edge of the area, calculate the fake item width\n\tif (rightEdgeOfScrollingViewport > rightMostEdgeOfScrollingArea) {\n\t\tfakeItemWidth = newScrollLeft - (containerMeasurements.scrollWidth - containerMeasurements.clientWidth);\n\t}\n\n\t// if we've scrolled past the left-most area, set the scrollLeft to the leftMost edge of the region.\n\tif (newScrollLeft < 0) newScrollLeft = 0;\n\n\tif (newScrollLeft !== containerScrollLeft) {\n\t\tsetScrollLeft(newScrollLeft);\n\t}\n\n\treturn fakeItemWidth;\n};\n\n/*\n Simple component that renders the left and right chevrons.\n * @param props\n /\nconst ScrollingChevron = (props: ScrollingChevronProps) => {\n\tconst { isDisabled, chevronDirection, showToolTip, title, scrollFunction } = props;\n\n\tconst classNames = `scroll-button ff-chevron-${chevronDirection} ${isDisabled ? \"greyedOut\" : null}`;\n\tconst toolTip = showToolTip ? title : \"\";\n\treturn (\n\t\t<div className=\"chevron-container\" title={toolTip}>\n\t\t\t<i className={classNames} onClick={scrollFunction}></i>\n\t\t</div>\n\t);\n};\n\ntype FinsembleDnDContextProps = {\n\tid?: string;\n\tleftButtonTooltip?: string;\n\trightButtonTooltip?: string;\n\tallowHorizontalScroll?: boolean;\n\tshowScrollButtonsTooltip?: boolean;\n\tchevronScrollDistance?: number;\n\tonDragEnd?: Function;\n\tonDragStart?: Function;\n\tonDragMove?: Function;\n\tonDragOver?: Function;\n\tonLayoutUpdate?: Function;\n\ttransitionDuration?: number;\n\tdistance?: number;\n\taxis?: AllowableDnDAxis;\n\tlockAxis?: AllowableDnDAxis;\n\tclassName?: string;\n\tmetadata?: Record<string, any> \| undefined;\n};\n\n/\n The FinsembleDnDContext allows for all of the Draggable and Droppable components to work.\n * It wraps its children and allows them to do draggy and droppy things.\n * It also allows for horizontal containers to provide scrolling functionality.\n * @param props\n * @param props.id ID for the container that wraps the sortable container\n * @param props.allowHorizontalScroll whether the DND context should allow for horizontal scrolling\n * @param props.showScrollButtonsTooltip\n * @param props.leftButtonTooltip Tooltip for left scroll button\n * @param props.rightButtonTooltip Tooltip for right scroll button\n * @param props.chevronScrollDistance how far clicking the chevrons should push the content forward or backwards\n * @param props.onDragEnd handler for sorting\n * @param props.onDragBegin handler for sorting\n * @param props.onDragOver\n * @param props.onLayoutUpdate handler for rendering. Invokes on useLayoutEffect\n * @param props.distance how far the user has to drag an element to trigger sorting behavior\n * @param props.axis whether to sort vertically or horizontally.\n * @param props.className optional styles to pass the the sortable container\n /\nexport const FinsembleDnDContext: React.FunctionComponent<FinsembleDnDContextProps> = (props) => {\n\tconst { allowHorizontalScroll } = props;\n\tconst onDragEnd = props.onDragEnd ?? defaultOnDragEnd;\n\tconst onDragBegin = props.onDragStart ?? defaultOnDragBegin;\n\tconst onDragMove = props.onDragMove ?? defaultOnDrag;\n\tconst onDragOver = props.onDragOver ?? defaultOnDragOver;\n\t// This is the numberr of pixels that a draggable element has to be dragged before the sorting kicks in.\n\tconst distance = props.distance ?? SORT_CONTAINER_DRAG_DISTANCE;\n\tconst onLayoutUpdate = props.onLayoutUpdate ?? defaultOnLayoutUpdate;\n\n\t// This is the stateful variable that holds the active 'scrollLeft' property for the DOM node\n\t// that's rendered inside of the sort container.\n\tconst [containerScrollLeft, setContainerScrollLeft] = React.useState(0);\n\t// read the comment in doForceUpdate to understand this.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tconst [forceUpdate, setForceUpdate] = React.useState(0);\n\n\t// Index of current visible left item\n\tconst [leftItemIndex, setLeftItemIndex] = React.useState(0);\n\t// Width of fake right (last) item to align the position of the left item\n\tconst [fakeItemWidth, setFakeItemWidth] = React.useState(0);\n\tconst containerRef = React.useRef<HTMLDivElement>(null);\n\n\t// An object with all of the measurements that we'll need to set chevron visibility.\n\t// If you don't understand client vs offset vs scrollWidth/Left,\n\t// go check out this image https://i.stack.imgur.com/Cl1IA.png\n\t// Here's an interactive version too: https://jsfiddle.net/y8Y32/25/\n\tconst containerMeasurements = containerRef.current\n\t\t? {\n\t\t\t\tclientLeft: containerRef.current.clientLeft,\n\t\t\t\tclientWidth: containerRef.current.clientWidth,\n\t\t\t\toffsetLeft: containerRef.current.offsetLeft,\n\t\t\t\toffsetWidth: containerRef.current.offsetWidth,\n\t\t\t\t// not using the actual container's scrollLeft because it may not have been set yet.\n\t\t\t\t// this uses the scrollLeft we have set in state.\n\t\t\t\tscrollLeft: containerScrollLeft,\n\t\t\t\tscrollWidth: containerRef.current.scrollWidth,\n\t\t }\n\t\t: DEFAULT_CONTAINER_MEASUREMENTS;\n\tconst chevronScrollDistance = props.chevronScrollDistance ?? DEFAULT_CHEVRON_SCROLL_DISTANCE;\n\t// Whether the elements inside of the DND container have overflowed the clientWidth.\n\tconst isOverflowPresent =\n\t\t// Explicitly made this !== 0 instead of just checking whether clientWidth was truthy\n\t\t// so it was clear why this check was here. If it's not clear,\n\t\t// if the clientWidth of the containerRef is 0, we should not have any chevrons. Ever.\n\t\t// A client width of 0 indicates that the Ref's children haven't fully rendered.\n\t\tcontainerMeasurements.clientWidth !== 0 &&\n\t\t// On a monitor that's scaled at 100%, when clientWidth and scrollWidth are the same\n\t\t// there is no overflow present. When monitors are NOT scaled at 100%,\n\t\t// there's a chance that these two numbers are off.\n\t\tMath.abs(containerMeasurements.clientWidth - containerMeasurements.scrollWidth) > 0;\n\n\tconst showChevrons = allowHorizontalScroll && isOverflowPresent;\n\n\t// TP - [15/12/2021] - We need to have a way to understand whether this context is wihtin the dashbar use or not.\n\t// Feels odd have specific references here but I can't see a way of doing this differently without\n\t// major refactoring, which is something I don't want to do on something called legacy* controls\n\tconst dashbar = props.metadata?.dashbar;\n\tconst widgetDividerWidth = dashbar?.widgetDividerWidth \|\| 0;\n\n\t// disabled === 'grayed out' and onClick won't fire. When you've scrolled all the way to the left,\n\t// the left chevron is disabled. If you've scrolled all the way to the right, the right chevron is disabled\n\tconst leftChevronDisabled = !!(showChevrons && containerScrollLeft === 0);\n\tconst rightChevronDisabled = !!(\n\t\tshowChevrons &&\n\t\t/*\n\t\t This is a calculation that figures out where the right edge of the current viewport is.\n\t\t * It's a little tricky to imagine. So look at this diagram.\n\t\t \t+-------------------------------------------scrollWidth-------------------------------------------+\n\t\t\t\t\t\t\t\t \|----------------------------------------------------\|\n\t\t\t\t\t\t\t\t \|\t\t\t\t\t\t\t\t\t\t\t\t\t \|\n\t\t\t+-------------------------------------------------------------------------------------------------+\n\t\t\t\|(0) \|(200) \|(200) \|(300)\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| (A) \|\n\t\t\t+-------------------------------------------------------------------------------------------------+\n\t\t\t\t\t\t\t\t \| \t\t\t\t\t\t\t\t\t\t\t\t\t \|\n\t\t\t\t\t\t\t\t +----------------------clientWidth-------------------+ \n\t\t\t\t\t\t\t\t ^ ^\n\t\t\t\t\t\t\t\t \| \|\n\t\t\t\t\t\t\t\t \| \|\n\t\t\t\t\t\t\t\t \| \|\n\t\t\t\t\t\t\t\t + +\n\t\t\t\t\t\t\t\t scrollLeft = 100 scrollRight = 200\n\n\t\t * The numbers in parens are the numbers for the 'scroll box'. We're trying to figure out where the point labeled (A) is located. \n\t\t * \n\t\t * Walking through the calculation, we take the scrollWidth and subtract the scrollLeft. This gives us the right edge of the scroll box.\n\t\t * offsetWidth is effectively the right edge of the element. If the right edge of the scroll box and the right edge of the element are the same number,\n\t\t * then we cannot scroll any further, and the chevron should be disabled.\n\t\t /\n\t\tcontainerMeasurements.scrollWidth - containerScrollLeft - containerMeasurements.offsetWidth === 0\n\t);\n\n\tconst scrollFunctionState = {\n\t\tcontainerScrollLeft,\n\t\tcontainerMeasurements,\n\t};\n\n\tconst scrollFunctionStateSetters = {\n\t\tsetScrollLeft: setContainerScrollLeft,\n\t};\n\n\t/\n\t Left Chevron's onClickHandler\n\t /\n\tconst scrollToLeft = () => {\n\t\tif (leftChevronDisabled) return;\n\t\tlet visibleLeftItem = containerRef.current?.childNodes[leftItemIndex - 1] as HTMLDivElement;\n\t\tif (visibleLeftItem) {\n\t\t\tlet calculatedFakeItemWidth = scrollHorizontally(\n\t\t\t\tvisibleLeftItem?.clientWidth - widgetDividerWidth ?? chevronScrollDistance,\n\t\t\t\tscrollFunctionState,\n\t\t\t\tscrollFunctionStateSetters,\n\t\t\t\t1\n\t\t\t);\n\t\t\tsetFakeItemWidth(calculatedFakeItemWidth as number);\n\t\t\tsetLeftItemIndex(leftItemIndex - 1);\n\t\t}\n\t};\n\n\t/\n\t Right Chevron's onClickHandler\n\t /\n\tconst scrollToRight = () => {\n\t\tif (rightChevronDisabled) return;\n\t\tlet visibleLeftItem = containerRef.current?.childNodes[leftItemIndex] as HTMLDivElement;\n\t\tif (visibleLeftItem) {\n\t\t\tlet calculatedFakeItemWidth = scrollHorizontally(\n\t\t\t\tvisibleLeftItem?.clientWidth - widgetDividerWidth ?? chevronScrollDistance,\n\t\t\t\tscrollFunctionState,\n\t\t\t\tscrollFunctionStateSetters,\n\t\t\t\t-1\n\t\t\t);\n\t\t\tsetFakeItemWidth(calculatedFakeItemWidth as number);\n\t\t\tsetLeftItemIndex(leftItemIndex + 1);\n\t\t}\n\t};\n\n\t/\n\t \"wheel\" handler. scrolls forward or backwards\n\t * @param event\n\t /\n\tconst scrollme = (event: React.WheelEvent<HTMLDivElement>) => {\n\t\tif (!event.nativeEvent.deltaY) return;\n\t\tevent.nativeEvent.deltaY < 0 ? scrollToLeft() : scrollToRight();\n\t};\n\n\tconst doDOMManipulation = () => {\n\t\tif (props.allowHorizontalScroll && containerRef.current) containerRef.current.scrollLeft = containerScrollLeft;\n\t};\n\n\t// This function increments `forceUpdate`, which is a piece of state that's irrelevant to the\n\t// rendering of this component. After a resize, we need to re-measure the DOM so we can figure out if\n\t// the chevrons are necessary. Because no state changes on a resize. the component doesn't rerender.\n\t// This function will change state, which will cause a re-rendering, and the component will be re-measured.\n\tconst doForceUpdate = () => {\n\t\tsetForceUpdate((currentValueOfForceUpdate) => currentValueOfForceUpdate + 1);\n\t};\n\n\t// This function is needed for correct positioning after resizing the window.\n\tconst scrollToInitialState = () => {\n\t\tconst calculatedFakeItemWidth = scrollHorizontally(\n\t\t\tcontainerScrollLeft,\n\t\t\tscrollFunctionState,\n\t\t\tscrollFunctionStateSetters,\n\t\t\t1\n\t\t);\n\t\tsetFakeItemWidth(calculatedFakeItemWidth as number);\n\t\tsetLeftItemIndex(0);\n\t\tsetContainerScrollLeft(0);\n\t};\n\n\t// After every render, set the actual DOM element's scrollLeft to be whatever we calculated during the previous render.\n\tReact.useLayoutEffect(doDOMManipulation);\n\t// after the children change, we need to force an update so that we can re-measure the DOM after the render happens\n\t// without this, adding and removing elements from the DNDContext won't recalculate whether the chevrons should render\n\tReact.useEffect(doForceUpdate, [props.children]);\n\t// Whenever the window resizes, force an update so that the DOM is re-measured.\n\tReact.useEffect(addResizeHandler(doForceUpdate), []);\n\t// Whenever the window resizes, scroll widgets to the left.\n\tReact.useEffect(addResizeHandler(scrollToInitialState), []);\n\n\t/\n\t Actual container that provides drag and drop functionality\n\t /\n\tconst SortContainer = SortableContainer((sortableContainerProps: any) => (\n\t\t<div onWheel={scrollme} ref={containerRef} className={props.className}>\n\t\t\t{sortableContainerProps.children}\n\t\t\t{/ fake element for scrolling */}\n\t\t\t<div style={{ width: `${fakeItemWidth}px`, flexShrink: 0 }} />\n\t\t</div>\n\t));\n\n\t// After every render, call onLayoutUpdate function\n\tReact.useLayoutEffect(() => {\n\t\tonLayoutUpdate();\n\t}, [SortContainer]);\n\n\treturn (\n\t\t<div id={props.id}>\n\t\t\t{showChevrons && (\n\t\t\t\t<ScrollingChevron\n\t\t\t\t\tisDisabled={leftChevronDisabled}\n\t\t\t\t\tchevronDirection={ChevronDirection.left}\n\t\t\t\t\tshowToolTip={props.showScrollButtonsTooltip}\n\t\t\t\t\ttitle={props.leftButtonTooltip}\n\t\t\t\t\tscrollFunction={scrollToLeft}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<SortContainer\n\t\t\t\tonSortEnd={onDragEnd}\n\t\t\t\tonSortStart={onDragBegin}\n\t\t\t\tonSortMove={onDragMove}\n\t\t\t\tonSortOver={onDragOver}\n\t\t\t\tdistance={distance}\n\t\t\t\taxis={props.axis ?? AllowableDnDAxis.y}\n\t\t\t\tlockAxis={props.lockAxis}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</SortContainer>\n\t\t\t{showChevrons && (\n\t\t\t\t<ScrollingChevron\n\t\t\t\t\tisDisabled={rightChevronDisabled}\n\t\t\t\t\tchevronDirection={ChevronDirection.right}\n\t\t\t\t\tshowToolTip={props.showScrollButtonsTooltip}\n\t\t\t\t\ttitle={props.rightButtonTooltip}\n\t\t\t\t\tscrollFunction={scrollToRight}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"]}
1	+ {"version":3,"file":"FinsembleDnDContext.js","sourceRoot":"","sources":["../../../src/components/legacyControls/FinsembleDnDContext.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { SortableContainer } from \"react-sortable-hoc\";\n\ntype ScrollFunctionState = {\n\tcontainerScrollLeft: number;\n\tcontainerMeasurements: ContainerMeasurements;\n};\n\ntype ScrollFunctionStateSetters = {\n\tsetScrollLeft: React.Dispatch<React.SetStateAction<number>>;\n};\n\nenum ChevronDirection {\n\tleft = \"left\",\n\tright = \"right\",\n}\n\nexport enum AllowableDnDAxis {\n\tx = \"x\",\n\ty = \"y\",\n}\n\ntype ScrollingChevronProps = {\n\tchevronDirection: ChevronDirection;\n\tisDisabled: boolean;\n\tshowToolTip?: boolean;\n\ttitle?: string;\n\tscrollFunction: React.MouseEventHandler;\n};\n\nconst SORT_CONTAINER_DRAG_DISTANCE = 10;\n\nconst defaultOnDragEnd = () => {\n\tconsole.warn(\"No onDragEnd passed to FinsembleDnDContext\");\n};\n\nconst defaultOnDragBegin = Function.prototype;\nconst defaultOnDrag = Function.prototype;\nconst defaultOnDragOver = Function.prototype;\nconst defaultOnLayoutUpdate = Function.prototype;\n\ntype ContainerMeasurements = {\n\tclientLeft: number;\n\tclientWidth: number;\n\tscrollLeft: number;\n\tscrollWidth: number;\n\toffsetLeft: number;\n\toffsetWidth: number;\n};\n\nconst DEFAULT_CONTAINER_MEASUREMENTS: ContainerMeasurements = {\n\tclientLeft: 0,\n\tclientWidth: 0,\n\tscrollLeft: 0,\n\tscrollWidth: 0,\n\toffsetLeft: 0,\n\toffsetWidth: 0,\n};\n\nconst DEFAULT_CHEVRON_SCROLL_DISTANCE = 60;\n/*\n Listens for resize events on the DOM and changes whether we should render the scrolling chevrons.\n * @param overflowStateSetter\n /\nconst addResizeHandler = (overflowStateSetter: () => void) => () => {\n\twindow.addEventListener(\"resize\", overflowStateSetter);\n\treturn () => {\n\t\twindow.removeEventListener(\"resize\", overflowStateSetter);\n\t};\n};\n\n/\n Scrolls forward or back\n * @param containerRef\n * @param distance How far to move\n * @param state Current scroll state\n * @param stateSetters Scroll state setters\n * @param scrollDir Whether we're scrolling forward or backwards\n * @param deltaY The scroll amount that came from the `wheel` event.\n /\nconst scrollHorizontally = (\n\tdistance: number,\n\tstate: ScrollFunctionState,\n\tstateSetters: ScrollFunctionStateSetters,\n\tscrollDir?: number,\n\tdeltaY?: number\n) => {\n\tconst { setScrollLeft } = stateSetters;\n\tconst { containerScrollLeft, containerMeasurements } = state;\n\n\tif (containerMeasurements.scrollWidth === 0) return;\n\tlet scrollAmount = 0;\n\n\tlet delta = 0;\n\tif (deltaY) {\n\t\tdelta = Math.max(-1, Math.min(1, -deltaY));\n\t} else if (scrollDir) {\n\t\tdelta = Math.max(-1, Math.min(1, scrollDir));\n\t}\n\n\tlet fakeItemWidth = 0;\n\n\t// advance the scroll position 40 px forward or back, depending on the mouse wheel direction.\n\t// eslint-disable-next-line no-mixed-operators\n\tlet newScrollLeft = containerScrollLeft - delta distance;\n\n\tif (scrollAmount >= distance) {\n\t\treturn fakeItemWidth;\n\t}\n\n\t// See the links inside of the main body of FinsembleDnDContext if offsetLeft/Width are unfamiliar to you\n\tconst rightEdgeOfScrollingViewport =\n\t\tcontainerMeasurements.offsetLeft + containerMeasurements.offsetWidth + newScrollLeft;\n\n\tconst rightMostEdgeOfScrollingArea = containerMeasurements.offsetLeft + containerMeasurements.scrollWidth;\n\n\t// if we've scrolled beyond the right-most edge of the area, calculate the fake item width\n\tif (rightEdgeOfScrollingViewport > rightMostEdgeOfScrollingArea) {\n\t\tfakeItemWidth = newScrollLeft - (containerMeasurements.scrollWidth - containerMeasurements.clientWidth);\n\t}\n\n\t// if we've scrolled past the left-most area, set the scrollLeft to the leftMost edge of the region.\n\tif (newScrollLeft < 0) newScrollLeft = 0;\n\n\tif (newScrollLeft !== containerScrollLeft) {\n\t\tsetScrollLeft(newScrollLeft);\n\t}\n\n\treturn fakeItemWidth;\n};\n\n/*\n Simple component that renders the left and right chevrons.\n * @param props\n /\nconst ScrollingChevron = (props: ScrollingChevronProps) => {\n\tconst { isDisabled, chevronDirection, showToolTip, title, scrollFunction } = props;\n\n\tconst classNames = `scroll-button ff-chevron-${chevronDirection} ${isDisabled ? \"greyedOut\" : null}`;\n\tconst toolTip = showToolTip ? title : \"\";\n\treturn (\n\t\t<div className=\"chevron-container\" title={toolTip}>\n\t\t\t<i className={classNames} onClick={scrollFunction}></i>\n\t\t</div>\n\t);\n};\n\ntype FinsembleDnDContextProps = {\n\tid?: string;\n\tleftButtonTooltip?: string;\n\trightButtonTooltip?: string;\n\tallowHorizontalScroll?: boolean;\n\tshowScrollButtonsTooltip?: boolean;\n\tchevronScrollDistance?: number;\n\tonDragEnd?: Function;\n\tonDragStart?: Function;\n\tonDragMove?: Function;\n\tonDragOver?: Function;\n\tonLayoutUpdate?: Function;\n\ttransitionDuration?: number;\n\tdistance?: number;\n\taxis?: AllowableDnDAxis;\n\tlockAxis?: AllowableDnDAxis;\n\tclassName?: string;\n\tmetadata?: Record<string, any> \| undefined;\n};\n\n/\n The FinsembleDnDContext allows for all of the Draggable and Droppable components to work.\n * It wraps its children and allows them to do draggy and droppy things.\n * It also allows for horizontal containers to provide scrolling functionality.\n * @param props\n * @param props.id ID for the container that wraps the sortable container\n * @param props.allowHorizontalScroll whether the DND context should allow for horizontal scrolling\n * @param props.showScrollButtonsTooltip\n * @param props.leftButtonTooltip Tooltip for left scroll button\n * @param props.rightButtonTooltip Tooltip for right scroll button\n * @param props.chevronScrollDistance how far clicking the chevrons should push the content forward or backwards\n * @param props.onDragEnd handler for sorting\n * @param props.onDragBegin handler for sorting\n * @param props.onDragOver\n * @param props.onLayoutUpdate handler for rendering. Invokes on useLayoutEffect\n * @param props.distance how far the user has to drag an element to trigger sorting behavior\n * @param props.axis whether to sort vertically or horizontally.\n * @param props.className optional styles to pass the the sortable container\n /\nexport const FinsembleDnDContext: React.FunctionComponent<FinsembleDnDContextProps> = (props) => {\n\tconst { allowHorizontalScroll } = props;\n\tconst onDragEnd = props.onDragEnd ?? defaultOnDragEnd;\n\tconst onDragBegin = props.onDragStart ?? defaultOnDragBegin;\n\tconst onDragMove = props.onDragMove ?? defaultOnDrag;\n\tconst onDragOver = props.onDragOver ?? defaultOnDragOver;\n\t// This is the numberr of pixels that a draggable element has to be dragged before the sorting kicks in.\n\tconst distance = props.distance ?? SORT_CONTAINER_DRAG_DISTANCE;\n\tconst onLayoutUpdate = props.onLayoutUpdate ?? defaultOnLayoutUpdate;\n\n\t// This is the stateful variable that holds the active 'scrollLeft' property for the DOM node\n\t// that's rendered inside of the sort container.\n\tconst [containerScrollLeft, setContainerScrollLeft] = React.useState(0);\n\t// read the comment in doForceUpdate to understand this.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tconst [forceUpdate, setForceUpdate] = React.useState(0);\n\n\t// Index of current visible left item\n\tconst [leftItemIndex, setLeftItemIndex] = React.useState(0);\n\t// Width of fake right (last) item to align the position of the left item\n\tconst [fakeItemWidth, setFakeItemWidth] = React.useState(0);\n\tconst containerRef = React.useRef<HTMLDivElement>(null);\n\n\t// An object with all of the measurements that we'll need to set chevron visibility.\n\t// If you don't understand client vs offset vs scrollWidth/Left,\n\t// go check out this image https://i.stack.imgur.com/Cl1IA.png\n\t// Here's an interactive version too: https://jsfiddle.net/y8Y32/25/\n\tconst containerMeasurements = containerRef.current\n\t\t? {\n\t\t\t\tclientLeft: containerRef.current.clientLeft,\n\t\t\t\tclientWidth: containerRef.current.clientWidth,\n\t\t\t\toffsetLeft: containerRef.current.offsetLeft,\n\t\t\t\toffsetWidth: containerRef.current.offsetWidth,\n\t\t\t\t// not using the actual container's scrollLeft because it may not have been set yet.\n\t\t\t\t// this uses the scrollLeft we have set in state.\n\t\t\t\tscrollLeft: containerScrollLeft,\n\t\t\t\tscrollWidth: containerRef.current.scrollWidth,\n\t\t }\n\t\t: DEFAULT_CONTAINER_MEASUREMENTS;\n\tconst chevronScrollDistance = props.chevronScrollDistance ?? DEFAULT_CHEVRON_SCROLL_DISTANCE;\n\t// Whether the elements inside of the DND container have overflowed the clientWidth.\n\tconst isOverflowPresent =\n\t\t// Explicitly made this !== 0 instead of just checking whether clientWidth was truthy\n\t\t// so it was clear why this check was here. If it's not clear,\n\t\t// if the clientWidth of the containerRef is 0, we should not have any chevrons. Ever.\n\t\t// A client width of 0 indicates that the Ref's children haven't fully rendered.\n\t\tcontainerMeasurements.clientWidth !== 0 &&\n\t\t// On a monitor that's scaled at 100%, when clientWidth and scrollWidth are the same\n\t\t// there is no overflow present. When monitors are NOT scaled at 100%,\n\t\t// there's a chance that these two numbers are off.\n\t\tMath.abs(containerMeasurements.clientWidth - containerMeasurements.scrollWidth) > 0;\n\n\tconst showChevrons = allowHorizontalScroll && isOverflowPresent;\n\n\t// disabled === 'grayed out' and onClick won't fire. When you've scrolled all the way to the left,\n\t// the left chevron is disabled. If you've scrolled all the way to the right, the right chevron is disabled\n\tconst leftChevronDisabled = !!(showChevrons && containerScrollLeft === 0);\n\tconst rightChevronDisabled = !!(\n\t\tshowChevrons &&\n\t\t/\n\t\t This is a calculation that figures out where the right edge of the current viewport is.\n\t\t * It's a little tricky to imagine. So look at this diagram.\n\t\t \t+-------------------------------------------scrollWidth-------------------------------------------+\n\t\t\t\t\t\t\t\t \|----------------------------------------------------\|\n\t\t\t\t\t\t\t\t \|\t\t\t\t\t\t\t\t\t\t\t\t\t \|\n\t\t\t+-------------------------------------------------------------------------------------------------+\n\t\t\t\|(0) \|(200) \|(200) \|(300)\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| \|\n\t\t\t\| \| \| (A) \|\n\t\t\t+-------------------------------------------------------------------------------------------------+\n\t\t\t\t\t\t\t\t \| \t\t\t\t\t\t\t\t\t\t\t\t\t \|\n\t\t\t\t\t\t\t\t +----------------------clientWidth-------------------+ \n\t\t\t\t\t\t\t\t ^ ^\n\t\t\t\t\t\t\t\t \| \|\n\t\t\t\t\t\t\t\t \| \|\n\t\t\t\t\t\t\t\t \| \|\n\t\t\t\t\t\t\t\t + +\n\t\t\t\t\t\t\t\t scrollLeft = 100 scrollRight = 200\n\n\t\t * The numbers in parens are the numbers for the 'scroll box'. We're trying to figure out where the point labeled (A) is located. \n\t\t * \n\t\t * Walking through the calculation, we take the scrollWidth and subtract the scrollLeft. This gives us the right edge of the scroll box.\n\t\t * offsetWidth is effectively the right edge of the element. If the right edge of the scroll box and the right edge of the element are the same number,\n\t\t * then we cannot scroll any further, and the chevron should be disabled.\n\t\t /\n\t\tcontainerMeasurements.scrollWidth - containerScrollLeft - containerMeasurements.offsetWidth === 0\n\t);\n\n\tconst scrollFunctionState = {\n\t\tcontainerScrollLeft,\n\t\tcontainerMeasurements,\n\t};\n\n\tconst scrollFunctionStateSetters = {\n\t\tsetScrollLeft: setContainerScrollLeft,\n\t};\n\n\t/\n\t Left Chevron's onClickHandler\n\t /\n\tconst scrollToLeft = () => {\n\t\tif (leftChevronDisabled) return;\n\t\tlet visibleLeftItem = containerRef.current?.childNodes[leftItemIndex - 1] as HTMLDivElement;\n\t\tif (visibleLeftItem) {\n\t\t\tlet calculatedFakeItemWidth = scrollHorizontally(\n\t\t\t\tvisibleLeftItem?.clientWidth ?? chevronScrollDistance,\n\t\t\t\tscrollFunctionState,\n\t\t\t\tscrollFunctionStateSetters,\n\t\t\t\t1\n\t\t\t);\n\t\t\tsetFakeItemWidth(calculatedFakeItemWidth as number);\n\t\t\tsetLeftItemIndex(leftItemIndex - 1);\n\t\t}\n\t};\n\n\t/\n\t Right Chevron's onClickHandler\n\t /\n\tconst scrollToRight = () => {\n\t\tif (rightChevronDisabled) return;\n\t\tlet visibleLeftItem = containerRef.current?.childNodes[leftItemIndex] as HTMLDivElement;\n\t\tif (visibleLeftItem) {\n\t\t\tlet calculatedFakeItemWidth = scrollHorizontally(\n\t\t\t\tvisibleLeftItem?.clientWidth ?? chevronScrollDistance,\n\t\t\t\tscrollFunctionState,\n\t\t\t\tscrollFunctionStateSetters,\n\t\t\t\t-1\n\t\t\t);\n\t\t\tsetFakeItemWidth(calculatedFakeItemWidth as number);\n\t\t\tsetLeftItemIndex(leftItemIndex + 1);\n\t\t}\n\t};\n\n\t/\n\t \"wheel\" handler. scrolls forward or backwards\n\t * @param event\n\t /\n\tconst scrollme = (event: React.WheelEvent<HTMLDivElement>) => {\n\t\tif (!event.nativeEvent.deltaY) return;\n\t\t// do scroll only if the container is overflowed\n\t\tif (isOverflowPresent) {\n\t\t\tevent.nativeEvent.deltaY < 0 ? scrollToLeft() : scrollToRight();\n\t\t}\n\t};\n\n\tconst doDOMManipulation = () => {\n\t\tif (props.allowHorizontalScroll && containerRef.current) containerRef.current.scrollLeft = containerScrollLeft;\n\t};\n\n\t// This function increments `forceUpdate`, which is a piece of state that's irrelevant to the\n\t// rendering of this component. After a resize, we need to re-measure the DOM so we can figure out if\n\t// the chevrons are necessary. Because no state changes on a resize. the component doesn't rerender.\n\t// This function will change state, which will cause a re-rendering, and the component will be re-measured.\n\tconst doForceUpdate = () => {\n\t\tsetForceUpdate((currentValueOfForceUpdate) => currentValueOfForceUpdate + 1);\n\t};\n\n\t// This function is needed for correct positioning after resizing the window.\n\tconst scrollToInitialState = () => {\n\t\tconst calculatedFakeItemWidth = scrollHorizontally(\n\t\t\tcontainerScrollLeft,\n\t\t\tscrollFunctionState,\n\t\t\tscrollFunctionStateSetters,\n\t\t\t1\n\t\t);\n\t\tsetFakeItemWidth(calculatedFakeItemWidth as number);\n\t\tsetLeftItemIndex(0);\n\t\tsetContainerScrollLeft(0);\n\t};\n\n\t// After every render, set the actual DOM element's scrollLeft to be whatever we calculated during the previous render.\n\tReact.useLayoutEffect(doDOMManipulation);\n\t// after the children change, we need to force an update so that we can re-measure the DOM after the render happens\n\t// without this, adding and removing elements from the DNDContext won't recalculate whether the chevrons should render\n\tReact.useEffect(doForceUpdate, [props.children]);\n\t// Whenever the window resizes, force an update so that the DOM is re-measured.\n\tReact.useEffect(addResizeHandler(doForceUpdate), []);\n\t// Whenever the window resizes, scroll widgets to the left.\n\tReact.useEffect(addResizeHandler(scrollToInitialState), []);\n\n\t/\n\t Actual container that provides drag and drop functionality\n\t /\n\tconst SortContainer = SortableContainer((sortableContainerProps: any) => (\n\t\t<div onWheel={scrollme} ref={containerRef} className={props.className}>\n\t\t\t{sortableContainerProps.children}\n\t\t\t{/ fake element for scrolling */}\n\t\t\t<div style={{ width: `${fakeItemWidth}px`, flexShrink: 0 }} />\n\t\t</div>\n\t));\n\n\t// After every render, call onLayoutUpdate function\n\tReact.useLayoutEffect(() => {\n\t\tonLayoutUpdate();\n\t}, [SortContainer]);\n\n\treturn (\n\t\t<div id={props.id}>\n\t\t\t{showChevrons && (\n\t\t\t\t<ScrollingChevron\n\t\t\t\t\tisDisabled={leftChevronDisabled}\n\t\t\t\t\tchevronDirection={ChevronDirection.left}\n\t\t\t\t\tshowToolTip={props.showScrollButtonsTooltip}\n\t\t\t\t\ttitle={props.leftButtonTooltip}\n\t\t\t\t\tscrollFunction={scrollToLeft}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<SortContainer\n\t\t\t\tonSortEnd={onDragEnd}\n\t\t\t\tonSortStart={onDragBegin}\n\t\t\t\tonSortMove={onDragMove}\n\t\t\t\tonSortOver={onDragOver}\n\t\t\t\tdistance={distance}\n\t\t\t\taxis={props.axis ?? AllowableDnDAxis.y}\n\t\t\t\tlockAxis={props.lockAxis}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</SortContainer>\n\t\t\t{showChevrons && (\n\t\t\t\t<ScrollingChevron\n\t\t\t\t\tisDisabled={rightChevronDisabled}\n\t\t\t\t\tchevronDirection={ChevronDirection.right}\n\t\t\t\t\tshowToolTip={props.showScrollButtonsTooltip}\n\t\t\t\t\ttitle={props.rightButtonTooltip}\n\t\t\t\t\tscrollFunction={scrollToRight}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/linker/remoteRedux.js CHANGED Viewed

@@ -4,6 +4,7 @@ const dummyReducer = (state) => state;
 const emptyStore = {
     clients: {},
     allChannels: [],
+    connectIdToJoinedChannel: {},
 };
 export const store = configureStore({
     preloadedState: emptyStore,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"remoteRedux.js","sourceRoot":"","sources":["../../../src/components/linker/remoteRedux.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAiB,MAAM,kBAAkB,CAAC;AAQ/E,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;AAE7B,MAAM,YAAY,GAAG,CAAC,KAAU,EAAE,EAAE,CAAC,KAAK,CAAC;AAE3C,MAAM,UAAU,GAAgB;IAC/B,OAAO,EAAE,EAAE;IACX,WAAW,EAAE,EAAE;~~CACf~~,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAyC,cAAc,CAAC;IACzE,cAAc,EAAE,UAAU;IAC1B,OAAO,EAAE,YAAY;IACrB,SAAS,EAAE;QACV,WAAW,CAAC,yBAAyB,CAAC,EAAE,MAAM,EAAE,sCAAsC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;KAC1G;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG;IACtB,eAAe,EAAE,YAAY,CAA+B,wBAAwB,CAAC;IACrF,YAAY,EAAE,YAAY,CAAsB,qBAAqB,CAAC;IACtE,cAAc,EAAE,YAAY,CAAwB,uBAAuB,CAAC;CAC5E,CAAC","sourcesContent":["import { configureStore, createAction, EnhancedStore } from \"@reduxjs/toolkit\";\nimport { services } from \"@finsemble/finsemble-api\";\n\nexport type LinkerStore = services.Interop.types.LinkerStore;\nexport type InteropLinkChannels = services.Interop.modules.linker.InteropLinkChannels;\nexport type InteropUnlinkChannels = services.Interop.modules.linker.InteropUnlinkChannels;\nexport type InteropLinkerSetActiveWindow = services.Interop.modules.linker.InteropLinkerSetActiveWindow;\n\nconst { remoteRedux } = FSBL;\n\nconst dummyReducer = (state: any) => state;\n\nconst emptyStore: LinkerStore = {\n\tclients: {},\n\tallChannels: [],\n};\n\nexport const store: EnhancedStore<LinkerStore, any, any> = configureStore({\n\tpreloadedState: emptyStore,\n\treducer: dummyReducer,\n\tenhancers: [\n\t\tremoteRedux.remoteReduxClientEnhancer({ server: \"@@finsemble/remoteRedux/InteropStore\", slice: \"linker\" }),\n\t],\n});\n\nexport const actions = {\n\tsetActiveWindow: createAction<InteropLinkerSetActiveWindow>(\"linker/setActiveWindow\"),\n\tlinkChannels: createAction<InteropLinkChannels>(\"linker/linkChannels\"),\n\tunlinkChannels: createAction<InteropUnlinkChannels>(\"linker/unlinkChannels\"),\n};\n"]}
1	+ {"version":3,"file":"remoteRedux.js","sourceRoot":"","sources":["../../../src/components/linker/remoteRedux.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAiB,MAAM,kBAAkB,CAAC;AAQ/E,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;AAE7B,MAAM,YAAY,GAAG,CAAC,KAAU,EAAE,EAAE,CAAC,KAAK,CAAC;AAE3C,MAAM,UAAU,GAAgB;IAC/B,OAAO,EAAE,EAAE;IACX,WAAW,EAAE,EAAE;IACf,wBAAwB,EAAE,EAAE;CAC5B,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAyC,cAAc,CAAC;IACzE,cAAc,EAAE,UAAU;IAC1B,OAAO,EAAE,YAAY;IACrB,SAAS,EAAE;QACV,WAAW,CAAC,yBAAyB,CAAC,EAAE,MAAM,EAAE,sCAAsC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;KAC1G;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG;IACtB,eAAe,EAAE,YAAY,CAA+B,wBAAwB,CAAC;IACrF,YAAY,EAAE,YAAY,CAAsB,qBAAqB,CAAC;IACtE,cAAc,EAAE,YAAY,CAAwB,uBAAuB,CAAC;CAC5E,CAAC","sourcesContent":["import { configureStore, createAction, EnhancedStore } from \"@reduxjs/toolkit\";\nimport { services } from \"@finsemble/finsemble-api\";\n\nexport type LinkerStore = services.Interop.types.LinkerStore;\nexport type InteropLinkChannels = services.Interop.modules.linker.InteropLinkChannels;\nexport type InteropUnlinkChannels = services.Interop.modules.linker.InteropUnlinkChannels;\nexport type InteropLinkerSetActiveWindow = services.Interop.modules.linker.InteropLinkerSetActiveWindow;\n\nconst { remoteRedux } = FSBL;\n\nconst dummyReducer = (state: any) => state;\n\nconst emptyStore: LinkerStore = {\n\tclients: {},\n\tallChannels: [],\n\tconnectIdToJoinedChannel: {},\n};\n\nexport const store: EnhancedStore<LinkerStore, any, any> = configureStore({\n\tpreloadedState: emptyStore,\n\treducer: dummyReducer,\n\tenhancers: [\n\t\tremoteRedux.remoteReduxClientEnhancer({ server: \"@@finsemble/remoteRedux/InteropStore\", slice: \"linker\" }),\n\t],\n});\n\nexport const actions = {\n\tsetActiveWindow: createAction<InteropLinkerSetActiveWindow>(\"linker/setActiveWindow\"),\n\tlinkChannels: createAction<InteropLinkChannels>(\"linker/linkChannels\"),\n\tunlinkChannels: createAction<InteropUnlinkChannels>(\"linker/unlinkChannels\"),\n};\n"]}

package/react/components/menu/MenuItem.js CHANGED Viewed

@@ -6,6 +6,6 @@ export const MenuItem = ({ children, onClick, style, noClose, className = "menu-
         onClick && onClick();
         !noClose && closeMenu();
     };
-    return (React.createElement("div", { 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 }, children));
 };
 //# sourceMappingURL=MenuItem.js.map

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

	@@ -1 +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,~~6BAAK~~,~~SAAS~~,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,~~EAAE~~,KAAK,EAAE,KAAK,~~EAAE~~,SAAS,EAAE,SAAS,~~IACrF~~,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 ~~className~~={className} ~~onClick~~={combinedOnClick} ~~style~~={style} ~~onKeyDown~~={onKeyDown}>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"]}
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"]}

package/react/components/menu/MenuPortal.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import * as ReactDOM from "react-dom";
 import { MenuContext } from "./menuContext";
 import { calculateDimensions, injectCSS } from "./menuHelpers";
-import { KeyboardNavigation } from "./keyboardNavigation";
+import { applyMenuKeyboardNavigation } from "./keyboardNavigation";
 import { MenuAutoResizer } from "./MenuAutoResizer";
-import { useState, useEffect, useContext, useMemo } from "react";
+import { useState, useEffect, useContext } from "react";
 import { useMenu } from "../../hooks/useMenu";
 const setupEventForwarding = (newWindow) => {
     ["mouseDown", "click", "mouseUp"].forEach((eventName) => {
@@ -35,7 +35,7 @@ const insertWindowContent = ({ newWindow, isAutoResizable, className, setElement
     injectCSS(newWindow);
     newWindow.portalHeight = menuHeight;
 };
-const useCreateDropdown = ({ keyboardNavigation, setElement, childWindow, setChildWindow, }) => {
+const useCreateDropdown = ({ setElement, childWindow, setChildWindow, }) => {
     const { thisMenuId, menuWidth, menuHeight, className, maxHeight, minHeight } = useContext(MenuContext);
     const { blurMenu } = useMenu();
     const isAutoResizable = !menuHeight;
@@ -49,6 +49,12 @@ const useCreateDropdown = ({ keyboardNavigation, setElement, childWindow, setChi
                 insertWindowContent({ newWindow, isAutoResizable, className, setElement, menuHeight });
                 setupEventForwarding(newWindow);
                 newWindow.addEventListener("blur", blurMenu);
+                newWindow.addEventListener("keydown", (e) => {
+                    if (e.key === "Escape") {
+                        blurMenu();
+                    }
+                });
+                applyMenuKeyboardNavigation(newWindow);
                 if (isAutoResizable)
                     menuAutoResizer = new MenuAutoResizer(newWindow, thisMenuId, menuWidth, maxHeight, minHeight);
             };
@@ -58,17 +64,14 @@ const useCreateDropdown = ({ keyboardNavigation, setElement, childWindow, setChi
             FSBL.Clients.Logger.system.error(`MenuPortal error: window.open returned null for "./menu.html#${thisMenuId}"`);
         }
         return () => {
-            var _a;
             const win = childWindow || (menuAutoResizer === null || menuAutoResizer === void 0 ? void 0 : menuAutoResizer.childWindow);
-            const keyboardNav = keyboardNavigation || ((_a = win) === null || _a === void 0 ? void 0 : _a.keyboardNavigation);
-            keyboardNav === null || keyboardNav === void 0 ? void 0 : keyboardNav.detach();
             menuAutoResizer === null || menuAutoResizer === void 0 ? void 0 : menuAutoResizer.disconnect();
             win === null || win === void 0 ? void 0 : win.close();
             setChildWindow(null);
         };
     }, [blurMenu, className, menuWidth, menuHeight, maxHeight, thisMenuId]);
 };
-const showHideResizeWindow = async ({ childWindow, keyboardNavigation, show, thisMenuId, menuHeight, maxHeight, minHeight, }) => {
+const showHideResizeWindow = async ({ childWindow, show, thisMenuId, menuHeight, maxHeight, minHeight, }) => {
     const finWindow = childWindow.fin.desktop.Window.getCurrent();
     if (show) {
         const { left, top, height } = await calculateDimensions(childWindow, thisMenuId, menuHeight, maxHeight, minHeight);
@@ -85,10 +88,6 @@ const showHideResizeWindow = async ({ childWindow, keyboardNavigation, show, thi
         FSBL.FinsembleWindow.getInstance({ name: name }, (e, fsblWindow) => {
             fsblWindow.setAlwaysOnTop({ alwaysOnTop: true });
         });
-        if (keyboardNavigation) {
-            childWindow.keyboardNavigation = keyboardNavigation;
-            keyboardNavigation.attach();
-        }
     }
     else {
         const { name } = childWindow;
@@ -96,8 +95,6 @@ const showHideResizeWindow = async ({ childWindow, keyboardNavigation, show, thi
             fsblWindow.setAlwaysOnTop({ alwaysOnTop: false });
         });
         finWindow.hide();
-        if (keyboardNavigation)
-            keyboardNavigation.detach();
     }
 };
 const closePortal = (element) => {
@@ -120,19 +117,13 @@ export const MenuPortal = ({ show, children }) => {
     const { thisMenuId, menuHeight, maxHeight, minHeight } = useContext(MenuContext);
     const [element, setElement] = useState();
     const [childWindow, setChildWindow] = useState(null);
-    const keyboardNavigation = useMemo(() => {
-        if (childWindow)
-            return new KeyboardNavigation(childWindow, ".menu-item");
-        else
-            return null;
-    }, [childWindow]);
     useEffect(() => {
         if (!childWindow)
             return;
-        showHideResizeWindow({ childWindow, keyboardNavigation, show, thisMenuId, menuHeight, maxHeight, minHeight });
+        showHideResizeWindow({ childWindow, show, thisMenuId, menuHeight, maxHeight, minHeight });
         return () => { };
     }, [show]);
-    useCreateDropdown({ keyboardNavigation, childWindow, setElement, setChildWindow });
+    useCreateDropdown({ childWindow, setElement, setChildWindow });
     const toolbar = document.getElementById("Toolbar-tsx");
     if (toolbar)
         closePortal(toolbar);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuPortal.js","sourceRoot":"","sources":["../../../src/components/menu/MenuPortal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { MenuContext } from \"./menuContext\";\nimport { calculateDimensions, injectCSS } from \"./menuHelpers\";\nimport { KeyboardNavigation } from \"./keyboardNavigation\";\nimport { MenuAutoResizer } from \"./MenuAutoResizer\";\nimport { useState, useEffect, useContext, useMemo } from \"react\";\nimport { useMenu } from \"../../hooks/useMenu\";\nimport { services, FEA } from \"@finsemble/finsemble-api\";\n\ntype SpawnParams = services.window.types.SpawnParams;\n\n/*\n Proxy/fake events are needed because when `document.addEventListener` is used inside a component\n * that is rendered inside react portal, `document` will refer to the toolbar's document instead\n * of the childWindow's document. Clicking inside a portal will not therefore capture those events.\n \n This code intercepts these events inside the portal and then forwards them to the parent (toolbar).\n /\nconst setupEventForwarding = (newWindow: Window) => {\n\t[\"mouseDown\", \"click\", \"mouseUp\"].forEach((eventName) => {\n\t\tnewWindow.document.addEventListener(eventName, (event) => {\n\t\t\tdocument.dispatchEvent(\n\t\t\t\tnew CustomEvent(`portal:${eventName}`, {\n\t\t\t\t\tdetail: {\n\t\t\t\t\t\t// Devs may need access to the x and y of the cursor\n\t\t\t\t\t\tmouseEvent: new MouseEvent(eventName, event),\n\t\t\t\t\t\t// And possibly the target element\n\t\t\t\t\t\ttarget: event.target,\n\t\t\t\t\t},\n\t\t\t\t})\n\t\t\t);\n\t\t});\n\t});\n\n\t/\n\t Proxies keyboard events from the portal up into the parent window.\n\t * instead of e.key, you'll need to access e.detail.key.\n\t /\n\t[\"keyup\", \"keydown\", \"keypress\"].forEach((eventName) => {\n\t\tnewWindow?.document.addEventListener(eventName, (event) => {\n\t\t\tdocument.dispatchEvent(\n\t\t\t\tnew CustomEvent(`portal:${eventName}`, {\n\t\t\t\t\tdetail: new KeyboardEvent(event.type, event),\n\t\t\t\t})\n\t\t\t);\n\t\t});\n\t});\n};\n\n/\n The window (opened by window.open) is an empty html document.\n * This function creates a containerDiv for the parent to insert its\n * React DOM. That containerDiv is set through the `setElement()` method\n * which must be passed in.\n \n This function also does portal housekeeping such as transferring CSS and window\n * events.\n /\nconst insertWindowContent = ({\n\tnewWindow,\n\tisAutoResizable,\n\tclassName,\n\tsetElement,\n\tmenuHeight,\n}: {\n\tnewWindow: Window;\n\tisAutoResizable: boolean;\n\tclassName?: string;\n\tmenuHeight?: number;\n\tsetElement: React.Dispatch<React.SetStateAction<HTMLElement \| undefined>>;\n}) => {\n\t// Set the child window's <html> tag to class \"menu-portal\" for scrollbar styling\n\tnewWindow.document.documentElement.className = \"menu-portal\";\n\tif (isAutoResizable) newWindow.document.body.setAttribute(\"resizing\", \"true\");\n\n\t// Create the element which will hold our react elements and then append it into the child window's body.\n\tconst containerDiv: HTMLElement = document.createElement(\"div\");\n\tnewWindow.document.body.appendChild(containerDiv);\n\n\t// The className that was passed to MenuShell is added to the child window's <body>\n\tclassName?.split(\" \").forEach((name: string) => newWindow!.document.body.classList.add(name));\n\n\t// This will update local state which will cause the parent React Functional Component\n\t// to return a react portal. See comments at the end of this file.\n\tsetElement(containerDiv);\n\n\t// Inject css into the child window's <head>\n\tinjectCSS(newWindow);\n\n\t// THE FOLLOWING IS LIKELY DEPRECATED BUT KEEPING JUST IN CASE\n\t// Place height on the portal.\n\t// inside of the portal, window.outerHeight === 39 (toolbar height).\n\t// Knowing the height of the window is important because some menus use that\n\t// information to force overflow on certain sections of the menu.\n\t(newWindow as any).portalHeight = menuHeight;\n};\n\n/\n React hook to create a drop down menu. This hook creates a new window using window.open\n * and assigns it as the childWindow to the MenuPortal. It then uses insertWindowContent()\n * to establish the React/DOM connection with the parent (e.g. Toolbar).\n /\nconst useCreateDropdown = ({\n\tkeyboardNavigation,\n\tsetElement,\n\tchildWindow,\n\tsetChildWindow,\n}: {\n\tkeyboardNavigation: KeyboardNavigation \| null;\n\tsetElement: React.Dispatch<React.SetStateAction<HTMLElement \| undefined>>;\n\tchildWindow: Window \| null;\n\tsetChildWindow: React.Dispatch<React.SetStateAction<Window \| null>>;\n}) => {\n\tconst { thisMenuId, menuWidth, menuHeight, className, maxHeight, minHeight } = useContext(MenuContext);\n\tconst { blurMenu } = useMenu();\n\tconst isAutoResizable = !menuHeight;\n\n\t/\n\t Initialize the window. This should only run once though it is possible\n\t * to run multiple times if MenuContext changes.\n\t /\n\tuseEffect(() => {\n\t\tlet menuAutoResizer: any = null;\n\n\t\t/\n\t\t Initial size and location of the menu is irrelevant because it is hidden.\n\t\t * The menu will be resized and positioned correctly when it is shown.\n\t\t /\n\t\tconst features = `height=1,width=${menuWidth},left=0,top=0,opacity=1`;\n\n\t\t/\n\t\t Opens the window which will contain the menu contents. This looks like a browser window open\n\t\t * but actually opens an Electron window which FEA intercepts. FEA uses the `childWindowOptions`\n\t\t * json configuration to determine how to display the window. `childWindowOptions.show` should\n\t\t * be set to `false` otherwise a white window will flash prior to the menu being rendered.\n\t\t \n\t\t \n\t\t * The \"/component/toolbar/menu.html\" is just an empty page. It's necessary to reference a real page\n\t\t * rather than about:blank in order that the \"origin\" is correct for the page. Many CSS ui-assets such\n\t\t * as fonts and images are set with relative paths that require a correct origin.\n\t\t \n\t\t Note, we append the menu ID for automated testing. This allows Selenium to\n\t\t * uniquely identify each menu.\n\t\t /\n\t\tconst newWindow = window.open(`./menu.html#${thisMenuId}`, `(Menu) ${thisMenuId}`, features);\n\t\tsetChildWindow(newWindow);\n\n\t\tif (newWindow) {\n\t\t\tconst onLoad = () => {\n\t\t\t\tinsertWindowContent({ newWindow, isAutoResizable, className, setElement, menuHeight });\n\t\t\t\tsetupEventForwarding(newWindow);\n\t\t\t\t/ Close window when a user clicks away.\n\t\t\t\t\tAre you wondering why not just close the window without calling\n\t\t\t\t\ttoggle? because we want to update the state in the store first\n\t\t\t\t\twhich will cause openMenuId to no longer match the shell id\n\t\t\t\t\tand eventually destroy this component which will cause the window\n\t\t\t\t\tto close (see cleanup function).\n\t\t\t\t/\n\t\t\t\tnewWindow.addEventListener(\"blur\", blurMenu);\n\n\t\t\t\t// Attach MenuAutoResizer only if the menu doesn't have a fixed height\n\t\t\t\tif (isAutoResizable)\n\t\t\t\t\tmenuAutoResizer = new MenuAutoResizer(newWindow, thisMenuId, menuWidth, maxHeight, minHeight);\n\t\t\t};\n\t\t\tnewWindow.addEventListener(\"load\", onLoad, true);\n\t\t} else {\n\t\t\tFSBL.Clients.Logger.system.error(`MenuPortal error: window.open returned null for \"./menu.html#${thisMenuId}\"`);\n\t\t}\n\n\t\treturn () => {\n\t\t\t// imesner 20210406 childwindow and keyboardNavigation were both null but hadn't closed the window or released global hotkeys\n\t\t\tconst win = childWindow \|\| menuAutoResizer?.childWindow;\n\t\t\tconst keyboardNav = keyboardNavigation \|\| (win as any)?.keyboardNavigation;\n\n\t\t\tkeyboardNav?.detach();\n\n\t\t\tmenuAutoResizer?.disconnect();\n\t\t\twin?.close();\n\t\t\tsetChildWindow(null);\n\t\t};\n\t}, [blurMenu, className, menuWidth, menuHeight, maxHeight, thisMenuId]);\n};\n\n/\n Sets visibility, size and location of the window. This can be called numerous times\n * during the lifetime of the MenuPortal.\n /\nconst showHideResizeWindow = async ({\n\tchildWindow,\n\tkeyboardNavigation,\n\tshow,\n\tthisMenuId,\n\tmenuHeight,\n\tmaxHeight,\n\tminHeight,\n}: {\n\tchildWindow: Window;\n\tkeyboardNavigation: KeyboardNavigation \| null;\n\tshow: boolean;\n\tthisMenuId: string;\n\tmenuHeight?: number;\n\tmaxHeight: number;\n\tminHeight: number;\n}) => {\n\tconst finWindow: FEA.FEAWindow = childWindow.fin.desktop.Window.getCurrent();\n\tif (show) {\n\t\tconst { left, top, height } = await calculateDimensions(childWindow, thisMenuId, menuHeight, maxHeight, minHeight);\n\n\t\tconst params: SpawnParams = {\n\t\t\tposition: \"absolute\",\n\t\t\tleft: left,\n\t\t\ttop: top,\n\t\t\theight: height,\n\t\t\tforceOntoMonitor: \"monitorRect\",\n\t\t};\n\n\t\tconst { name } = childWindow;\n\n\t\t/\n\t\t Use Finsemble to show the window. We might be tempted simply to use childWindow.moveTo() or childWindow.resizeTo()\n\t\t * but those commands limit the child window to a single monitor. We want to position the window relative to the\n\t\t * monitor on which the toolbar currently resides. showWindow() is monitor aware, so by using monitor=\"mine\" we can\n\t\t * ensure that the menu will always open on the same monitor as the toolbar. Since our toolbar has built in logic\n\t\t * to avoid straddling, we can be sure that the menu will never have to guess whether it exists on the left or right\n\t\t * side of the toolbar. Finally, showWindow() forces windows to open entirely on a monitor, so it will slide the\n\t\t * menu to the left or right as necessary to prevent it from straddling.\n\t\t /\n\t\tFSBL.Clients.LauncherClient.showWindow({ windowName: name }, params);\n\n\t\t// Ensures that the menu has keyboard focus for accessibility\n\t\tfinWindow.focus();\n\n\t\t// Ensures that the menu is positioned above any other windows that have setAlwaysOnTop flagged\n\t\tFSBL.FinsembleWindow.getInstance({ name: name }, (e: any, fsblWindow: any) => {\n\t\t\tfsblWindow.setAlwaysOnTop({ alwaysOnTop: true });\n\t\t});\n\n\t\tif (keyboardNavigation) {\n\t\t\t// Why??\n\t\t\t(childWindow as any).keyboardNavigation = keyboardNavigation;\n\t\t\tkeyboardNavigation.attach();\n\t\t}\n\t} else {\n\t\tconst { name } = childWindow;\n\t\tFSBL.FinsembleWindow.getInstance({ name: name }, (e: any, fsblWindow: any) => {\n\t\t\tfsblWindow.setAlwaysOnTop({ alwaysOnTop: false });\n\t\t});\n\n\t\tfinWindow.hide();\n\t\tif (keyboardNavigation) keyboardNavigation.detach();\n\t}\n};\n\n/\n Closes the menu portal if the menu button is removed from the toolbar\n \n @param {Node} element - HTML element to observe\n \n /\nconst closePortal = (element: Node) => {\n\tconst { closeMenu } = useMenu();\n\n\tconst options = {\n\t\tchildList: true,\n\t\tsubtree: true,\n\t};\n\n\t/*\n\t MutationObserver interface provides the ability to watch for\n\t * changes to the DOM tree using the observe method\n\t /\n\tconst mutationObserver = new MutationObserver((mutations) => {\n\t\tmutations.forEach((mutation) => {\n\t\t\tif (mutation.removedNodes?.length) closeMenu();\n\n\t\t\t// stops the MutationObserver from receiving notification from observer\n\t\t\tmutationObserver.disconnect();\n\t\t});\n\t});\n\n\t// watches for DOM changes\n\tmutationObserver.observe(element, options);\n};\n\nexport const MenuPortal: React.FunctionComponent<{\n\tshow: boolean;\n}> = ({ show, children }) => {\n\tconst { thisMenuId, menuHeight, maxHeight, minHeight } = useContext(MenuContext);\n\n\t// Container div for React portal\n\tconst [element, setElement] = useState<HTMLElement>();\n\tconst [childWindow, setChildWindow] = useState<Window \| null>(null);\n\n\t/\n\t KeyboardNavigation registers global hotkeys for navigating through a menu with cursor keys.\n\t * Those hotkeys are registered/unregistered based on visibility of the child window.\n\t * The KeyboardNavigation class is a singleton and so is memoized. It is created when the child window is available.\n\t /\n\tconst keyboardNavigation = useMemo(() => {\n\t\tif (childWindow) return new KeyboardNavigation(childWindow, \".menu-item\");\n\t\telse return null;\n\t}, [childWindow]);\n\n\t/\n\t Show and hide window. This effect will run whenever the `show` prop changes,\n\t * generally initiated by a click to <MenuToggle>.\n\t */\n\tuseEffect(() => {\n\t\t// If child window isn't yet initialized then no-op\n\t\tif (!childWindow) return;\n\n\t\tshowHideResizeWindow({ childWindow, keyboardNavigation, show, thisMenuId, menuHeight, maxHeight, minHeight });\n\t\treturn () => {};\n\t}, [show]);\n\n\t// Create the dropdown. (if MenuContext changes then the dropdown will be removed and recreated).\n\tuseCreateDropdown({ keyboardNavigation, childWindow, setElement, setChildWindow });\n\n\tconst toolbar = document.getElementById(\"Toolbar-tsx\");\n\n\tif (toolbar) closePortal(toolbar);\n\n\t// We should only return a react portal when window is ready\n\t// and container div appended to its body\n\t// See Dan abramov comment about this at:\n\t// https://github.com/facebook/react/issues/12355#issuecomment-410996235\n\treturn element ? ReactDOM.createPortal(children, element) : null;\n};\n"]}
1	+ {"version":3,"file":"MenuPortal.js","sourceRoot":"","sources":["../../../src/components/menu/MenuPortal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { MenuContext } from \"./menuContext\";\nimport { calculateDimensions, injectCSS } from \"./menuHelpers\";\nimport { applyMenuKeyboardNavigation } from \"./keyboardNavigation\";\nimport { MenuAutoResizer } from \"./MenuAutoResizer\";\nimport { useState, useEffect, useContext } from \"react\";\nimport { useMenu } from \"../../hooks/useMenu\";\nimport { services, FEA } from \"@finsemble/finsemble-api\";\n\ntype SpawnParams = services.window.types.SpawnParams;\n\n/*\n Proxy/fake events are needed because when `document.addEventListener` is used inside a component\n * that is rendered inside react portal, `document` will refer to the toolbar's document instead\n * of the childWindow's document. Clicking inside a portal will not therefore capture those events.\n \n This code intercepts these events inside the portal and then forwards them to the parent (toolbar).\n /\nconst setupEventForwarding = (newWindow: Window) => {\n\t[\"mouseDown\", \"click\", \"mouseUp\"].forEach((eventName) => {\n\t\tnewWindow.document.addEventListener(eventName, (event) => {\n\t\t\tdocument.dispatchEvent(\n\t\t\t\tnew CustomEvent(`portal:${eventName}`, {\n\t\t\t\t\tdetail: {\n\t\t\t\t\t\t// Devs may need access to the x and y of the cursor\n\t\t\t\t\t\tmouseEvent: new MouseEvent(eventName, event),\n\t\t\t\t\t\t// And possibly the target element\n\t\t\t\t\t\ttarget: event.target,\n\t\t\t\t\t},\n\t\t\t\t})\n\t\t\t);\n\t\t});\n\t});\n\n\t/\n\t Proxies keyboard events from the portal up into the parent window.\n\t * instead of e.key, you'll need to access e.detail.key.\n\t /\n\t[\"keyup\", \"keydown\", \"keypress\"].forEach((eventName) => {\n\t\tnewWindow?.document.addEventListener(eventName, (event) => {\n\t\t\tdocument.dispatchEvent(\n\t\t\t\tnew CustomEvent(`portal:${eventName}`, {\n\t\t\t\t\tdetail: new KeyboardEvent(event.type, event),\n\t\t\t\t})\n\t\t\t);\n\t\t});\n\t});\n};\n\n/\n The window (opened by window.open) is an empty html document.\n * This function creates a containerDiv for the parent to insert its\n * React DOM. That containerDiv is set through the `setElement()` method\n * which must be passed in.\n \n This function also does portal housekeeping such as transferring CSS and window\n * events.\n /\nconst insertWindowContent = ({\n\tnewWindow,\n\tisAutoResizable,\n\tclassName,\n\tsetElement,\n\tmenuHeight,\n}: {\n\tnewWindow: Window;\n\tisAutoResizable: boolean;\n\tclassName?: string;\n\tmenuHeight?: number;\n\tsetElement: React.Dispatch<React.SetStateAction<HTMLElement \| undefined>>;\n}) => {\n\t// Set the child window's <html> tag to class \"menu-portal\" for scrollbar styling\n\tnewWindow.document.documentElement.className = \"menu-portal\";\n\tif (isAutoResizable) newWindow.document.body.setAttribute(\"resizing\", \"true\");\n\n\t// Create the element which will hold our react elements and then append it into the child window's body.\n\tconst containerDiv: HTMLElement = document.createElement(\"div\");\n\tnewWindow.document.body.appendChild(containerDiv);\n\n\t// The className that was passed to MenuShell is added to the child window's <body>\n\tclassName?.split(\" \").forEach((name: string) => newWindow!.document.body.classList.add(name));\n\n\t// This will update local state which will cause the parent React Functional Component\n\t// to return a react portal. See comments at the end of this file.\n\tsetElement(containerDiv);\n\n\t// Inject css into the child window's <head>\n\tinjectCSS(newWindow);\n\n\t// THE FOLLOWING IS LIKELY DEPRECATED BUT KEEPING JUST IN CASE\n\t// Place height on the portal.\n\t// inside of the portal, window.outerHeight === 39 (toolbar height).\n\t// Knowing the height of the window is important because some menus use that\n\t// information to force overflow on certain sections of the menu.\n\t(newWindow as any).portalHeight = menuHeight;\n};\n\n/\n React hook to create a drop down menu. This hook creates a new window using window.open\n * and assigns it as the childWindow to the MenuPortal. It then uses insertWindowContent()\n * to establish the React/DOM connection with the parent (e.g. Toolbar).\n /\nconst useCreateDropdown = ({\n\tsetElement,\n\tchildWindow,\n\tsetChildWindow,\n}: {\n\tsetElement: React.Dispatch<React.SetStateAction<HTMLElement \| undefined>>;\n\tchildWindow: Window \| null;\n\tsetChildWindow: React.Dispatch<React.SetStateAction<Window \| null>>;\n}) => {\n\tconst { thisMenuId, menuWidth, menuHeight, className, maxHeight, minHeight } = useContext(MenuContext);\n\tconst { blurMenu } = useMenu();\n\tconst isAutoResizable = !menuHeight;\n\n\t/\n\t Initialize the window. This should only run once though it is possible\n\t * to run multiple times if MenuContext changes.\n\t /\n\tuseEffect(() => {\n\t\tlet menuAutoResizer: any = null;\n\n\t\t/\n\t\t Initial size and location of the menu is irrelevant because it is hidden.\n\t\t * The menu will be resized and positioned correctly when it is shown.\n\t\t /\n\t\tconst features = `height=1,width=${menuWidth},left=0,top=0,opacity=1`;\n\n\t\t/\n\t\t Opens the window which will contain the menu contents. This looks like a browser window open\n\t\t * but actually opens an Electron window which FEA intercepts. FEA uses the `childWindowOptions`\n\t\t * json configuration to determine how to display the window. `childWindowOptions.show` should\n\t\t * be set to `false` otherwise a white window will flash prior to the menu being rendered.\n\t\t \n\t\t \n\t\t * The \"/component/toolbar/menu.html\" is just an empty page. It's necessary to reference a real page\n\t\t * rather than about:blank in order that the \"origin\" is correct for the page. Many CSS ui-assets such\n\t\t * as fonts and images are set with relative paths that require a correct origin.\n\t\t \n\t\t Note, we append the menu ID for automated testing. This allows Selenium to\n\t\t * uniquely identify each menu.\n\t\t /\n\t\tconst newWindow = window.open(`./menu.html#${thisMenuId}`, `(Menu) ${thisMenuId}`, features);\n\t\tsetChildWindow(newWindow);\n\n\t\tif (newWindow) {\n\t\t\tconst onLoad = () => {\n\t\t\t\tinsertWindowContent({ newWindow, isAutoResizable, className, setElement, menuHeight });\n\t\t\t\tsetupEventForwarding(newWindow);\n\t\t\t\t/ Close window when a user clicks away.\n\t\t\t\t\tAre you wondering why not just close the window without calling\n\t\t\t\t\ttoggle? because we want to update the state in the store first\n\t\t\t\t\twhich will cause openMenuId to no longer match the shell id\n\t\t\t\t\tand eventually destroy this component which will cause the window\n\t\t\t\t\tto close (see cleanup function).\n\t\t\t\t/\n\t\t\t\tnewWindow.addEventListener(\"blur\", blurMenu);\n\t\t\t\tnewWindow.addEventListener(\"keydown\", (e) => {\n\t\t\t\t\tif (e.key === \"Escape\") {\n\t\t\t\t\t\tblurMenu();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tapplyMenuKeyboardNavigation(newWindow);\n\n\t\t\t\t// Attach MenuAutoResizer only if the menu doesn't have a fixed height\n\t\t\t\tif (isAutoResizable)\n\t\t\t\t\tmenuAutoResizer = new MenuAutoResizer(newWindow, thisMenuId, menuWidth, maxHeight, minHeight);\n\t\t\t};\n\t\t\tnewWindow.addEventListener(\"load\", onLoad, true);\n\t\t} else {\n\t\t\tFSBL.Clients.Logger.system.error(`MenuPortal error: window.open returned null for \"./menu.html#${thisMenuId}\"`);\n\t\t}\n\n\t\treturn () => {\n\t\t\t// imesner 20210406 childwindow and keyboardNavigation were both null but hadn't closed the window or released global hotkeys\n\t\t\tconst win = childWindow \|\| menuAutoResizer?.childWindow;\n\n\t\t\tmenuAutoResizer?.disconnect();\n\t\t\twin?.close();\n\t\t\tsetChildWindow(null);\n\t\t};\n\t}, [blurMenu, className, menuWidth, menuHeight, maxHeight, thisMenuId]);\n};\n\n/\n Sets visibility, size and location of the window. This can be called numerous times\n * during the lifetime of the MenuPortal.\n /\nconst showHideResizeWindow = async ({\n\tchildWindow,\n\tshow,\n\tthisMenuId,\n\tmenuHeight,\n\tmaxHeight,\n\tminHeight,\n}: {\n\tchildWindow: Window;\n\tshow: boolean;\n\tthisMenuId: string;\n\tmenuHeight?: number;\n\tmaxHeight: number;\n\tminHeight: number;\n}) => {\n\tconst finWindow: FEA.FEAWindow = childWindow.fin.desktop.Window.getCurrent();\n\tif (show) {\n\t\tconst { left, top, height } = await calculateDimensions(childWindow, thisMenuId, menuHeight, maxHeight, minHeight);\n\n\t\tconst params: SpawnParams = {\n\t\t\tposition: \"absolute\",\n\t\t\tleft: left,\n\t\t\ttop: top,\n\t\t\theight: height,\n\t\t\tforceOntoMonitor: \"monitorRect\",\n\t\t};\n\n\t\tconst { name } = childWindow;\n\n\t\t/\n\t\t Use Finsemble to show the window. We might be tempted simply to use childWindow.moveTo() or childWindow.resizeTo()\n\t\t * but those commands limit the child window to a single monitor. We want to position the window relative to the\n\t\t * monitor on which the toolbar currently resides. showWindow() is monitor aware, so by using monitor=\"mine\" we can\n\t\t * ensure that the menu will always open on the same monitor as the toolbar. Since our toolbar has built in logic\n\t\t * to avoid straddling, we can be sure that the menu will never have to guess whether it exists on the left or right\n\t\t * side of the toolbar. Finally, showWindow() forces windows to open entirely on a monitor, so it will slide the\n\t\t * menu to the left or right as necessary to prevent it from straddling.\n\t\t /\n\t\tFSBL.Clients.LauncherClient.showWindow({ windowName: name }, params);\n\n\t\t// Ensures that the menu has keyboard focus for accessibility\n\t\tfinWindow.focus();\n\n\t\t// Ensures that the menu is positioned above any other windows that have setAlwaysOnTop flagged\n\t\tFSBL.FinsembleWindow.getInstance({ name: name }, (e: any, fsblWindow: any) => {\n\t\t\tfsblWindow.setAlwaysOnTop({ alwaysOnTop: true });\n\t\t});\n\t} else {\n\t\tconst { name } = childWindow;\n\t\tFSBL.FinsembleWindow.getInstance({ name: name }, (e: any, fsblWindow: any) => {\n\t\t\tfsblWindow.setAlwaysOnTop({ alwaysOnTop: false });\n\t\t});\n\n\t\tfinWindow.hide();\n\t}\n};\n\n/\n Closes the menu portal if the menu button is removed from the toolbar\n \n @param {Node} element - HTML element to observe\n \n /\nconst closePortal = (element: Node) => {\n\tconst { closeMenu } = useMenu();\n\n\tconst options = {\n\t\tchildList: true,\n\t\tsubtree: true,\n\t};\n\n\t/*\n\t MutationObserver interface provides the ability to watch for\n\t * changes to the DOM tree using the observe method\n\t /\n\tconst mutationObserver = new MutationObserver((mutations) => {\n\t\tmutations.forEach((mutation) => {\n\t\t\tif (mutation.removedNodes?.length) closeMenu();\n\n\t\t\t// stops the MutationObserver from receiving notification from observer\n\t\t\tmutationObserver.disconnect();\n\t\t});\n\t});\n\n\t// watches for DOM changes\n\tmutationObserver.observe(element, options);\n};\n\nexport const MenuPortal: React.FunctionComponent<{\n\tshow: boolean;\n}> = ({ show, children }) => {\n\tconst { thisMenuId, menuHeight, maxHeight, minHeight } = useContext(MenuContext);\n\n\t// Container div for React portal\n\tconst [element, setElement] = useState<HTMLElement>();\n\tconst [childWindow, setChildWindow] = useState<Window \| null>(null);\n\n\t/\n\t Show and hide window. This effect will run whenever the `show` prop changes,\n\t * generally initiated by a click to <MenuToggle>.\n\t */\n\tuseEffect(() => {\n\t\t// If child window isn't yet initialized then no-op\n\t\tif (!childWindow) return;\n\n\t\tshowHideResizeWindow({ childWindow, show, thisMenuId, menuHeight, maxHeight, minHeight });\n\t\treturn () => {};\n\t}, [show]);\n\n\t// Create the dropdown. (if MenuContext changes then the dropdown will be removed and recreated).\n\tuseCreateDropdown({ childWindow, setElement, setChildWindow });\n\n\tconst toolbar = document.getElementById(\"Toolbar-tsx\");\n\n\tif (toolbar) closePortal(toolbar);\n\n\t// We should only return a react portal when window is ready\n\t// and container div appended to its body\n\t// See Dan abramov comment about this at:\n\t// https://github.com/facebook/react/issues/12355#issuecomment-410996235\n\treturn element ? ReactDOM.createPortal(children, element) : null;\n};\n"]}

package/react/components/menu/MenuToggle.js CHANGED Viewed

@@ -11,6 +11,6 @@ export const MenuToggle = ({ children }) => {
             }
         } },
         children,
-        React.createElement("i", { className: "finsemble-toolbar-button-icon ff-chevron-down" })));
+        React.createElement("i", { className: "finsemble-toolbar-button-icon ff-chevron-down", "aria-hidden": "true" })));
 };
 //# sourceMappingURL=MenuToggle.js.map

package/react/components/menu/MenuToggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuToggle.js","sourceRoot":"","sources":["../../../src/components/menu/MenuToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAK9C,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,OAAO,EAAE,CAAC;IAC/C,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAErD,MAAM,eAAe,GAAW,YAAY,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,OAAO,CACN,6BACC,EAAE,EAAE,GAAG,UAAU,cAAc,EAC/B,SAAS,EAAE,4BAA4B,eAAe,EAAE,EACxD,WAAW,EAAE,UAAU,EACvB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAsC,EAAE,EAAE;YACrD,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;gBACvC,UAAU,EAAE,CAAC;aACb;QACF,CAAC;QAEA,QAAQ;QACT,2BAAG,SAAS,EAAC,+CAA+C,GAAK,~~CAC5D~~,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { MenuContext } from \"./menuContext\";\nimport { useMenu } from \"../../hooks/useMenu\";\n\n/*\n A menu button that opens and closes the menu.\n */\nexport const MenuToggle: React.FunctionComponent = ({ children }) => {\n\tconst { toggleMenu, isMenuActive } = useMenu();\n\tconst { thisMenuId } = React.useContext(MenuContext);\n\n\tconst menuActiveClass: string = isMenuActive() ? \"menu-active\" : \"\";\n\n\treturn (\n\t\t<div\n\t\t\tid={`${thisMenuId}-menu-toggle`}\n\t\t\tclassName={`finsemble-toolbar-button ${menuActiveClass}`}\n\t\t\tonMouseDown={toggleMenu}\n\t\t\trole=\"button\"\n\t\t\ttabIndex={0}\n\t\t\tonKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\t\tif ([\"Enter\", \"Space\"].includes(e.key)) {\n\t\t\t\t\ttoggleMenu();\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t\t<i className=\"finsemble-toolbar-button-icon ff-chevron-down\"></i>\n\t\t</div>\n\t);\n};\n"]}
1	+ {"version":3,"file":"MenuToggle.js","sourceRoot":"","sources":["../../../src/components/menu/MenuToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAK9C,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,OAAO,EAAE,CAAC;IAC/C,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAErD,MAAM,eAAe,GAAW,YAAY,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,OAAO,CACN,6BACC,EAAE,EAAE,GAAG,UAAU,cAAc,EAC/B,SAAS,EAAE,4BAA4B,eAAe,EAAE,EACxD,WAAW,EAAE,UAAU,EACvB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAsC,EAAE,EAAE;YACrD,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;gBACvC,UAAU,EAAE,CAAC;aACb;QACF,CAAC;QAEA,QAAQ;QACT,2BAAG,SAAS,EAAC,+CAA+C,iBAAa,MAAM,GAAK,CAC/E,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { MenuContext } from \"./menuContext\";\nimport { useMenu } from \"../../hooks/useMenu\";\n\n/*\n A menu button that opens and closes the menu.\n */\nexport const MenuToggle: React.FunctionComponent = ({ children }) => {\n\tconst { toggleMenu, isMenuActive } = useMenu();\n\tconst { thisMenuId } = React.useContext(MenuContext);\n\n\tconst menuActiveClass: string = isMenuActive() ? \"menu-active\" : \"\";\n\n\treturn (\n\t\t<div\n\t\t\tid={`${thisMenuId}-menu-toggle`}\n\t\t\tclassName={`finsemble-toolbar-button ${menuActiveClass}`}\n\t\t\tonMouseDown={toggleMenu}\n\t\t\trole=\"button\"\n\t\t\ttabIndex={0}\n\t\t\tonKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\t\tif ([\"Enter\", \"Space\"].includes(e.key)) {\n\t\t\t\t\ttoggleMenu();\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t\t<i className=\"finsemble-toolbar-button-icon ff-chevron-down\" aria-hidden=\"true\"></i>\n\t\t</div>\n\t);\n};\n"]}

package/react/components/menu/keyboardNavigation.d.ts CHANGED Viewed

@@ -1,22 +1 @@
-export declare class KeyboardNavigation {
-    private childWin;
-    private className;
-    private selectedItem;
-    private selectedIcon;
-    constructor(childWin: Window, className: string);
-    private resetFocusOnDOMChanges;
-    private getElements;
-    private getMenuItemIcons;
-    private removeAllFocus;
-    private focusOn;
-    private focusOnIcon;
-    private clickOnItem;
-    private onArrowUp;
-    private onArrowDown;
-    private onArrowRight;
-    private onArrowLeft;
-    private focusOnFirst;
-    private focusOnLast;
-    attach(): void;
-    detach(): void;
-}
+export declare const applyMenuKeyboardNavigation: (childWin: Window, className?: string) => void;