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

package/react/components/downloadManager/DownloadItem.js

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { FEAGlobals } from "../../../common/Globals";
+import { ButtonIcon } from "../common/ButtonIcon";
+import "../../assets/css/download.css";
+const renderPauseButton = (id) => (React.createElement(ButtonIcon, { displayText: true, className: "finsemble-download-pause", text: "Pause", icon: "pause", onClick: () => {
+        FEAGlobals.fin.desktop.System.pauseDownload(id);
+    } }));
+const renderCancelButton = (id) => (React.createElement(ButtonIcon, { displayText: true, className: "finsemble-download-cancel", text: "Cancel", icon: "cancel", onClick: () => {
+        FEAGlobals.fin.desktop.System.cancelDownload(id);
+    } }));
+const renderResumeButton = (id) => (React.createElement(ButtonIcon, { displayText: true, className: "finsemble-download-resume", text: "Resume", icon: "resume", onClick: () => {
+        FEAGlobals.fin.desktop.System.resumeDownload(id);
+    } }));
+const renderShowInFolderButton = (id) => (React.createElement(ButtonIcon, { className: "finsemble-download-folder", displayText: true, text: "Show in folder", icon: "search", onClick: () => {
+        FEAGlobals.fin.desktop.System.showDownloadedFileInFolder(id);
+    } }));
+/**
+ * Determines which buttons to render based on the current state.
+ * The available actions are:
+ * Progressing(download in progress): pause, cancel
+ * Paused: resume, cancel
+ * Completed: show in folder
+ * Canceled, interrupted(download failed): none - it's currently not possible to resume/retry a canceled download
+ * All downloads in a state of "completion" (completed, cancelled, interrupted, file-deleted) can be removed from the list
+ */
+const renderButtons = (id, state) => {
+    switch (state) {
+        case "progressing":
+            return (React.createElement("span", null,
+                renderPauseButton(id),
+                renderCancelButton(id)));
+        case "paused":
+            return (React.createElement("span", null,
+                renderResumeButton(id),
+                renderCancelButton(id)));
+        case "completed":
+            return renderShowInFolderButton(id);
+        case "cancelled":
+        case "interrupted":
+        case "file-deleted":
+        default:
+            break;
+    }
+};
+const bytesToMB = (bytes) => Math.round((bytes / (1024 * 1024)) * 1e2) / 1e2;
+/**
+ * Entry for each individual download with information about the download and it's state.
+ * Downloads can be paused/canceled/resumed based on completion status.
+ * A removal function is passed down from the parent Download Manager to allow removing downloads based on completion state
+ */
+export const DownloadItem = ({ downloadItem, remove }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    // Completed, canceled, interrupted downloads can be removed
+    const removableState = ((_a = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _a === void 0 ? void 0 : _a.state) === "completed" ||
+        ((_b = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _b === void 0 ? void 0 : _b.state) === "cancelled" ||
+        ((_c = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _c === void 0 ? void 0 : _c.state) === "file-deleted" ||
+        ((_d = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _d === void 0 ? void 0 : _d.state) === "interrupted";
+    const fileDeleted = ((_e = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _e === void 0 ? void 0 : _e.state) === "file-deleted";
+    const receivedMB = bytesToMB((_f = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _f === void 0 ? void 0 : _f.receivedBytes);
+    const totalMB = bytesToMB((_g = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _g === void 0 ? void 0 : _g.totalBytes);
+    const removeDownloadItem = async () => {
+        await FEAGlobals.fin.desktop.System.removeDownloadItem(downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.id);
+        remove(downloadItem);
+    };
+    return (React.createElement("div", { className: "download-row" },
+        React.createElement("div", { className: "download-remove" }, removableState && (React.createElement(ButtonIcon, { text: "Cancel", className: "finsemble-download-remove", icon: "times", onClick: removeDownloadItem }))),
+        React.createElement("div", { className: `download-name ${fileDeleted ? "file-deleted" : ""}` }, (_h = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _h === void 0 ? void 0 : _h.filename),
+        React.createElement("div", { title: (_j = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _j === void 0 ? void 0 : _j.url, className: "download-url" }, (_k = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _k === void 0 ? void 0 : _k.url),
+        React.createElement("div", { className: "download-progress-button-row" },
+            React.createElement("span", { className: "download-progress" },
+                receivedMB,
+                "MB/",
+                totalMB,
+                "MB"),
+            React.createElement("span", { className: "download-buttons" }, renderButtons(downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.id, (_l = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _l === void 0 ? void 0 : _l.state)))));
+};
+//# sourceMappingURL=DownloadItem.js.map

package/react/components/downloadManager/DownloadItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadItem.js","sourceRoot":"","sources":["../../../../../src/ui/components/downloadManager/DownloadItem.tsx"],"names":[],"mappings":"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"}

package/react/components/downloadManager/DownloadManager.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import "../../assets/css/download.css";
+export declare type DownloadManagerProps = {
+    className?: string;
+};
+/**
+ * UI for the Download Manager containing a list and data for downloads initiated across all windows.
+ */
+export declare const DownloadManager: (props: DownloadManagerProps) => JSX.Element;
+//# sourceMappingURL=DownloadManager.d.ts.map

package/react/components/downloadManager/DownloadManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadManager.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/downloadManager/DownloadManager.tsx"],"names":[],"mappings":";AAMA,OAAO,+BAA+B,CAAC;AACvC,oBAAY,oBAAoB,GAAG;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,UAAW,oBAAoB,gBA2D1D,CAAC"}

package/react/components/downloadManager/DownloadManager.js

@@ -0,0 +1,40 @@
+import React, { useEffect } from "react";
+import { Title } from "../../hooks/useTitle";
+import { DownloadItem } from "./DownloadItem";
+import useDownloadItems from "../../hooks/useDownloadItems";
+import { ButtonIcon } from "../common/ButtonIcon";
+import { FEAGlobals } from "../../../common/Globals";
+import "../../assets/css/download.css";
+/**
+ * UI for the Download Manager containing a list and data for downloads initiated across all windows.
+ */
+export const DownloadManager = (props) => {
+    const { downloadItems, initDownloadItems, removeDownloadItem } = useDownloadItems();
+    const launchPreferences = () => {
+        FEAGlobals.FSBL.Clients.RouterClient.transmit("FinsembleUserPreferencesChannel", {
+            preferencesTab: "General",
+        });
+        FEAGlobals.FSBL.Clients.LauncherClient.showWindow({
+            componentType: "UserPreferences",
+        }, {
+            monitor: "mine",
+            left: "center",
+            top: "center",
+        });
+    };
+    useEffect(() => {
+        FEAGlobals.fin.desktop.System.getDownloadList((downloadList) => {
+            initDownloadItems(downloadList);
+        });
+    }, []);
+    return (React.createElement("div", null,
+        React.createElement(Title, { title: "Download Manager" }),
+        React.createElement("div", { className: "download-wrapper" },
+            React.createElement("div", { className: "download-row" },
+                React.createElement("div", { className: "download-header" },
+                    React.createElement("div", { className: "download-title" }, "Downloads"),
+                    React.createElement("div", { className: "download-settings" },
+                        React.createElement(ButtonIcon, { text: "Settings", className: "download-settings-button", icon: "gear", onClick: launchPreferences })))),
+            (downloadItems === null || downloadItems === void 0 ? void 0 : downloadItems.length) > 0 ? (React.createElement("div", null, downloadItems.map((downloadItem) => (React.createElement(DownloadItem, Object.assign({ key: `download-item-${downloadItem.id}`, downloadItem: downloadItem, remove: removeDownloadItem }, props)))))) : (React.createElement("div", { className: "no-downloads" }, "No Downloads to Display")))));
+};
+//# sourceMappingURL=DownloadManager.js.map

package/react/components/downloadManager/DownloadManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadManager.js","sourceRoot":"","sources":["../../../../../src/ui/components/downloadManager/DownloadManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,gBAAgB,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,+BAA+B,CAAC;AAKvC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC9D,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEpF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC9B,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,iCAAiC,EAAE;YAChF,cAAc,EAAE,SAAS;SACzB,CAAC,CAAC;QACH,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,UAAU,CAChD;YACC,aAAa,EAAE,iBAAiB;SAChC,EACD;YACC,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,QAAQ;YACd,GAAG,EAAE,QAAQ;SACb,CACD,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,YAAY,EAAE,EAAE;YAC9D,iBAAiB,CAAC,YAAY,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACN;QACC,oBAAC,KAAK,IAAC,KAAK,EAAC,kBAAkB,GAAG;QAClC,6BAAK,SAAS,EAAC,kBAAkB;YAChC,6BAAK,SAAS,EAAC,cAAc;gBAC5B,6BAAK,SAAS,EAAC,iBAAiB;oBAC/B,6BAAK,SAAS,EAAC,gBAAgB,gBAAgB;oBAC/C,6BAAK,SAAS,EAAC,mBAAmB;wBACjC,oBAAC,UAAU,IACV,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,iBAAiB,GACzB,CACG,CACD,CACD;YACL,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAAC,CAC5B,iCACE,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CACpC,oBAAC,YAAY,kBACZ,GAAG,EAAE,iBAAiB,YAAY,CAAC,EAAE,EAAE,EACvC,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,kBAAkB,IACtB,KAAK,EACR,CACF,CAAC,CACG,CACN,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAC,cAAc,8BAA8B,CAC3D,CACI,CACD,CACN,CAAC;AACH,CAAC,CAAC"}

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

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

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

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

package/react/components/downloadManager/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/components/downloadManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/react/components/favorites/FavoriteMaker.d.ts

@@ -1,13 +1,18 @@
 import * as React from "react";
 import { Favorite } from "../../types/favoriteTypes";
-import { Icon } from "../../types/iconTypes";
 declare type FavoriteMakerProps = Favorite & {
     className?: string;
-    id: string;
-    category: string;
-    name: string;
-    icon?: Icon;
     style?: React.CSSProperties;
+    children?: React.ReactNode;
 };
-export declare const FavoriteMaker: React.FunctionComponent<FavoriteMakerProps>;
+/**
+ * Creates a clickable "favorite" that coordinates with the toolbar's pinned <FavoritesShell>.
+ * @param {string} [className] - An optional CSS className to append.
+ * @param {string} [id] - The unique identifier for the favorite item. This must be consistent across restarts.
+ * @param {string} [category] - "Workspace" | "Application". The catagory of the favorite item. Currenly only workspaces and launchable Finsemble applications can be favorited.
+ * @param {string} [name] - The name of the favorite item. This will be used for display in the FavoriteShell.
+ * @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.
+ */
+export declare const FavoriteMaker: ({ id, category, icon, name, children, className, style }: FavoriteMakerProps) => JSX.Element;
 export {};
+//# sourceMappingURL=FavoriteMaker.d.ts.map

package/react/components/favorites/FavoriteMaker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoriteMaker.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/favorites/FavoriteMaker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGrD,aAAK,kBAAkB,GAAG,QAAQ,GAAG;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,6DAAmE,kBAAkB,gBAmC9G,CAAC"}

package/react/components/favorites/FavoriteMaker.js

@@ -1,7 +1,16 @@
 import * as React from "react";
 import { useFavorites } from "../../hooks/useFavorites";
-export const FavoriteMaker = ({ id, category, icon, name, children, className = "", style, }) => {
+/**
+ * Creates a clickable "favorite" that coordinates with the toolbar's pinned <FavoritesShell>.
+ * @param {string} [className] - An optional CSS className to append.
+ * @param {string} [id] - The unique identifier for the favorite item. This must be consistent across restarts.
+ * @param {string} [category] - "Workspace" | "Application". The catagory of the favorite item. Currenly only workspaces and launchable Finsemble applications can be favorited.
+ * @param {string} [name] - The name of the favorite item. This will be used for display in the FavoriteShell.
+ * @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.
+ */
+export const FavoriteMaker = ({ id, category, icon, name, children, className = "", style }) => {
     const { isFavorited, addFavorite, removeFavorite } = useFavorites();
+    // If no icon is specified then default to an avatar based on initials
     const definitiveIcon = icon !== null && icon !== void 0 ? icon : {
         imageType: "initials",
         name: name,
@@ -26,6 +35,6 @@ export const FavoriteMaker = ({ id, category, icon, name, children, className =
     const active = isFavorited(id) ? "favorited" : "not-favorited";
     const classes = `favorite-maker ${active} ${className}`;
     const title = isFavorited(id) ? "Unfavorite" : "Favorite";
-    return (React.createElement("div", { onClick: toggleFavorite, className: classes, style: style, title: title }, children || React.createElement("i", { className: "ff-favorite" })));
+    return (React.createElement("div", { role: "button", tabIndex: 0, onClick: toggleFavorite, className: classes, style: style, title: title }, children || React.createElement("i", { className: "ff-favorite" })));
 };
 //# sourceMappingURL=FavoriteMaker.js.map

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

@@ -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;AAqBxD,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,GAAS,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI;QACpC,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\";\r\nimport { useFavorites } from \"../../hooks/useFavorites\";\r\nimport { Favorite } from \"../../types/favoriteTypes\";\r\nimport { Icon } from \"../../types/iconTypes\";\r\n\r\ntype FavoriteMakerProps = Favorite & {\r\n\tclassName?: string;\r\n\tid: string;\r\n\tcategory: string;\r\n\tname: string;\r\n\ticon?: Icon;\r\n\tstyle?: React.CSSProperties;\r\n};\r\n\r\n/**\r\n * Creates a clickable \"favorite\" that coordinates with the toolbar's pinned <FavoritesShell>.\r\n * @param {string} [className] - An optional CSS className to append.\r\n * @param {string} [id] - The unique identifier for the favorite item. This must be consistent across restarts.\r\n * @param {string} [category] - \"Workspace\" | \"Application\". The catagory of the favorite item. Currenly only workspaces and launchable Finsemble applications can be favorited.\r\n * @param {string} [name] - The name of the favorite item. This will be used for display in the FavoriteShell.\r\n * @param {Icon} [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.\r\n */\r\nexport const FavoriteMaker: React.FunctionComponent<FavoriteMakerProps> = ({\r\n\tid,\r\n\tcategory,\r\n\ticon,\r\n\tname,\r\n\tchildren,\r\n\tclassName = \"\",\r\n\tstyle,\r\n}) => {\r\n\tconst { isFavorited, addFavorite, removeFavorite } = useFavorites();\r\n\r\n\t// If no icon is specified then default to an avatar based on initials\r\n\tconst definitiveIcon: Icon = icon ?? {\r\n\t\timageType: \"initials\",\r\n\t\tname: name,\r\n\t\tcategory: category,\r\n\t};\r\n\r\n\tconst toggleFavorite = (e: React.MouseEvent) => {\r\n\t\tdefinitiveIcon;\r\n\t\te.preventDefault();\r\n\t\te.stopPropagation();\r\n\t\tif (isFavorited(id)) {\r\n\t\t\tremoveFavorite(id);\r\n\t\t} else {\r\n\t\t\taddFavorite({\r\n\t\t\t\tid,\r\n\t\t\t\tcategory,\r\n\t\t\t\tname,\r\n\t\t\t\ticon: definitiveIcon,\r\n\t\t\t});\r\n\t\t}\r\n\t};\r\n\r\n\tconst active = isFavorited(id) ? \"favorited\" : \"not-favorited\";\r\n\tconst classes = `favorite-maker ${active} ${className}`;\r\n\tconst title = isFavorited(id) ? \"Unfavorite\" : \"Favorite\";\r\n\r\n\treturn (\r\n\t\t<div onClick={toggleFavorite} className={classes} style={style} title={title}>\r\n\t\t\t{children || <i className=\"ff-favorite\"></i>}\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"FavoriteMaker.js","sourceRoot":"","sources":["../../../../../src/ui/components/favorites/FavoriteMaker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAUxD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAsB,EAAE,EAAE;IAClH,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAEpE,sEAAsE;IACtE,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"}

package/react/components/favorites/FavoritesShell.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
-import "../../ui-assets/css/favorites.css";
+import "../../assets/css/favorites.css";
+/**
+ * The FavoritesShell renders the favorite component, which displays all the favorited items and allows the user
+ * to launch, reorder, or delete a favorited item.
+ */
 export declare const FavoritesShell: () => JSX.Element;
+//# sourceMappingURL=FavoritesShell.d.ts.map

package/react/components/favorites/FavoritesShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoritesShell.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/favorites/FavoritesShell.tsx"],"names":[],"mappings":";AAEA,OAAO,gCAAgC,CAAC;AAkExC;;;GAGG;AACH,eAAO,MAAM,cAAc,mBAM1B,CAAC"}

package/react/components/favorites/FavoritesShell.js

@@ -1,27 +1,41 @@
 import * as React from "react";
 import { useFavoritesShell } from "../../hooks/useFavoritesShell";
-import "../../ui-assets/css/favorites.css";
+import "../../assets/css/favorites.css";
 import { Icon } from "../icon/Icon";
 import { FinsembleDnDContext, AllowableDnDAxis } from "../legacyControls/FinsembleDnDContext";
 import { FinsembleDraggable } from "../legacyControls/FinsembleDraggable";
+/*
+ *  The component that loads and renders all the favorited items.
+ */
 const FavoritesComponent = () => {
     const { favorites, triggerFavorite, removeFavorite, setFavoritesOrder } = useFavoritesShell();
+    // When user is reordering the favorite items in the UI, we need to keep track to this new order and persist the order information.
+    // This function gets all the favorite item elements in the correct order and call the hook function to set and persist this order.
     const reorder = ({ oldIndex, newIndex }) => {
         setFavoritesOrder({ oldIndex, newIndex });
     };
+    // Delete a favorite item from the toolbar
     const triggerRemoveFavorite = (event, id) => {
         event.stopPropagation();
         removeFavorite(id);
     };
     const nameLengthCheckPoint = (name) => (name.length > 24 ? `${name.substring(0, 25)}...` : name);
-    const favoriteElements = favorites.map(({ id, name, icon, category }, index) => (React.createElement(FinsembleDraggable, { draggableId: id, index: index, key: id, wrapperClass: "finsemble-toolbar-button", onClick: () => triggerFavorite(id, category) },
+    const favoriteElements = favorites.map(({ id, name, icon, category }, index) => (React.createElement(FinsembleDraggable, { draggableId: id, index: index, key: id, wrapperClass: "finsemble-toolbar-button", onClick: () => triggerFavorite(id, category), onKeydown: (e) => {
+            if (e.key === "Delete") {
+                triggerRemoveFavorite(e, id);
+            }
+        } },
         React.createElement(Icon, Object.assign({ category: category }, icon)),
         React.createElement("div", { className: "finsemble-toolbar-button-label", title: name }, nameLengthCheckPoint(name)),
         React.createElement("i", { title: "Unfavorite", onClick: (event) => triggerRemoveFavorite(event, id), id: "toolbar-delete", className: "ff-close-3" }))));
     return (React.createElement(FinsembleDnDContext, { onDragEnd: reorder, className: "finsemble-toolbar-section rearrange-region", id: "favoritesContainer", allowHorizontalScroll: true, axis: AllowableDnDAxis.x }, favoriteElements));
 };
-export const FavoritesShell = () => {
-    return (React.createElement("div", { className: "finsemble-toolbar-section", id: "fav-shell" },
-        React.createElement(FavoritesComponent, null)));
-};
+/**
+ * The FavoritesShell renders the favorite component, which displays all the favorited items and allows the user
+ * to launch, reorder, or delete a favorited item.
+ */
+export const FavoritesShell = () => (
+// When user scrolls to one end of the favorite list, the corresponding variable will be set to "false" so that the scrolling indicator will grey out
+React.createElement("div", { className: "finsemble-toolbar-section", id: "fav-shell" },
+    React.createElement(FavoritesComponent, null)));
 //# sourceMappingURL=FavoritesShell.js.map

package/react/components/favorites/FavoritesShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"FavoritesShell.js","sourceRoot":"","sources":["../../../src/components/favorites/FavoritesShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAK1E,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC/B,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAI9F,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAA0C,EAAE,EAAE;QAClF,iBAAiB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC;IAGF,MAAM,qBAAqB,GAAG,CAAC,KAAoC,EAAE,EAAU,EAAE,EAAE;QAClF,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,cAAc,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAEzG,MAAM,gBAAgB,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/E,oBAAC,kBAAkB,IAClB,WAAW,EAAE,EAAE,EACf,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,EAAE,EACP,YAAY,EAAC,0BAA0B,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,EAAE,EAAE,QAAQ,CAAC;QAE5C,oBAAC,IAAI,kBAAC,QAAQ,EAAE,QAAQ,IAAM,IAAI,EAAI;QACtC,6BAAK,SAAS,EAAC,gCAAgC,EAAC,KAAK,EAAE,IAAI,IACzD,oBAAoB,CAAC,IAAI,CAAC,CACtB;QACN,2BACC,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,EAAE,CAAC,EACpD,EAAE,EAAC,gBAAgB,EACnB,SAAS,EAAC,YAAY,GAClB,CACe,CACrB,CAAC,CAAC;IACH,OAAO,CACN,oBAAC,mBAAmB,IACnB,SAAS,EAAE,OAAO,EAClB,SAAS,EAAC,4CAA4C,EACtD,EAAE,EAAC,oBAAoB,EACvB,qBAAqB,EAAE,IAAI,EAC3B,IAAI,EAAE,gBAAgB,CAAC,CAAC,IAEvB,gBAAgB,CACI,CACtB,CAAC;AACH,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IAGlC,OAAO,CACN,6BAAK,SAAS,EAAC,2BAA2B,EAAC,EAAE,EAAC,WAAW;QACxD,oBAAC,kBAAkB,OAAG,CACjB,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\nimport { useEffect, useState } from \"react\";\r\n// @ts-ignore: react-dragula type declaration file is not available in NPM\r\n// @ts-ignore: dom-autoscroller type declaration file is not available in NPM\r\nimport autoscroller from \"dom-autoscroller\";\r\nimport { useFavoritesShell } from \"../../hooks/useFavoritesShell\";\r\nimport \"../../ui-assets/css/favorites.css\";\r\nimport { Icon } from \"../icon/Icon\";\r\nimport { FinsembleDnDContext, AllowableDnDAxis } from \"../legacyControls/FinsembleDnDContext\";\r\nimport { FinsembleDraggable } from \"../legacyControls/FinsembleDraggable\";\r\n\r\n/*\r\n *  The component that loads and renders all the favorited items.\r\n */\r\nconst FavoritesComponent = () => {\r\n\tconst { favorites, triggerFavorite, removeFavorite, setFavoritesOrder } = useFavoritesShell();\r\n\r\n\t// When user is reordering the favorite items in the UI, we need to keep track to this new order and persist the order information.\r\n\t// This function gets all the favorite item elements in the correct order and call the hook function to set and persist this order.\r\n\tconst reorder = ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => {\r\n\t\tsetFavoritesOrder({ oldIndex, newIndex });\r\n\t};\r\n\r\n\t// Delete a favorite item from the toolbar\r\n\tconst triggerRemoveFavorite = (event: React.MouseEvent<HTMLElement>, id: string) => {\r\n\t\tevent.stopPropagation();\r\n\t\tremoveFavorite(id);\r\n\t};\r\n\r\n\tconst nameLengthCheckPoint = (name: string) => (name.length > 24 ? `${name.substring(0, 25)}...` : name);\r\n\r\n\tconst favoriteElements = favorites.map(({ id, name, icon, category }, index) => (\r\n\t\t<FinsembleDraggable\r\n\t\t\tdraggableId={id}\r\n\t\t\tindex={index}\r\n\t\t\tkey={id}\r\n\t\t\twrapperClass=\"finsemble-toolbar-button\"\r\n\t\t\tonClick={() => triggerFavorite(id, category)}\r\n\t\t>\r\n\t\t\t<Icon category={category} {...icon} />\r\n\t\t\t<div className=\"finsemble-toolbar-button-label\" title={name}>\r\n\t\t\t\t{nameLengthCheckPoint(name)}\r\n\t\t\t</div>\r\n\t\t\t<i\r\n\t\t\t\ttitle=\"Unfavorite\"\r\n\t\t\t\tonClick={(event) => triggerRemoveFavorite(event, id)}\r\n\t\t\t\tid=\"toolbar-delete\"\r\n\t\t\t\tclassName=\"ff-close-3\"\r\n\t\t\t></i>\r\n\t\t</FinsembleDraggable>\r\n\t));\r\n\treturn (\r\n\t\t<FinsembleDnDContext\r\n\t\t\tonDragEnd={reorder}\r\n\t\t\tclassName=\"finsemble-toolbar-section rearrange-region\"\r\n\t\t\tid=\"favoritesContainer\"\r\n\t\t\tallowHorizontalScroll={true}\r\n\t\t\taxis={AllowableDnDAxis.x}\r\n\t\t>\r\n\t\t\t{favoriteElements}\r\n\t\t</FinsembleDnDContext>\r\n\t);\r\n};\r\n\r\n/**\r\n * The FavoritesShell renders the favorite component, which displays all the favorited items and allows the user\r\n * to launch, reorder, or delete a favorited item.\r\n */\r\nexport const FavoritesShell = () => {\r\n\t// When user scrolls to one end of the favorite list, the corresponding variable will be set to \"false\" so that the scrolling indicator will grey out\r\n\r\n\treturn (\r\n\t\t<div className=\"finsemble-toolbar-section\" id=\"fav-shell\">\r\n\t\t\t<FavoritesComponent />\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"FavoritesShell.js","sourceRoot":"","sources":["../../../../../src/ui/components/favorites/FavoritesShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,gCAAgC,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE1E;;GAEG;AACH,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC/B,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAE9F,mIAAmI;IACnI,mIAAmI;IACnI,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAA0C,EAAE,EAAE;QAClF,iBAAiB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,0CAA0C;IAC1C,MAAM,qBAAqB,GAAG,CAC7B,KAAuE,EACvE,EAAU,EACT,EAAE;QACH,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,cAAc,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAEzG,MAAM,gBAAgB,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/E,oBAAC,kBAAkB,IAClB,WAAW,EAAE,EAAE,EACf,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,EAAE,EACP,YAAY,EAAC,0BAA0B,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,EAAE,EAAE,QAAQ,CAAC,EAC5C,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACvB,qBAAqB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;aAC7B;QACF,CAAC;QAED,oBAAC,IAAI,kBAAC,QAAQ,EAAE,QAAQ,IAAM,IAAI,EAAI;QACtC,6BAAK,SAAS,EAAC,gCAAgC,EAAC,KAAK,EAAE,IAAI,IACzD,oBAAoB,CAAC,IAAI,CAAC,CACtB;QACN,2BACC,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,EAAE,CAAC,EACpD,EAAE,EAAC,gBAAgB,EACnB,SAAS,EAAC,YAAY,GAClB,CACe,CACrB,CAAC,CAAC;IACH,OAAO,CACN,oBAAC,mBAAmB,IACnB,SAAS,EAAE,OAAO,EAClB,SAAS,EAAC,4CAA4C,EACtD,EAAE,EAAC,oBAAoB,EACvB,qBAAqB,EAAE,IAAI,EAC3B,IAAI,EAAE,gBAAgB,CAAC,CAAC,IAEvB,gBAAgB,CACI,CACtB,CAAC;AACH,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC;AACnC,qJAAqJ;AAErJ,6BAAK,SAAS,EAAC,2BAA2B,EAAC,EAAE,EAAC,WAAW;IACxD,oBAAC,kBAAkB,OAAG,CACjB,CACN,CAAC"}

package/react/components/fdc3Resolver/ResolverContainer.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * Scrim management is handled by the "ux" slice of the window service's redux store.
+ */
+export declare const getStore: () => import("@reduxjs/toolkit").EnhancedStore<any, import("redux").AnyAction, [import("redux-thunk").ThunkMiddleware<any, import("redux").AnyAction, undefined>], import("redux").StoreEnhancer<{
+    dispatch: import("../../../common/redux/types").PromiseDispatch;
+}, {}>[]>;
+export declare const ResolverContainer: () => JSX.Element;
+//# sourceMappingURL=ResolverContainer.d.ts.map

package/react/components/fdc3Resolver/ResolverContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResolverContainer.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/fdc3Resolver/ResolverContainer.tsx"],"names":[],"mappings":";AAiBA;;GAEG;AACH,eAAO,MAAM,QAAQ;;SAC6E,CAAC;AAUnG,eAAO,MAAM,iBAAiB,mBAoG7B,CAAC"}

package/react/components/fdc3Resolver/ResolverContainer.js

@@ -0,0 +1,99 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React, { useState } from "react";
+import { reduxContext, useDispatch } from "../FinsembleProvider";
+import { Provider } from "react-redux";
+import { ResolverDialog } from "./ResolverDialog";
+import { FEAGlobals } from "../../../common/Globals";
+import { useTitle } from "../../hooks/useTitle";
+import { getRemoteStore } from "../../../common/redux/getRemoteStore";
+import { emptyStore } from "../../../platform/services/window/modules/actions";
+import { actions } from "../../../platform/services/window/modules/actions";
+import { useFloatingFocus } from "../../hooks/useFloatingFocus";
+/**
+ * Scrim management is handled by the "ux" slice of the window service's redux store.
+ */
+export const getStore = () => getRemoteStore({ server: "@@finsemble/remoteRedux/WindowServiceStore", slice: "ux", emptyStore });
+let windowIdentifier = null;
+export const ResolverContainer = () => {
+    const dispatch = useDispatch();
+    const [firstLoad, setFirstLoad] = useState(true);
+    const [intentRaiser, setIntentRaiser] = useState("");
+    const [sendCallback, setSendCallback] = useState(() => { });
+    const [cancelCallback, setCancelCallback] = useState(() => { });
+    const [resolutionList, setResolutionList] = useState([]);
+    const [showRememberCheckbox, setShowRememberCheckbox] = useState(false);
+    useFloatingFocus();
+    useTitle("Resolver");
+    const hideScrim = () => {
+        // @ts-ignore
+        dispatch(actions.hideScrim());
+    };
+    const reset = () => {
+        hideScrim();
+        FEAGlobals.finsembleWindow.hide();
+        setIntentRaiser("");
+        setResolutionList([]);
+    };
+    const handleChoices = async (choices) => {
+        var _a;
+        setIntentRaiser((_a = choices.originatingAppName) !== null && _a !== void 0 ? _a : "");
+        setResolutionList(choices.resolutionList);
+        if (windowIdentifier && choices.originatingAppWindow) {
+            FEAGlobals.FSBL.Clients.LauncherClient.showWindow(windowIdentifier, {
+                position: "relative",
+                relativeWindow: { windowName: choices.originatingAppWindow },
+                top: "center",
+                left: "center",
+            });
+        }
+        else {
+            FEAGlobals.finsembleWindow.show();
+        }
+        FEAGlobals.finsembleWindow.focus();
+    };
+    // We want to register as an IntentResolverListener, but we only want to register once
+    // However, the IntentResolverListener handler needs to have access to this component's states
+    // So, this block will register the listener, and then never be called again
+    if (firstLoad) {
+        setFirstLoad(false);
+        FEAGlobals.FSBL.Clients.ConfigClient.get(["finsemble", "servicesConfig", "interop", "allowResolverToRemember"], (err, response) => {
+            setShowRememberCheckbox(response !== undefined ? response : true);
+        });
+        FEAGlobals.FSBL.Clients.LauncherClient.getMyWindowIdentifier((win) => {
+            windowIdentifier = win;
+        });
+        // Catches alt-tab and other actions that take focus away from the window
+        window.addEventListener("blur", () => {
+            hideScrim();
+        });
+        // Sets up the response handlers which send choices, or cancellations, back to the interop service.
+        // It is the act of resolving or rejecting which sends the choice/cancellation back to the interop service.
+        // Note that the second parameter to setState() takes a double function to avoid reductive functional updates
+        // https://reactjs.org/docs/hooks-reference.html#functional-updates
+        const intentResolverHandler = (choices) => new Promise((resolve, reject) => {
+            handleChoices(choices);
+            setSendCallback(() => (result) => {
+                reset();
+                // originatingAppName and originatingAppWindow returned to support auto-associate
+                result.originatingAppName = choices.originatingAppName;
+                result.originatingAppWindow = choices.originatingAppWindow;
+                resolve(result);
+            });
+            setCancelCallback(() => () => {
+                reset();
+                reject({ err: "Cancelled by user" });
+            });
+        });
+        FEAGlobals.FSBL.internal.interopAdmin.registerUIResolverListener(intentResolverHandler).then(() => { });
+        reset();
+    }
+    return (React.createElement(Provider, { context: reduxContext, store: getStore() },
+        React.createElement(ResolverDialog, { intentRaiser: intentRaiser, resolutionList: resolutionList, onSend: (selected) => {
+                FEAGlobals.FSBL.Clients.Logger.system.log(`tag:FDC3:raiseIntent UI Resolver selected for intent`, selected);
+                sendCallback(selected);
+            }, onCancel: cancelCallback, showRememberCheckbox: showRememberCheckbox })));
+};
+//# sourceMappingURL=ResolverContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResolverContainer.js","sourceRoot":"","sources":["../../../../../src/ui/components/fdc3Resolver/ResolverContainer.tsx"],"names":[],"mappings":"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"}

package/react/components/fdc3Resolver/ResolverDialog.css

@@ -0,0 +1,127 @@
+body {
+	background-color: var(--core-primary-2);
+	margin: 0;
+}
+
+.resolverDialog {
+	padding: 30px;
+	margin: 0;
+	overflow: hidden;
+}
+
+.resolverDialog h1 {
+	margin-top: 0;
+}
+
+.resolverDialog .heading {
+	margin-top: 24px;
+	margin-bottom: 2px;
+}
+
+.resolverDialog .action-picker label {
+	display: block;
+}
+
+.resolverDialog select {
+	margin-top: 8px;
+	background-color: var(--core-primary-1);
+	color: var(--font-color);
+	padding: 2px;
+}
+
+.resolverDialog .toggle-text-label {
+	width: 150px;
+	padding: 4px;
+	text-align: center;
+	color: var(--accent-primary);
+}
+
+.resolverDialog .finsembleToggleButtonBar {
+	position: relative;
+	top: -10px;
+}
+
+.resolverDialog .toggle-text-label[aria-checked="true"] {
+	color: var(--core-primary-1);
+}
+
+.resolverDialog .toggle-text-label-wrapper {
+	max-width: fit-content;
+}
+
+.app-list {
+	overflow-y: scroll;
+	max-height: 125px;
+}
+
+.app-list ol {
+	counter-reset: item;
+	list-style: none;
+	margin-top: 0;
+	margin-bottom: 0;
+	padding-left: 0;
+	position: relative;
+	top: -5px;
+}
+
+.app-list ol li {
+	display: block;
+	padding-left: 40px;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	border-radius: 4px;
+	cursor: pointer;
+	margin-right: 6px;
+}
+
+.app-list li:hover {
+	background-color: var(--core-primary-4);
+}
+
+.app-list li[aria-selected="true"] {
+	border: 2px solid var(--font-color);
+}
+
+.app-list ol li::before {
+	content: counter(item) " - ";
+	counter-increment: item;
+}
+
+.action-row {
+	position: absolute;
+	bottom: 20px;
+	right: 30px;
+}
+
+.action-row div + div {
+	margin-left: 10px;
+}
+
+.resolverDialog .checkbox-wrapper {
+	position: relative;
+	top: -10px;
+}
+
+::-webkit-scrollbar {
+	width: 6px;
+}
+
+/* Track */
+
+::-webkit-scrollbar-track {
+	background: var(--core-primary);
+}
+
+/* Handle */
+
+::-webkit-scrollbar-thumb {
+	background: var(--core-primary-4);
+	border-radius: 6px;
+	width: 4px;
+}
+
+/* Handle on hover */
+
+::-webkit-scrollbar-thumb:hover {
+	background: var(--core-primary-5);
+}

package/react/components/fdc3Resolver/ResolverDialog.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { ResolutionList } from "../../../clients/Interop/types";
+import "./ResolverDialog.css";
+declare type openApp = {
+    name: string;
+    id: string;
+};
+export declare type ReceivingAppType = {
+    name: string;
+    open: openApp[];
+};
+export declare type ResolverProps = {
+    intentRaiser: string;
+    onSend: any;
+    onCancel: any;
+    resolutionList?: ResolutionList[];
+    itemHover?: (windowName: string) => Promise<void>;
+    itemBlur?: (windowName: string) => Promise<void>;
+    showRememberCheckbox?: boolean;
+};
+/**
+ * The showScrim/hideScrim logic is unconventional because of the UX needs. In order to display a scrim on top of AOT windows
+ * it is necessary to temporarily bring the scrim to the front of the z-index order. When that occurs, this resolver window
+ * loses its focus, trigging onmouseout events. This means that we cannot hide a window with a simple onmouseout event. Instead,
+ * we use an onmouseout event on the _surrounding_ DIV to trigger the hideScrim (i.e. if the user moves their mouse outside
+ * of a valid selection then a hideScrim event will trigger).
+ *
+ * The window service's redux store contains the back end for scrim management.
+ */
+export declare const ResolverDialog: ({ intentRaiser, onSend, onCancel, resolutionList, showRememberCheckbox, }: ResolverProps) => JSX.Element;
+export {};
+//# sourceMappingURL=ResolverDialog.d.ts.map

package/react/components/fdc3Resolver/ResolverDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResolverDialog.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/fdc3Resolver/ResolverDialog.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAuB,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAOrF,OAAO,sBAAsB,CAAC;AAE9B,aAAK,OAAO,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,EAAE,CAAC;CAChB,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,cAAc,EAAE,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjD,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,8EAMxB,aAAa,gBAyNf,CAAC"}