@finsemble/finsemble-ui 1.0.0-beta-1

package/react/components/notifications/icons/EnvelopeClose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvelopeClose.js","sourceRoot":"","sources":["../../../../src/components/notifications/icons/EnvelopeClose.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAU;IACnD,MAAM,cAAc,GAAG,kBAAkB,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;IACxE,OAAO,CACN,6BAAK,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,IAAI,WAAW;QACzG,6BAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;YACjF,2BAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS;gBAChC,2BAAG,IAAI,EAAC,SAAS;oBAChB;wBACC,8BACC,CAAC,EAAC,6HAA6H,EAC/H,SAAS,EAAC,qCAAqC,GAC9C;wBACF,8BACC,CAAC,EAAC,+SAA+S,EACjT,SAAS,EAAC,qCAAqC,GAC9C,CACC,CACD,CACD,CACC,CACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import * as React from \"react\";\nexport default function EnvelopeCloseIcon(props: any) {\n\tconst wrapperClasses = `finsemble-icon ${props.className || \"\"}`.trim();\n\treturn (\n\t\t<div className={wrapperClasses} onClick={() => props.onClickHandler()} title={props.tooltip || \"Mark Read\"}>\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"12\" viewBox=\"0 0 18 12\">\n\t\t\t\t<g fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t\t<g fill=\"#ACB2C0\">\n\t\t\t\t\t\t<g>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M14.604 3.676c.914 0 1.655-.74 1.655-1.656 0-.914-.741-1.655-1.655-1.655s-1.655.741-1.655 1.655c0 .915.74 1.656 1.655 1.656\"\n\t\t\t\t\t\t\t\ttransform=\"translate(-8 -12) translate(8.8 12)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M14.131 4.575v5.582H1.36V3.11l6.338 3.737 5.11-2.933c-.238-.237-.427-.473-.569-.757l-4.54 2.65-5.44-3.265h9.838c-.047-.142-.047-.33-.047-.52s0-.332.047-.52H1.311c-.52 0-.946.425-.946.945V10.11c0 .52.426.945.946.945h12.867c.52 0 .946-.425.946-.945V4.575c-.189.047-.33.047-.52.047-.142 0-.33 0-.473-.047\"\n\t\t\t\t\t\t\t\ttransform=\"translate(-8 -12) translate(8.8 12)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t</g>\n\t\t\t</svg>\n\t\t</div>\n\t);\n}\n"]}

package/react/components/notifications/icons/EnvelopeOpen.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function EnvelopeOpenIcon(props: any): JSX.Element;

package/react/components/notifications/icons/EnvelopeOpen.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+export default function EnvelopeOpenIcon(props) {
+    const wrapperClasses = `finsemble-icon ${props.className || ""}`.trim();
+    return (React.createElement("div", { className: wrapperClasses, onClick: () => props.onClickHandler(), title: props.tooltip || "Mark Read" },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16" },
+            React.createElement("g", { fill: "none", fillRule: "evenodd" },
+                React.createElement("g", { fill: "#ACB2C0" },
+                    React.createElement("g", null,
+                        React.createElement("path", { d: "M15.717 5.444c-.1-.099-.794-.546-.794-.546L8.223.481l-6.75 4.466s-.445.25-.495.298c-.298.2-.496.497-.496.894v8.039c0 .546.446.993.992.993h13.499c.546 0 .993-.447.993-.993V6.14c0-.298-.1-.497-.25-.695zM8.224 1.672l6.303 4.17-6.303 3.671L1.97 5.841l6.254-4.169zm6.699 12.506h-13.4V6.734l6.65 3.921 6.75-3.92V14.177z", transform: "translate(-9 -10) translate(9 10)" })))))));
+}
+//# sourceMappingURL=EnvelopeOpen.js.map

package/react/components/notifications/icons/EnvelopeOpen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvelopeOpen.js","sourceRoot":"","sources":["../../../../src/components/notifications/icons/EnvelopeOpen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAU;IAClD,MAAM,cAAc,GAAG,kBAAkB,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;IACxE,OAAO,CACN,6BAAK,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,IAAI,WAAW;QACzG,6BAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;YACjF,2BAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS;gBAChC,2BAAG,IAAI,EAAC,SAAS;oBAChB;wBACC,8BACC,CAAC,EAAC,2TAA2T,EAC7T,SAAS,EAAC,mCAAmC,GAC5C,CACC,CACD,CACD,CACC,CACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import * as React from \"react\";\nexport default function EnvelopeOpenIcon(props: any) {\n\tconst wrapperClasses = `finsemble-icon ${props.className || \"\"}`.trim();\n\treturn (\n\t\t<div className={wrapperClasses} onClick={() => props.onClickHandler()} title={props.tooltip || \"Mark Read\"}>\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n\t\t\t\t<g fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t\t<g fill=\"#ACB2C0\">\n\t\t\t\t\t\t<g>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M15.717 5.444c-.1-.099-.794-.546-.794-.546L8.223.481l-6.75 4.466s-.445.25-.495.298c-.298.2-.496.497-.496.894v8.039c0 .546.446.993.992.993h13.499c.546 0 .993-.447.993-.993V6.14c0-.298-.1-.497-.25-.695zM8.224 1.672l6.303 4.17-6.303 3.671L1.97 5.841l6.254-4.169zm6.699 12.506h-13.4V6.734l6.65 3.921 6.75-3.92V14.177z\"\n\t\t\t\t\t\t\t\ttransform=\"translate(-9 -10) translate(9 10)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t</g>\n\t\t\t</svg>\n\t\t</div>\n\t);\n}\n"]}

package/react/components/notifications/icons/SnoozeIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function SnoozeIcon(props: any): JSX.Element;

package/react/components/notifications/icons/SnoozeIcon.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+export default function SnoozeIcon(props) {
+    const wrapperClasses = `finsemble-icon ${props.className || ""}`.trim();
+    return (React.createElement("div", { className: wrapperClasses, onClick: () => props.onClickHandler(), title: props.tooltip || "Dismiss" },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "20", viewBox: "0 0 18 20" },
+            React.createElement("g", { fill: "none", fillRule: "evenodd" },
+                React.createElement("g", { fill: "#ACB2C0", fillRule: "nonzero" },
+                    React.createElement("g", null,
+                        React.createElement("path", { d: "M11.938 12.757c0 .365.156.678.364.939L13.603 15v.365s0 .052-.052.052H1.945s-.052 0-.052-.052v-.417l1.249-1.252c.26-.261.364-.574.364-.94V7.905C3.506 5.61 5.38 3.73 7.67 3.73c2.082 0 3.851 1.566 4.111 3.6h1.406C12.927 4.826 11 2.791 8.45 2.478V.808C8.45.705 8.346.6 8.242.6H7.41C7.306.6 7.2.704 7.2.809v1.67c-2.758.312-4.788 2.608-4.788 5.425v4.905L1.164 14.06C.904 14.32.8 14.635.8 15v.365c0 .73.572 1.305 1.301 1.305H5.38c.26 1.095 1.197 1.93 2.342 1.93s2.134-.783 2.342-1.93h3.435c.729 0 1.301-.574 1.301-1.305V15c0-.365-.156-.678-.364-.94l-1.25-1.251v-.052h-1.248zm-4.164 4.539c-.416 0-.833-.261-.989-.626h2.03c-.26.417-.625.626-1.041.626z", transform: "translate(-9 -34) translate(9.2 34.4)" }),
+                        React.createElement("g", null,
+                            React.createElement("path", { d: "M3.809 1.05L3.809 1.05 3.809.4.522.4.522 1.25 2.609 1.25.47 4.1.47 4.1.47 4.75 3.913 4.75 3.913 3.95 1.722 3.95zM7.67 2L7.67 1.35 5.061 1.35 5.061 2.15 6.522 2.15 4.957 4.15 4.957 4.15 4.957 4.7 7.722 4.7 7.722 3.95 6.209 3.95zM10.017 3.95L11.53 2 11.53 1.35 8.922 1.35 8.922 2.15 10.383 2.15 8.817 4.15 8.817 4.15 8.817 4.7 11.583 4.7 11.583 3.95z", transform: "translate(-9 -34) translate(9.2 34.4) translate(4.8 7.6)" }))))))));
+}
+//# sourceMappingURL=SnoozeIcon.js.map

package/react/components/notifications/icons/SnoozeIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnoozeIcon.js","sourceRoot":"","sources":["../../../../src/components/notifications/icons/SnoozeIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAU;IAC5C,MAAM,cAAc,GAAG,kBAAkB,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;IACxE,OAAO,CACN,6BAAK,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,IAAI,SAAS;QACvG,6BAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;YACjF,2BAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS;gBAChC,2BAAG,IAAI,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS;oBACnC;wBACC,8BACC,CAAC,EAAC,ooBAAooB,EACtoB,SAAS,EAAC,uCAAuC,GAChD;wBACF;4BACC,8BACC,CAAC,EAAC,8VAA8V,EAChW,SAAS,EAAC,0DAA0D,GACnE,CACC,CACD,CACD,CACD,CACC,CACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import * as React from \"react\";\nexport default function SnoozeIcon(props: any) {\n\tconst wrapperClasses = `finsemble-icon ${props.className || \"\"}`.trim();\n\treturn (\n\t\t<div className={wrapperClasses} onClick={() => props.onClickHandler()} title={props.tooltip || \"Dismiss\"}>\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"20\" viewBox=\"0 0 18 20\">\n\t\t\t\t<g fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t\t<g fill=\"#ACB2C0\" fillRule=\"nonzero\">\n\t\t\t\t\t\t<g>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M11.938 12.757c0 .365.156.678.364.939L13.603 15v.365s0 .052-.052.052H1.945s-.052 0-.052-.052v-.417l1.249-1.252c.26-.261.364-.574.364-.94V7.905C3.506 5.61 5.38 3.73 7.67 3.73c2.082 0 3.851 1.566 4.111 3.6h1.406C12.927 4.826 11 2.791 8.45 2.478V.808C8.45.705 8.346.6 8.242.6H7.41C7.306.6 7.2.704 7.2.809v1.67c-2.758.312-4.788 2.608-4.788 5.425v4.905L1.164 14.06C.904 14.32.8 14.635.8 15v.365c0 .73.572 1.305 1.301 1.305H5.38c.26 1.095 1.197 1.93 2.342 1.93s2.134-.783 2.342-1.93h3.435c.729 0 1.301-.574 1.301-1.305V15c0-.365-.156-.678-.364-.94l-1.25-1.251v-.052h-1.248zm-4.164 4.539c-.416 0-.833-.261-.989-.626h2.03c-.26.417-.625.626-1.041.626z\"\n\t\t\t\t\t\t\t\ttransform=\"translate(-9 -34) translate(9.2 34.4)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<g>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M3.809 1.05L3.809 1.05 3.809.4.522.4.522 1.25 2.609 1.25.47 4.1.47 4.1.47 4.75 3.913 4.75 3.913 3.95 1.722 3.95zM7.67 2L7.67 1.35 5.061 1.35 5.061 2.15 6.522 2.15 4.957 4.15 4.957 4.15 4.957 4.7 7.722 4.7 7.722 3.95 6.209 3.95zM10.017 3.95L11.53 2 11.53 1.35 8.922 1.35 8.922 2.15 10.383 2.15 8.817 4.15 8.817 4.15 8.817 4.7 11.583 4.7 11.583 3.95z\"\n\t\t\t\t\t\t\t\t\ttransform=\"translate(-9 -34) translate(9.2 34.4) translate(4.8 7.6)\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t</g>\n\t\t\t</svg>\n\t\t</div>\n\t);\n}\n"]}

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

@@ -0,0 +1,8 @@
+export { NotificationsCenter } from "./components/notificationsCenter/NotificationsCenter";
+export { NotificationsToasts } from "./components/notificationsToasts/NotificationsToasts";
+export { NotificationCardShell, NotificationCardPropType } from "./components/shared/NotificationCardShell";
+export { NotificationCardHeaderShell } from "./components/shared/notificationCard/NotificationCardHeaderShell";
+export { NotificationCardHeaderLogo } from "./components/shared/notificationCard/NotificationCardHeaderLogo";
+export { NotificationCardBodyShell } from "./components/shared/notificationCard/NotificationCardBodyShell";
+export { NotificationCardBodyContentLogo } from "./components/shared/notificationCard/NotificationCardBodyContentLogo";
+export { NotificationListRowShell, NotificationListRowPropType } from "./components/views/ListView";

package/react/components/notifications/index.js

@@ -0,0 +1,9 @@
+export { NotificationsCenter } from "./components/notificationsCenter/NotificationsCenter";
+export { NotificationsToasts } from "./components/notificationsToasts/NotificationsToasts";
+export { NotificationCardShell } from "./components/shared/NotificationCardShell";
+export { NotificationCardHeaderShell } from "./components/shared/notificationCard/NotificationCardHeaderShell";
+export { NotificationCardHeaderLogo } from "./components/shared/notificationCard/NotificationCardHeaderLogo";
+export { NotificationCardBodyShell } from "./components/shared/notificationCard/NotificationCardBodyShell";
+export { NotificationCardBodyContentLogo } from "./components/shared/notificationCard/NotificationCardBodyContentLogo";
+export { NotificationListRowShell } from "./components/views/ListView";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/notifications/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,qBAAqB,EAA4B,MAAM,2CAA2C,CAAC;AAC5G,OAAO,EAAE,2BAA2B,EAAE,MAAM,kEAAkE,CAAC;AAC/G,OAAO,EAAE,0BAA0B,EAAE,MAAM,iEAAiE,CAAC;AAC7G,OAAO,EAAE,yBAAyB,EAAE,MAAM,gEAAgE,CAAC;AAC3G,OAAO,EAAE,+BAA+B,EAAE,MAAM,sEAAsE,CAAC;AACvH,OAAO,EAAE,wBAAwB,EAA+B,MAAM,6BAA6B,CAAC","sourcesContent":["export { NotificationsCenter } from \"./components/notificationsCenter/NotificationsCenter\";\nexport { NotificationsToasts } from \"./components/notificationsToasts/NotificationsToasts\";\nexport { NotificationCardShell, NotificationCardPropType } from \"./components/shared/NotificationCardShell\";\nexport { NotificationCardHeaderShell } from \"./components/shared/notificationCard/NotificationCardHeaderShell\";\nexport { NotificationCardHeaderLogo } from \"./components/shared/notificationCard/NotificationCardHeaderLogo\";\nexport { NotificationCardBodyShell } from \"./components/shared/notificationCard/NotificationCardBodyShell\";\nexport { NotificationCardBodyContentLogo } from \"./components/shared/notificationCard/NotificationCardBodyContentLogo\";\nexport { NotificationListRowShell, NotificationListRowPropType } from \"./components/views/ListView\";\n"]}

package/react/components/notifications/notificationsContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { NotificationsContextType } from "./types";
+/**
+ * We initialize our context with an empty object.
+ * The NotificationsCenter will properly initialize our context at runtime (during the first render).
+ */
+export declare const NotificationsContext: import("react").Context<NotificationsContextType>;

package/react/components/notifications/notificationsContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+/**
+ * We initialize our context with an empty object.
+ * The NotificationsCenter will properly initialize our context at runtime (during the first render).
+ */
+export const NotificationsContext = createContext({});
+//# sourceMappingURL=notificationsContext.js.map

package/react/components/notifications/notificationsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notificationsContext.js","sourceRoot":"","sources":["../../../src/components/notifications/notificationsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA2B,EAA8B,CAAC,CAAC","sourcesContent":["import { createContext } from \"react\";\nimport { NotificationsContextType } from \"./types\";\n\n/**\n * We initialize our context with an empty object.\n * The NotificationsCenter will properly initialize our context at runtime (during the first render).\n */\nexport const NotificationsContext = createContext<NotificationsContextType>({} as NotificationsContextType);\n"]}

package/react/components/notifications/types.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Notification types
+ */
+import React from "react";
+import { ViewMode, SelectionMode } from "./constants";
+import { services } from "@finsemble/finsemble-api";
+declare type INotification = services.notification.types.INotification;
+declare type INotificationHistoryOptions = services.notification.types.INotificationHistoryOptions;
+declare type IMuteFilter = services.notification.types.IMuteFilter;
+declare type IFilter = services.notification.types.IFilter;
+declare type SpawnParams = services.window.types.SpawnParams;
+export interface Control {
+    action: string;
+    label: string;
+    run?: Function;
+}
+export interface NotificationCenterControlsProps {
+    controls: Array<Control>;
+    active?: Control["action"];
+}
+export interface INotificationCenterProps {
+    controls?: NotificationCenterControlsProps;
+    notificationCard?: React.ComponentType<any>;
+    notificationHeaderRow?: React.ComponentType<any>;
+    notificationListRow?: React.ComponentType<any>;
+}
+export interface INotificationToastsProps {
+    notificationCard?: React.ComponentType<any>;
+}
+export interface INotificationDetailProps {
+    notification: INotification;
+}
+export declare type NotificationListViewProps = {
+    notifications: INotification[];
+    notificationListRow?: React.ComponentType<INotificationDetailProps>;
+    notificationHeaderRow?: React.ComponentType<any>;
+};
+export declare type NotificationCardViewProps = {
+    notifications: INotification[];
+    notificationCard?: React.ComponentType<any>;
+};
+export declare type NotificationsContextType = {
+    viewMode: ViewMode;
+    setViewMode: React.Dispatch<React.SetStateAction<ViewMode>>;
+    selectionMode: SelectionMode;
+    setSelectionMode: React.Dispatch<React.SetStateAction<SelectionMode>>;
+    isSelectAll: boolean;
+    setSelectAll: React.Dispatch<React.SetStateAction<boolean>>;
+    drawerControlProps: NotificationCenterControlsProps;
+    setDrawerControlProps: React.Dispatch<React.SetStateAction<NotificationCenterControlsProps>>;
+    selectedNotification: INotification | null;
+    setSelectedNotification: React.Dispatch<React.SetStateAction<INotification | null>>;
+    searchString: string;
+    setSearchString: React.Dispatch<React.SetStateAction<string>>;
+    filteredNotifications: INotification[];
+    checkedNotifications: INotification[];
+    setCheckedNotifications: React.Dispatch<React.SetStateAction<INotification[]>>;
+    setFilteredNotifications: React.Dispatch<React.SetStateAction<INotification[]>>;
+    muteFilters: IMuteFilter[];
+    setMuteFilters: React.Dispatch<React.SetStateAction<IMuteFilter[]>>;
+};
+export interface NotificationsConfig {
+    filter?: {
+        include?: [];
+        exclude?: [];
+    };
+    position?: {};
+    animation?: {
+        displayDuration: number;
+        animateIn: string;
+        animateOut: string;
+    };
+    isTransparent?: boolean;
+    notificationsHistory?: {
+        since?: string;
+        filter?: IFilter;
+        options?: INotificationHistoryOptions;
+    } | boolean;
+    applyMuteFilters?: boolean;
+    windowName: string;
+}
+export interface WindowConfig {
+    window: SpawnParams & NotificationsConfig;
+}
+export declare type OverFlowMenuAction = {
+    name: string;
+    icon: React.ReactElement;
+    action: (notification: INotification) => void;
+    label: string;
+};
+export {};

package/react/components/notifications/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/react/components/notifications/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/notifications/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Notification types\n */\nimport React from \"react\";\nimport { ViewMode, SelectionMode } from \"./constants\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype INotification = services.notification.types.INotification;\ntype INotificationHistoryOptions = services.notification.types.INotificationHistoryOptions;\ntype IMuteFilter = services.notification.types.IMuteFilter;\ntype IFilter = services.notification.types.IFilter;\ntype SpawnParams = services.window.types.SpawnParams;\n\nexport interface Control {\n\taction: string;\n\tlabel: string;\n\trun?: Function;\n}\n\nexport interface NotificationCenterControlsProps {\n\tcontrols: Array<Control>;\n\tactive?: Control[\"action\"];\n}\n\nexport interface INotificationCenterProps {\n\tcontrols?: NotificationCenterControlsProps;\n\tnotificationCard?: React.ComponentType<any>;\n\tnotificationHeaderRow?: React.ComponentType<any>;\n\tnotificationListRow?: React.ComponentType<any>;\n}\n\nexport interface INotificationToastsProps {\n\tnotificationCard?: React.ComponentType<any>;\n}\n\nexport interface INotificationDetailProps {\n\tnotification: INotification;\n}\n\nexport type NotificationListViewProps = {\n\tnotifications: INotification[];\n\tnotificationListRow?: React.ComponentType<INotificationDetailProps>;\n\tnotificationHeaderRow?: React.ComponentType<any>;\n};\n\nexport type NotificationCardViewProps = {\n\tnotifications: INotification[];\n\tnotificationCard?: React.ComponentType<any>; // A custom component used to render a notification\n};\n\nexport type NotificationsContextType = {\n\tviewMode: ViewMode;\n\tsetViewMode: React.Dispatch<React.SetStateAction<ViewMode>>;\n\tselectionMode: SelectionMode;\n\tsetSelectionMode: React.Dispatch<React.SetStateAction<SelectionMode>>;\n\tisSelectAll: boolean;\n\tsetSelectAll: React.Dispatch<React.SetStateAction<boolean>>;\n\tdrawerControlProps: NotificationCenterControlsProps;\n\tsetDrawerControlProps: React.Dispatch<React.SetStateAction<NotificationCenterControlsProps>>;\n\tselectedNotification: INotification | null;\n\tsetSelectedNotification: React.Dispatch<React.SetStateAction<INotification | null>>;\n\tsearchString: string;\n\tsetSearchString: React.Dispatch<React.SetStateAction<string>>;\n\tfilteredNotifications: INotification[];\n\tcheckedNotifications: INotification[];\n\tsetCheckedNotifications: React.Dispatch<React.SetStateAction<INotification[]>>;\n\tsetFilteredNotifications: React.Dispatch<React.SetStateAction<INotification[]>>;\n\tmuteFilters: IMuteFilter[];\n\tsetMuteFilters: React.Dispatch<React.SetStateAction<IMuteFilter[]>>;\n};\n\nexport interface NotificationsConfig {\n\tfilter?: {\n\t\tinclude?: [];\n\t\texclude?: [];\n\t};\n\tposition?: {};\n\tanimation?: {\n\t\tdisplayDuration: number;\n\t\tanimateIn: string;\n\t\tanimateOut: string;\n\t};\n\tisTransparent?: boolean;\n\tnotificationsHistory?: { since?: string; filter?: IFilter; options?: INotificationHistoryOptions } | boolean;\n\tapplyMuteFilters?: boolean;\n\twindowName: string;\n}\n\nexport interface WindowConfig {\n\twindow: SpawnParams & NotificationsConfig;\n}\n\nexport type OverFlowMenuAction = {\n\tname: string;\n\ticon: React.ReactElement;\n\taction: (notification: INotification) => void;\n\tlabel: string;\n};\n"]}

package/react/components/notifications/utils.d.ts

@@ -0,0 +1,16 @@
+import { Control, NotificationCenterControlsProps } from "./types";
+import { services } from "@finsemble/finsemble-api";
+declare type INotification = services.notification.types.INotification;
+declare type IMuteFilter = services.notification.types.IMuteFilter;
+declare type IPerformedAction = services.notification.types.IPerformedAction;
+/**
+ * Simplify this function with optional chaining
+return notification?.actionsHistory?.sort((a: IPerformedAction, b: IPerformedAction) => Date.parse(b.datePerformed) - Date.parse(a.datePerformed))?.[0]
+ */
+export declare const getMostRecentAction: (notification: INotification) => IPerformedAction | null;
+export declare const isNewNotification: (notification: INotification, newNotificationHaloPeriodSeconds: number) => boolean;
+export declare const isReNotification: (notification: INotification, newNotificationHaloPeriodSeconds: number) => boolean;
+export declare const getActiveFilter: (drawerControlProps: NotificationCenterControlsProps) => Control;
+export declare const searchNotifications: (notifications: INotification[], searchTerm: string) => INotification[];
+export declare const getMuteFilterFromNotification: (notification: INotification) => IMuteFilter;
+export {};

package/react/components/notifications/utils.js

@@ -0,0 +1,71 @@
+import { parseISO, differenceInSeconds } from "date-fns";
+/**
+ * Simplify this function with optional chaining
+return notification?.actionsHistory?.sort((a: IPerformedAction, b: IPerformedAction) => Date.parse(b.datePerformed) - Date.parse(a.datePerformed))?.[0]
+ */
+export const getMostRecentAction = (notification) => {
+    if (!notification || !notification.actionsHistory)
+        return null;
+    let actionHistoryArray = [
+        ...notification.actionsHistory.sort((a, b) => Date.parse(b.datePerformed) - Date.parse(a.datePerformed)),
+    ];
+    if (actionHistoryArray.length > 0) {
+        return actionHistoryArray[0];
+    }
+    else {
+        return null;
+    }
+};
+export const isNewNotification = (notification, newNotificationHaloPeriodSeconds) => {
+    const mostRecentAction = getMostRecentAction(notification);
+    if ((mostRecentAction && mostRecentAction.type === "FINSEMBLE:READ") ||
+        notification.isRead ||
+        (notification.actionsHistory && notification.actionsHistory.length > 1)) {
+        return false;
+    }
+    return differenceInSeconds(Date.now(), parseISO(notification.issuedAt)) < newNotificationHaloPeriodSeconds;
+};
+export const isReNotification = (notification, newNotificationHaloPeriodSeconds) => {
+    const mostRecentAction = getMostRecentAction(notification);
+    if (!mostRecentAction || mostRecentAction.type !== "FINSEMBLE:WAKE")
+        return false;
+    return differenceInSeconds(Date.now(), parseISO(mostRecentAction.datePerformed)) < newNotificationHaloPeriodSeconds;
+};
+export const getActiveFilter = (drawerControlProps) => drawerControlProps.controls.filter((control) => control.action === drawerControlProps.active)[0];
+const search = (notification, searchField, searchString) => {
+    if (searchField) {
+        return notification[searchField].toLowerCase().includes(searchString.toLowerCase());
+    }
+    else {
+        return (notification["title"].toLowerCase().includes(searchString.toLowerCase()) ||
+            notification["details"].toLowerCase().includes(searchString.toLowerCase()) ||
+            notification["source"].toLowerCase().includes(searchString.toLowerCase()));
+    }
+    return false;
+};
+export const searchNotifications = (notifications, searchTerm) => [...notifications].filter((notification) => {
+    const searchTermSplit = searchTerm.split(":");
+    if (searchTermSplit.length === 1) {
+        return search(notification, null, searchTermSplit[0].trim());
+    }
+    else {
+        const field = searchTermSplit[0].trim();
+        if (["title", "details", "source"].includes(field) && notification.hasOwnProperty(field)) {
+            return search(notification, field, searchTermSplit[1].trim());
+        }
+        else {
+            return search(notification, null, searchTermSplit[1].trim());
+        }
+    }
+});
+export const getMuteFilterFromNotification = (notification) => {
+    const muteFilter = {};
+    if (notification.source) {
+        muteFilter.source = notification.source;
+    }
+    if (notification.type) {
+        muteFilter.type = notification.type;
+    }
+    return muteFilter;
+};
+//# sourceMappingURL=utils.js.map

package/react/components/notifications/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/notifications/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { parseISO, differenceInSeconds } from \"date-fns\";\n\n// Types\nimport { Control, NotificationCenterControlsProps } from \"./types\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype INotification = services.notification.types.INotification;\ntype IMuteFilter = services.notification.types.IMuteFilter;\ntype IPerformedAction = services.notification.types.IPerformedAction;\n\n/**\n * Simplify this function with optional chaining\nreturn notification?.actionsHistory?.sort((a: IPerformedAction, b: IPerformedAction) => Date.parse(b.datePerformed) - Date.parse(a.datePerformed))?.[0]\n */\nexport const getMostRecentAction = (notification: INotification): IPerformedAction | null => {\n\tif (!notification || !notification.actionsHistory) return null;\n\n\tlet actionHistoryArray = [\n\t\t...notification.actionsHistory.sort(\n\t\t\t(a: IPerformedAction, b: IPerformedAction) => Date.parse(b.datePerformed) - Date.parse(a.datePerformed)\n\t\t),\n\t];\n\n\tif (actionHistoryArray.length > 0) {\n\t\treturn actionHistoryArray[0];\n\t} else {\n\t\treturn null;\n\t}\n};\n\nexport const isNewNotification = (notification: INotification, newNotificationHaloPeriodSeconds: number) => {\n\tconst mostRecentAction = getMostRecentAction(notification);\n\n\tif (\n\t\t(mostRecentAction && mostRecentAction.type === \"FINSEMBLE:READ\") ||\n\t\tnotification.isRead ||\n\t\t(notification.actionsHistory && notification.actionsHistory.length > 1)\n\t) {\n\t\treturn false;\n\t}\n\treturn differenceInSeconds(Date.now(), parseISO(notification.issuedAt)) < newNotificationHaloPeriodSeconds;\n};\n\nexport const isReNotification = (notification: INotification, newNotificationHaloPeriodSeconds: number) => {\n\tconst mostRecentAction = getMostRecentAction(notification);\n\n\tif (!mostRecentAction || mostRecentAction.type !== \"FINSEMBLE:WAKE\") return false;\n\n\treturn differenceInSeconds(Date.now(), parseISO(mostRecentAction.datePerformed)) < newNotificationHaloPeriodSeconds;\n};\n\nexport const getActiveFilter = (drawerControlProps: NotificationCenterControlsProps): Control =>\n\tdrawerControlProps.controls.filter((control: Control) => control.action === drawerControlProps.active)[0];\n\nconst search = (\n\tnotification: INotification,\n\tsearchField: \"title\" | \"details\" | \"source\" | null,\n\tsearchString: string\n): boolean => {\n\tif (searchField) {\n\t\treturn (notification[searchField] as string).toLowerCase().includes(searchString.toLowerCase());\n\t} else {\n\t\treturn (\n\t\t\t(notification[\"title\"] as string).toLowerCase().includes(searchString.toLowerCase()) ||\n\t\t\t(notification[\"details\"] as string).toLowerCase().includes(searchString.toLowerCase()) ||\n\t\t\t(notification[\"source\"] as string).toLowerCase().includes(searchString.toLowerCase())\n\t\t);\n\t}\n\treturn false;\n};\n\nexport const searchNotifications = (notifications: INotification[], searchTerm: string): INotification[] =>\n\t[...notifications].filter((notification) => {\n\t\tconst searchTermSplit = searchTerm.split(\":\");\n\t\tif (searchTermSplit.length === 1) {\n\t\t\treturn search(notification, null, searchTermSplit[0].trim());\n\t\t} else {\n\t\t\tconst field = searchTermSplit[0].trim();\n\t\t\tif ([\"title\", \"details\", \"source\"].includes(field) && notification.hasOwnProperty(field)) {\n\t\t\t\treturn search(notification, field as \"title\" | \"details\" | \"source\" | null, searchTermSplit[1].trim());\n\t\t\t} else {\n\t\t\t\treturn search(notification, null, searchTermSplit[1].trim());\n\t\t\t}\n\t\t}\n\t});\n\nexport const getMuteFilterFromNotification = (notification: INotification): IMuteFilter => {\n\tconst muteFilter: IMuteFilter = {};\n\tif (notification.source) {\n\t\tmuteFilter.source = notification.source;\n\t}\n\tif (notification.type) {\n\t\tmuteFilter.type = notification.type;\n\t}\n\treturn muteFilter;\n};\n"]}

package/react/components/processMonitor/ProcessMonitor.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import "../../assets/css/processMonitor.css";
+/**
+ * The window that shows performance data for applications running in Finsemble, such as CPU and memory usage.
+ */
+export declare const ProcessMonitor: () => JSX.Element;

package/react/components/processMonitor/ProcessMonitor.js

@@ -0,0 +1,101 @@
+import React from "react";
+import { Store, Actions } from "./stores/ProcessMonitorStore";
+import ListHeader from "./components/ListHeader";
+import ProcessStatistics from "./components/ProcessStatistics";
+import ChildWindow from "./components/ChildWindow";
+import { EMPTY_TOTALS, SIMPLE_MODE_STATISTICS, ADVANCED_MODE_STATISTICS } from "./constants";
+import { statReducer, roundDecimalToPrecision, bytesToSize } from "./helpers";
+import "../../assets/css/processMonitor.css";
+import { ViewModeEnums } from "./ProcessMonitorTypes";
+import FloatingFocus from "@q42/floating-focus-a11y";
+// The package FloatingFocus injects a focus indicator that moves around the page, but only for
+// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.
+new FloatingFocus();
+function isAffinityGroupProcess(proc) {
+    return Object.values(proc.statistics.webContents || {}).some((obj) => /Affinity Group/.test(obj.windowName));
+}
+class ProcessMonitorBase extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            processList: [],
+            viewMode: ViewModeEnums.SIMPLE,
+        };
+        this.bindCorrectContext();
+    }
+    bindCorrectContext() {
+        this.onProcessListChanged = this.onProcessListChanged.bind(this);
+        this.onViewModeChanged = this.onViewModeChanged.bind(this);
+    }
+    /**
+     * Handler for when we go from simple to advanced mode, or the opposite.
+     */
+    onViewModeChanged(err, response) {
+        let { value } = response;
+        this.setState({
+            viewMode: value,
+        });
+    }
+    /**
+     * Invoked at minimum, once per second. This listener handles updates that we receive from the system.
+     */
+    onProcessListChanged(err, response) {
+        let { value } = response;
+        this.setState({
+            processList: value,
+        });
+    }
+    componentDidMount() {
+        Actions.initialize(() => {
+            Store === null || Store === void 0 ? void 0 : Store.addListener({ field: "processList" }, this.onProcessListChanged);
+            Store === null || Store === void 0 ? void 0 : Store.addListener({ field: "viewMode" }, this.onViewModeChanged);
+        });
+    }
+    componentWillUnmount() {
+        Store === null || Store === void 0 ? void 0 : Store.removeListener({ field: "processList" }, this.onProcessListChanged);
+        Store === null || Store === void 0 ? void 0 : Store.removeListener({ field: "viewMode" }, this.onViewModeChanged);
+    }
+    render() {
+        if (!Store)
+            return null;
+        // View modes are:
+        // * Simple - Top-level views, showing stats: CPU, Memory
+        // * Advanced - Expanded processes, showing stats: CPU, Memory, Peak Memory, PID
+        // statReducer is an array.reduce function that will sum all of the CPU/memory usage across the app.
+        const totals = this.state.processList.length ? this.state.processList.reduce(statReducer) : EMPTY_TOTALS;
+        return (React.createElement("div", null,
+            React.createElement("div", { className: "process-list-wrapper" },
+                React.createElement(ListHeader, { fields: this.state.viewMode === ViewModeEnums.SIMPLE ? SIMPLE_MODE_STATISTICS : ADVANCED_MODE_STATISTICS }),
+                React.createElement("div", { className: "process-list" }, this.state.processList
+                    .filter((proc) => proc.visible && (!isAffinityGroupProcess(proc) || this.state.viewMode === ViewModeEnums.ADVANCED))
+                    .map((proc, i) => {
+                    var _a;
+                    return (React.createElement("div", { key: i, className: "process" },
+                        React.createElement(ProcessStatistics, { mode: this.state.viewMode, fields: this.state.viewMode === ViewModeEnums.SIMPLE ? SIMPLE_MODE_STATISTICS : ADVANCED_MODE_STATISTICS, stats: proc.statistics }), (_a = proc.childWindows) === null || _a === void 0 ? void 0 :
+                        _a.map((cw, j) => (React.createElement(ChildWindow, { key: j, viewMode: this.state.viewMode, cw: cw })))));
+                }))),
+            React.createElement("div", { className: "bottom-section" },
+                React.createElement("div", { className: "summary-statistics-wrapper" },
+                    React.createElement("div", { className: "summary-statistics-header" }, "Finsemble Total Usage"),
+                    React.createElement("div", { className: "summary-statistics" },
+                        typeof totals.statistics.cpuUsage !== "undefined" && (React.createElement("div", { className: "summary-statistic" },
+                            React.createElement("div", { className: "summary-statistic-label" }, "CPU"),
+                            React.createElement("div", { className: "summary-statistic-number" }, `${roundDecimalToPrecision(totals.statistics.cpuUsage, 2)}%`))),
+                        typeof totals.statistics.workingSetSize !== "undefined" && (React.createElement("div", { className: "summary-statistic" },
+                            React.createElement("div", { className: "summary-statistic-label" }, "Memory"),
+                            React.createElement("div", { className: "summary-statistic-number" }, bytesToSize(totals.statistics.workingSetSize)))))),
+                React.createElement("div", { className: "advanced-button-wrapper" },
+                    React.createElement("div", { className: "fsbl-button advanced-button", onClick: () => {
+                            Actions.toggleViewMode();
+                        }, tabIndex: 0, role: "button", onKeyDown: (e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                                Actions.toggleViewMode();
+                            }
+                        } }, this.state.viewMode === ViewModeEnums.ADVANCED ? "Simple" : "Advanced")))));
+    }
+}
+/**
+ * The window that shows performance data for applications running in Finsemble, such as CPU and memory usage.
+ */
+export const ProcessMonitor = () => React.createElement(ProcessMonitorBase, null);
+//# sourceMappingURL=ProcessMonitor.js.map

package/react/components/processMonitor/ProcessMonitor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessMonitor.js","sourceRoot":"","sources":["../../../src/components/processMonitor/ProcessMonitor.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { Store, Actions } from \"./stores/ProcessMonitorStore\";\nimport ListHeader from \"./components/ListHeader\";\nimport ProcessStatistics from \"./components/ProcessStatistics\";\nimport ChildWindow from \"./components/ChildWindow\";\nimport { EMPTY_TOTALS, SIMPLE_MODE_STATISTICS, ADVANCED_MODE_STATISTICS } from \"./constants\";\nimport { statReducer, roundDecimalToPrecision, bytesToSize } from \"./helpers\";\nimport \"../../assets/css/processMonitor.css\";\nimport { ProcessType, ViewModeEnums, ChildWindowType } from \"./ProcessMonitorTypes\";\nimport { StandardError } from \"@finsemble/finsemble-api/types/types\";\n\nimport FloatingFocus from \"@q42/floating-focus-a11y\";\n// The package FloatingFocus injects a focus indicator that moves around the page, but only for\n// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.\nnew FloatingFocus();\n\ninterface IProps {}\ninterface IState {\n\tprocessList: ProcessType[];\n\tviewMode: ViewModeEnums;\n}\n\nfunction isAffinityGroupProcess(proc: ProcessType) {\n\treturn Object.values(proc.statistics.webContents || {}).some((obj) => /Affinity Group/.test(obj.windowName));\n}\nclass ProcessMonitorBase extends React.Component<IProps, IState> {\n\tconstructor(props: {}) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tprocessList: [],\n\t\t\tviewMode: ViewModeEnums.SIMPLE,\n\t\t};\n\t\tthis.bindCorrectContext();\n\t}\n\n\tbindCorrectContext() {\n\t\tthis.onProcessListChanged = this.onProcessListChanged.bind(this);\n\t\tthis.onViewModeChanged = this.onViewModeChanged.bind(this);\n\t}\n\n\t/**\n\t * Handler for when we go from simple to advanced mode, or the opposite.\n\t */\n\tonViewModeChanged(err: StandardError, response: { value: ViewModeEnums }) {\n\t\tlet { value } = response;\n\t\tthis.setState({\n\t\t\tviewMode: value,\n\t\t});\n\t}\n\n\t/**\n\t * Invoked at minimum, once per second. This listener handles updates that we receive from the system.\n\t */\n\tonProcessListChanged(err: StandardError, response: { value: ProcessType[] }) {\n\t\tlet { value } = response;\n\t\tthis.setState({\n\t\t\tprocessList: value,\n\t\t});\n\t}\n\n\tcomponentDidMount() {\n\t\tActions.initialize(() => {\n\t\t\tStore?.addListener({ field: \"processList\" }, this.onProcessListChanged);\n\t\t\tStore?.addListener({ field: \"viewMode\" }, this.onViewModeChanged);\n\t\t});\n\t}\n\n\tcomponentWillUnmount() {\n\t\tStore?.removeListener({ field: \"processList\" }, this.onProcessListChanged);\n\t\tStore?.removeListener({ field: \"viewMode\" }, this.onViewModeChanged);\n\t}\n\n\trender() {\n\t\tif (!Store) return null;\n\t\t// View modes are:\n\t\t// * Simple - Top-level views, showing stats: CPU, Memory\n\t\t// * Advanced - Expanded processes, showing stats: CPU, Memory, Peak Memory, PID\n\n\t\t// statReducer is an array.reduce function that will sum all of the CPU/memory usage across the app.\n\t\tconst totals = this.state.processList.length ? this.state.processList.reduce(statReducer) : EMPTY_TOTALS;\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<div className=\"process-list-wrapper\">\n\t\t\t\t\t<ListHeader\n\t\t\t\t\t\tfields={this.state.viewMode === ViewModeEnums.SIMPLE ? SIMPLE_MODE_STATISTICS : ADVANCED_MODE_STATISTICS}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"process-list\">\n\t\t\t\t\t\t{/* Filter will remove the hidden processes. Afterwards, map will render the remaining processes in turn. */}\n\t\t\t\t\t\t{this.state.processList\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t(proc) =>\n\t\t\t\t\t\t\t\t\tproc.visible && (!isAffinityGroupProcess(proc) || this.state.viewMode === ViewModeEnums.ADVANCED)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((proc, i) => (\n\t\t\t\t\t\t\t\t<div key={i} className=\"process\">\n\t\t\t\t\t\t\t\t\t{/* Process statistics is the meat of this component. It's the statistics and the child windows. */}\n\t\t\t\t\t\t\t\t\t<ProcessStatistics\n\t\t\t\t\t\t\t\t\t\tmode={this.state.viewMode}\n\t\t\t\t\t\t\t\t\t\tfields={\n\t\t\t\t\t\t\t\t\t\t\tthis.state.viewMode === ViewModeEnums.SIMPLE ? SIMPLE_MODE_STATISTICS : ADVANCED_MODE_STATISTICS\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tstats={proc.statistics}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{proc.childWindows?.map((cw: ChildWindowType, j: number) => (\n\t\t\t\t\t\t\t\t\t\t<ChildWindow key={j} viewMode={this.state.viewMode} cw={cw} />\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"bottom-section\">\n\t\t\t\t\t<div className=\"summary-statistics-wrapper\">\n\t\t\t\t\t\t<div className=\"summary-statistics-header\">Finsemble Total Usage</div>\n\t\t\t\t\t\t<div className=\"summary-statistics\">\n\t\t\t\t\t\t\t{typeof totals.statistics.cpuUsage !== \"undefined\" && (\n\t\t\t\t\t\t\t\t<div className=\"summary-statistic\">\n\t\t\t\t\t\t\t\t\t<div className=\"summary-statistic-label\">CPU</div>\n\t\t\t\t\t\t\t\t\t<div className=\"summary-statistic-number\">{`${roundDecimalToPrecision(\n\t\t\t\t\t\t\t\t\t\ttotals.statistics.cpuUsage,\n\t\t\t\t\t\t\t\t\t\t2\n\t\t\t\t\t\t\t\t\t)}%`}</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{typeof totals.statistics.workingSetSize !== \"undefined\" && (\n\t\t\t\t\t\t\t\t<div className=\"summary-statistic\">\n\t\t\t\t\t\t\t\t\t<div className=\"summary-statistic-label\">Memory</div>\n\t\t\t\t\t\t\t\t\t<div className=\"summary-statistic-number\">{bytesToSize(totals.statistics.workingSetSize)}</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"advanced-button-wrapper\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"fsbl-button advanced-button\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tActions.toggleViewMode();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\tonKeyDown={(e: React.KeyboardEvent) => {\n\t\t\t\t\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\t\t\t\t\t\tActions.toggleViewMode();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.state.viewMode === ViewModeEnums.ADVANCED ? \"Simple\" : \"Advanced\"}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n\n/**\n * The window that shows performance data for applications running in Finsemble, such as CPU and memory usage.\n */\nexport const ProcessMonitor = () => <ProcessMonitorBase />;\n"]}

package/react/components/processMonitor/ProcessMonitorTypes.d.ts

@@ -0,0 +1,26 @@
+import { ProcessInfo } from "@finsemble/finsemble-api/types/FEA";
+export declare enum ViewModeEnums {
+    SIMPLE = "simple",
+    ADVANCED = "advanced"
+}
+export declare type ModeStatsType = {
+    label: string;
+    value: "cpuUsage" | "workingSetSize" | "peakWorkingSetSize" | "processId";
+};
+export declare type ProcessStatisticsType = {
+    statistics: Partial<ProcessInfo>;
+};
+export declare type ProcessType = {
+    visible: boolean;
+    type?: string;
+    childWindows?: ChildWindowType[];
+} & ProcessStatisticsType;
+export declare type ChildWindowType = {
+    type: string;
+    windowName: string;
+    webContentsName: string;
+};
+export declare type SortObjectType = {
+    field: keyof ProcessStatisticsType["statistics"];
+    direction: "ascending" | "descending";
+};

package/react/components/processMonitor/ProcessMonitorTypes.js

@@ -0,0 +1,6 @@
+export var ViewModeEnums;
+(function (ViewModeEnums) {
+    ViewModeEnums["SIMPLE"] = "simple";
+    ViewModeEnums["ADVANCED"] = "advanced";
+})(ViewModeEnums || (ViewModeEnums = {}));
+//# sourceMappingURL=ProcessMonitorTypes.js.map

package/react/components/processMonitor/ProcessMonitorTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessMonitorTypes.js","sourceRoot":"","sources":["../../../src/components/processMonitor/ProcessMonitorTypes.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACxB,kCAAiB,CAAA;IACjB,sCAAqB,CAAA;AACtB,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB","sourcesContent":["import { ProcessInfo } from \"@finsemble/finsemble-api/types/FEA\";\n\nexport enum ViewModeEnums {\n\tSIMPLE = \"simple\",\n\tADVANCED = \"advanced\",\n}\n\nexport type ModeStatsType = {\n\tlabel: string;\n\tvalue: \"cpuUsage\" | \"workingSetSize\" | \"peakWorkingSetSize\" | \"processId\";\n};\n\nexport type ProcessStatisticsType = {\n\tstatistics: Partial<ProcessInfo>;\n};\n\nexport type ProcessType = {\n\tvisible: boolean;\n\ttype?: string;\n\tchildWindows?: ChildWindowType[];\n} & ProcessStatisticsType;\n\nexport type ChildWindowType = {\n\ttype: string;\n\twindowName: string;\n\twebContentsName: string;\n};\n\nexport type SortObjectType = {\n\tfield: keyof ProcessStatisticsType[\"statistics\"];\n\tdirection: \"ascending\" | \"descending\";\n};\n"]}

package/react/components/processMonitor/components/ChildWindow.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ChildWindowType, ViewModeEnums } from "../ProcessMonitorTypes";
+interface IProps {
+    cw: ChildWindowType;
+    viewMode: ViewModeEnums;
+}
+/**
+ * This file is the react component for an individual window beneath a process. It allows the user to close the window.
+ */
+export default class ChildWindow extends React.Component<IProps> {
+    constructor(props: IProps);
+    render(): JSX.Element;
+}
+export {};

package/react/components/processMonitor/components/ChildWindow.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { ViewModeEnums } from "../ProcessMonitorTypes";
+import { Actions } from "../stores/ProcessMonitorStore";
+/**
+ * This file is the react component for an individual window beneath a process. It allows the user to close the window.
+ */
+export default class ChildWindow extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const { cw, viewMode } = this.props;
+        //If we're in simple mode, onClick does nothing. In advanced mode, we'll identify the window by making it flash.
+        const simpleClickHandler = () => { };
+        const advancedClickHandler = () => {
+            Actions.getFlashingState((err, flashState) => {
+                if (err) {
+                    console.error("Error getting current flashing state of window.", err);
+                }
+                // Only begin flashing if not already started
+                if (!flashState) {
+                    Actions.identifyWindow(cw);
+                }
+            });
+        };
+        const cwClickHandler = viewMode === ViewModeEnums.SIMPLE ? simpleClickHandler : advancedClickHandler;
+        const childWindowClasses = `child-window ${viewMode}`;
+        const { windowName } = cw;
+        return (React.createElement("div", { className: childWindowClasses },
+            React.createElement("div", { className: "child-window-actions" }, this.props.cw.type === "window" && (React.createElement("i", { className: "close-window ff-close", onClick: () => {
+                    Actions.closeWindow(windowName);
+                }, tabIndex: 0, role: "button", onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        Actions.closeWindow(windowName);
+                    }
+                } }))),
+            React.createElement("div", { className: "child-window-name", onClick: cwClickHandler }, cw.webContentsName)));
+    }
+}
+//# sourceMappingURL=ChildWindow.js.map

package/react/components/processMonitor/components/ChildWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChildWindow.js","sourceRoot":"","sources":["../../../../src/components/processMonitor/components/ChildWindow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAmB,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAOxD;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAiB;IAC/D,YAAY,KAAa;QACxB,KAAK,CAAC,KAAK,CAAC,CAAC;IACd,CAAC;IAED,MAAM;QACL,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEpC,gHAAgH;QAChH,MAAM,kBAAkB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QACpC,MAAM,oBAAoB,GAAG,GAAG,EAAE;YACjC,OAAO,CAAC,gBAAgB,CAAC,CAAC,GAAkB,EAAE,UAAmB,EAAE,EAAE;gBACpE,IAAI,GAAG,EAAE;oBACR,OAAO,CAAC,KAAK,CAAC,iDAAiD,EAAE,GAAG,CAAC,CAAC;iBACtE;gBAED,6CAA6C;gBAC7C,IAAI,CAAC,UAAU,EAAE;oBAChB,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;iBAC3B;YACF,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,QAAQ,KAAK,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,oBAAoB,CAAC;QAErG,MAAM,kBAAkB,GAAG,gBAAgB,QAAQ,EAAE,CAAC;QACtD,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;QAC1B,OAAO,CACN,6BAAK,SAAS,EAAE,kBAAkB;YACjC,6BAAK,SAAS,EAAC,sBAAsB,IACnC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,KAAK,QAAQ,IAAI,CACnC,2BACC,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAE,GAAG,EAAE;oBACb,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;gBACjC,CAAC,EACD,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAsB,EAAE,EAAE;oBACrC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;wBACvC,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;qBAChC;gBACF,CAAC,GACG,CACL,CACI;YACN,6BAAK,SAAS,EAAC,mBAAmB,EAAC,OAAO,EAAE,cAAc,IACxD,EAAE,CAAC,eAAe,CACd,CACD,CACN,CAAC;IACH,CAAC;CACD","sourcesContent":["import React from \"react\";\nimport { StandardError } from \"@finsemble/finsemble-api/types/types\";\nimport { ChildWindowType, ViewModeEnums } from \"../ProcessMonitorTypes\";\nimport { Actions } from \"../stores/ProcessMonitorStore\";\n\ninterface IProps {\n\tcw: ChildWindowType;\n\tviewMode: ViewModeEnums;\n}\n\n/**\n * This file is the react component for an individual window beneath a process. It allows the user to close the window.\n */\nexport default class ChildWindow extends React.Component<IProps> {\n\tconstructor(props: IProps) {\n\t\tsuper(props);\n\t}\n\n\trender() {\n\t\tconst { cw, viewMode } = this.props;\n\n\t\t//If we're in simple mode, onClick does nothing. In advanced mode, we'll identify the window by making it flash.\n\t\tconst simpleClickHandler = () => {};\n\t\tconst advancedClickHandler = () => {\n\t\t\tActions.getFlashingState((err: StandardError, flashState: boolean) => {\n\t\t\t\tif (err) {\n\t\t\t\t\tconsole.error(\"Error getting current flashing state of window.\", err);\n\t\t\t\t}\n\n\t\t\t\t// Only begin flashing if not already started\n\t\t\t\tif (!flashState) {\n\t\t\t\t\tActions.identifyWindow(cw);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tconst cwClickHandler = viewMode === ViewModeEnums.SIMPLE ? simpleClickHandler : advancedClickHandler;\n\n\t\tconst childWindowClasses = `child-window ${viewMode}`;\n\t\tconst { windowName } = cw;\n\t\treturn (\n\t\t\t<div className={childWindowClasses}>\n\t\t\t\t<div className=\"child-window-actions\">\n\t\t\t\t\t{this.props.cw.type === \"window\" && (\n\t\t\t\t\t\t<i\n\t\t\t\t\t\t\tclassName=\"close-window ff-close\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tActions.closeWindow(windowName);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\tonKeyDown={(e: React.KeyboardEvent) => {\n\t\t\t\t\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\t\t\t\t\t\tActions.closeWindow(windowName);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t></i>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"child-window-name\" onClick={cwClickHandler}>\n\t\t\t\t\t{cw.webContentsName}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/react/components/processMonitor/components/ListHeader.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { SortObjectType, ModeStatsType } from "../ProcessMonitorTypes";
+import { StandardError } from "@finsemble/finsemble-api/types/types";
+interface IProps {
+    fields: ModeStatsType[];
+}
+interface IState {
+    sort: SortObjectType;
+}
+/**
+ * This is the "table header" that shows which columns are visible.
+ * Since we aren't using an HTML table, this component exists.
+ * It handles column display and sorting.
+ **/
+export default class ListHeader extends React.Component<IProps, IState> {
+    constructor(props: IProps);
+    onSortChanged(err: StandardError, response: {
+        value: SortObjectType;
+    }): void;
+    UNSAFE_componentWillMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+export {};