@finsemble/finsemble-ui 7.2.0 → 7.3.0

package/react/components/common/ContextMenu.js

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef, useState } from "react";
+import { applyMenuKeyboardNavigation } from "../menu/keyboardNavigation";
+// Hooks
+import { useOutsideClickDetector } from "../../hooks/useOutsideClickDetector";
+// Icons
+import IconButton from "../notifications/components/shared/IconButton";
+// CSS
+import "../../assets/css/contextMenu.css";
+export const renderContextMenuAction = (message, menuAction, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+isMuted) => {
+    if (menuAction.display) {
+        return (React.createElement("div", { key: `${message === null || message === void 0 ? void 0 : message.id}_${menuAction.name}`, className: "context-menu__action", tabIndex: 0, title: menuAction === null || menuAction === void 0 ? void 0 : menuAction.label, onClick: () => {
+                var _a;
+                (_a = menuAction === null || menuAction === void 0 ? void 0 : menuAction.action) === null || _a === void 0 ? void 0 : _a.call(menuAction, message);
+            }, onKeyDown: (e) => {
+                var _a;
+                if (e.key === "Enter") {
+                    e.stopPropagation();
+                    (_a = menuAction === null || menuAction === void 0 ? void 0 : menuAction.action) === null || _a === void 0 ? void 0 : _a.call(menuAction, message);
+                }
+            } }, menuAction === null || menuAction === void 0 ? void 0 :
+            menuAction.icon,
+            React.createElement("span", { className: "btn-label" }, menuAction === null || menuAction === void 0 ? void 0 : menuAction.label)));
+    }
+};
+/**
+ * Context menu component for notifications that will provide a set of actions
+ * a user can perform on a notification (e.g. dismiss, snooze)
+ */
+const ContextMenu = ({ closeSelf, children }) => {
+    const wrapperRef = useRef(null);
+    const [className, setClassName] = useState("context-menu__container");
+    useOutsideClickDetector(wrapperRef, () => closeSelf(false));
+    const moveElementIntoView = () => {
+        var _a;
+        const bottomViewPort = window.innerHeight + window.scrollY;
+        const domRect = (_a = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const elementBottom = domRect ? domRect.y + domRect.height + window.scrollY : null;
+        const elementLeft = domRect ? domRect.x : null;
+        if (elementBottom && elementBottom > bottomViewPort) {
+            setClassName("context-menu__container flow-up");
+        }
+        if (elementLeft && elementLeft < 0) {
+            setClassName(`${className} flow-right`);
+        }
+    };
+    useEffect(() => {
+        moveElementIntoView();
+    }, [className]);
+    useEffect(() => {
+        window.addEventListener("blur", () => closeSelf(false));
+        return () => {
+            window.removeEventListener("blur", () => closeSelf(false));
+        };
+    }, []);
+    applyMenuKeyboardNavigation(window, ".context-menu__action");
+    return (React.createElement("div", { ref: wrapperRef, className: className }, children));
+};
+const ContextMenuToggle = ({ menuActions, message = null, isMuteFilterApplied = false, }) => {
+    const [contextMenuOpen, setContextMenuOpen] = useState(false);
+    const toggleContextMenu = () => {
+        setContextMenuOpen(!contextMenuOpen);
+    };
+    const menuActionsElements = Object.values(menuActions).map((value) => renderContextMenuAction(message, value, isMuteFilterApplied));
+    return (React.createElement(IconButton, { iconName: "ff-dots-vert", tooltip: "Options", clickHandler: toggleContextMenu }, contextMenuOpen ? React.createElement(ContextMenu, { closeSelf: setContextMenuOpen }, menuActionsElements) : null));
+};
+export default ContextMenuToggle;
+//# sourceMappingURL=ContextMenu.js.map

package/react/components/common/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../../src/components/common/ContextMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from \"react\";\nimport { applyMenuKeyboardNavigation } from \"../menu/keyboardNavigation\";\n\n// Hooks\nimport { useOutsideClickDetector } from \"../../hooks/useOutsideClickDetector\";\n\n// Types\nimport { ContextMenuAction } from \"../notifications/types\";\n\n// Icons\nimport IconButton from \"../notifications/components/shared/IconButton\";\n\n// CSS\nimport \"../../assets/css/contextMenu.css\";\n\nexport interface ContextMenuProps {\n\tmenuActions: {\n\t\t[key: string]: ContextMenuAction;\n\t};\n\tmessage: any;\n\tisMuteFilterApplied: boolean;\n}\n\nexport const renderContextMenuAction = (\n\tmessage: any,\n\tmenuAction: ContextMenuAction,\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tisMuted: boolean\n) => {\n\tif (menuAction.display) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tkey={`${message?.id}_${menuAction.name}`}\n\t\t\t\tclassName=\"context-menu__action\"\n\t\t\t\ttabIndex={0}\n\t\t\t\ttitle={menuAction?.label}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tmenuAction?.action?.(message);\n\t\t\t\t}}\n\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tmenuAction?.action?.(message);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{menuAction?.icon}\n\t\t\t\t<span className=\"btn-label\">{menuAction?.label}</span>\n\t\t\t</div>\n\t\t);\n\t}\n};\n/**\n * Context menu component for notifications that will provide a set of actions\n * a user can perform on a notification (e.g. dismiss, snooze)\n */\nconst ContextMenu: React.FunctionComponent<{\n\tcloseSelf: Dispatch<SetStateAction<boolean>>;\n}> = ({ closeSelf, children }) => {\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\tconst [className, setClassName] = useState(\"context-menu__container\");\n\tuseOutsideClickDetector(wrapperRef, () => closeSelf(false));\n\n\tconst moveElementIntoView = () => {\n\t\tconst bottomViewPort = window.innerHeight + window.scrollY;\n\t\tconst domRect = wrapperRef?.current?.getBoundingClientRect();\n\t\tconst elementBottom = domRect ? domRect.y + domRect.height + window.scrollY : null;\n\t\tconst elementLeft = domRect ? domRect.x : null;\n\n\t\tif (elementBottom && elementBottom > bottomViewPort) {\n\t\t\tsetClassName(\"context-menu__container flow-up\");\n\t\t}\n\n\t\tif (elementLeft && elementLeft < 0) {\n\t\t\tsetClassName(`${className} flow-right`);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tmoveElementIntoView();\n\t}, [className]);\n\n\tuseEffect(() => {\n\t\twindow.addEventListener(\"blur\", () => closeSelf(false));\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"blur\", () => closeSelf(false));\n\t\t};\n\t}, []);\n\n\tapplyMenuKeyboardNavigation(window, \".context-menu__action\");\n\treturn (\n\t\t<div ref={wrapperRef} className={className}>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nconst ContextMenuToggle: React.FunctionComponent<ContextMenuProps> = ({\n\tmenuActions,\n\tmessage = null,\n\tisMuteFilterApplied = false,\n}) => {\n\tconst [contextMenuOpen, setContextMenuOpen] = useState(false);\n\tconst toggleContextMenu = () => {\n\t\tsetContextMenuOpen(!contextMenuOpen);\n\t};\n\tconst menuActionsElements = Object.values(menuActions).map((value) =>\n\t\trenderContextMenuAction(message, value, isMuteFilterApplied)\n\t);\n\n\treturn (\n\t\t<IconButton iconName=\"ff-dots-vert\" tooltip=\"Options\" clickHandler={toggleContextMenu}>\n\t\t\t{contextMenuOpen ? <ContextMenu closeSelf={setContextMenuOpen}>{menuActionsElements}</ContextMenu> : null}\n\t\t</IconButton>\n\t);\n};\n\nexport default ContextMenuToggle;\n"]}

package/react/components/common/DropdownButton.d.ts

@@ -6,9 +6,5 @@ export interface IFinsembleDropdownActionButtonProps {
     buttonOptions: Array<IFinsembleButtonProps>;
     mainAction: Function;
 }
-/**
- * @TODO: Consolidate this and DefaultDropDownButton and change all usages to use DefaultDropDownButton.
- * @deprecated Use DefaultDropDownButton instead.
- */
 declare const DropdownButton: React.FunctionComponent<IFinsembleDropdownActionButtonProps>;
 export default DropdownButton;

package/react/components/common/DropdownButton.js

@@ -1,18 +1,34 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import "../../assets/css/button.css";
 import { useOutsideClickDetector } from "../../hooks/useOutsideClickDetector";
-/**
- * @TODO: Consolidate this and DefaultDropDownButton and change all usages to use DefaultDropDownButton.
- * @deprecated Use DefaultDropDownButton instead.
- */
 const DropdownButton = ({ buttonLabel = "Label", buttonOptions = [], mainAction, }) => {
     const wrapperRef = useRef(null);
     const [expanded, setExpanded] = useState(false);
+    const [className, setClassName] = useState("");
+    const moveElementIntoView = () => {
+        var _a, _b;
+        const bottomViewPort = window.innerHeight + window.scrollY;
+        const domRect = (_b = (_a = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".finsemble-dropdown-action__btn-options")) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        const elementBottom = domRect ? domRect.y + domRect.height + window.scrollY : null;
+        if (elementBottom && elementBottom > bottomViewPort) {
+            setClassName("flow-up");
+        }
+    };
+    useEffect(() => {
+        if (expanded) {
+            moveElementIntoView();
+        }
+    }, [expanded]);
     useOutsideClickDetector(wrapperRef, () => setExpanded(false));
-    const options = buttonOptions.map((option, index) => (React.createElement("div", { key: index, className: "finsemble-dropdown-action__btn-option", onClick: () => {
+    const options = buttonOptions.map((option, index) => (React.createElement("div", Object.assign({ key: index, className: "finsemble-dropdown-action__btn-option", role: "button", tabIndex: 0, onClick: () => {
             option.clickHandler();
             setExpanded(false);
-        } }, option.buttonLabel)));
+        }, onKeyDown: (e) => {
+            if (e.key === "Enter") {
+                option.clickHandler();
+                setExpanded(false);
+            }
+        } }, (option.buttonLabel ? { "aria-label": option.buttonLabel } : "")), option.buttonLabel)));
     const buttonAction = () => {
         if (expanded) {
             setExpanded(false);
@@ -27,11 +43,24 @@ const DropdownButton = ({ buttonLabel = "Label", buttonOptions = [], mainAction,
     };
     return (React.createElement("div", { ref: wrapperRef, className: "finsemble-dropdown-action__btn-container" },
         React.createElement("div", { className: "finsemble-dropdown-action__btn" },
-            React.createElement("span", { className: "btn-label", onClick: buttonAction }, buttonLabel),
+            React.createElement("span", Object.assign({ className: "btn-label", role: "button", tabIndex: 0, onClick: buttonAction, onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        {
+                            buttonAction;
+                        }
+                    }
+                } }, (buttonLabel ? { "aria-label": buttonLabel } : "")), buttonLabel),
             React.createElement("span", { className: "separator" }),
-            React.createElement("div", { className: "expand-options", onClick: () => setExpanded(!expanded) },
+            React.createElement("div", { className: "expand-options", role: "button", tabIndex: 0, onClick: () => {
+                    setExpanded(!expanded);
+                }, onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        setExpanded(!expanded);
+                        moveElementIntoView();
+                    }
+                }, "aria-label": "expand-options" },
                 React.createElement("span", { className: "caret" }))),
-        expanded ? React.createElement("div", { className: "finsemble-dropdown-action__btn-options" }, options) : null));
+        expanded ? React.createElement("div", { className: `finsemble-dropdown-action__btn-options ${className}` }, options) : null));
 };
 export default DropdownButton;
 //# sourceMappingURL=DropdownButton.js.map

package/react/components/common/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../src/components/common/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,6BAA6B,CAAC;AACrC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAS9E;;;GAGG;AACH,MAAM,cAAc,GAAiE,CAAC,EACrF,WAAW,GAAG,OAAO,EACrB,aAAa,GAAG,EAAE,EAClB,UAAU,GAC2B,EAAE,EAAE;IACzC,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,uBAAuB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9D,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACpD,6BACC,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,uCAAuC,EACjD,OAAO,EAAE,GAAG,EAAE;YACb,MAAM,CAAC,YAAY,EAAE,CAAC;YACtB,WAAW,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,IAEA,MAAM,CAAC,WAAW,CACd,CACN,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ,EAAE;YACb,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,OAAO;SACP;QAED,IAAI,UAAU,EAAE;YACf,UAAU,EAAE,CAAC;SACb;aAAM;YACN,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;SAC7B;IACF,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,0CAA0C;QACzE,6BAAK,SAAS,EAAC,gCAAgC;YAC9C,8BAAM,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,YAAY,IAC/C,WAAW,CACN;YACP,8BAAM,SAAS,EAAC,WAAW,GAAQ;YACnC,6BAAK,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC;gBACpE,8BAAM,SAAS,EAAC,OAAO,GAAQ,CAC1B,CACD;QACL,QAAQ,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,wCAAwC,IAAE,OAAO,CAAO,CAAC,CAAC,CAAC,IAAI,CACrF,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import React, { useState, useRef } from \"react\";\nimport \"../../assets/css/button.css\";\nimport { useOutsideClickDetector } from \"../../hooks/useOutsideClickDetector\";\nimport { IFinsembleButtonProps } from \"../shared/Button\";\n\nexport interface IFinsembleDropdownActionButtonProps {\n\tbuttonLabel: string;\n\tbuttonOptions: Array<IFinsembleButtonProps>;\n\tmainAction: Function;\n}\n\n/**\n * @TODO: Consolidate this and DefaultDropDownButton and change all usages to use DefaultDropDownButton.\n * @deprecated Use DefaultDropDownButton instead.\n */\nconst DropdownButton: React.FunctionComponent<IFinsembleDropdownActionButtonProps> = ({\n\tbuttonLabel = \"Label\",\n\tbuttonOptions = [],\n\tmainAction,\n}: IFinsembleDropdownActionButtonProps) => {\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\tconst [expanded, setExpanded] = useState(false);\n\n\tuseOutsideClickDetector(wrapperRef, () => setExpanded(false));\n\n\tconst options = buttonOptions.map((option, index) => (\n\t\t<div\n\t\t\tkey={index}\n\t\t\tclassName=\"finsemble-dropdown-action__btn-option\"\n\t\t\tonClick={() => {\n\t\t\t\toption.clickHandler();\n\t\t\t\tsetExpanded(false);\n\t\t\t}}\n\t\t>\n\t\t\t{option.buttonLabel}\n\t\t</div>\n\t));\n\n\tconst buttonAction = () => {\n\t\tif (expanded) {\n\t\t\tsetExpanded(false);\n\t\t\treturn;\n\t\t}\n\n\t\tif (mainAction) {\n\t\t\tmainAction();\n\t\t} else {\n\t\t\t() => setExpanded(!expanded);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div ref={wrapperRef} className=\"finsemble-dropdown-action__btn-container\">\n\t\t\t<div className=\"finsemble-dropdown-action__btn\">\n\t\t\t\t<span className=\"btn-label\" onClick={buttonAction}>\n\t\t\t\t\t{buttonLabel}\n\t\t\t\t</span>\n\t\t\t\t<span className=\"separator\"></span>\n\t\t\t\t<div className=\"expand-options\" onClick={() => setExpanded(!expanded)}>\n\t\t\t\t\t<span className=\"caret\"></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{expanded ? <div className=\"finsemble-dropdown-action__btn-options\">{options}</div> : null}\n\t\t</div>\n\t);\n};\n\nexport default DropdownButton;\n"]}
+{"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../src/components/common/DropdownButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport \"../../assets/css/button.css\";\nimport { useOutsideClickDetector } from \"../../hooks/useOutsideClickDetector\";\nimport { IFinsembleButtonProps } from \"../shared/Button\";\n\nexport interface IFinsembleDropdownActionButtonProps {\n\tbuttonLabel: string;\n\tbuttonOptions: Array<IFinsembleButtonProps>;\n\tmainAction: Function;\n}\n\nconst DropdownButton: React.FunctionComponent<IFinsembleDropdownActionButtonProps> = ({\n\tbuttonLabel = \"Label\",\n\tbuttonOptions = [],\n\tmainAction,\n}: IFinsembleDropdownActionButtonProps) => {\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\tconst [expanded, setExpanded] = useState(false);\n\tconst [className, setClassName] = useState(\"\");\n\n\tconst moveElementIntoView = () => {\n\t\tconst bottomViewPort = window.innerHeight + window.scrollY;\n\t\tconst domRect = wrapperRef?.current\n\t\t\t?.querySelector(\".finsemble-dropdown-action__btn-options\")\n\t\t\t?.getBoundingClientRect();\n\t\tconst elementBottom = domRect ? domRect.y + domRect.height + window.scrollY : null;\n\n\t\tif (elementBottom && elementBottom > bottomViewPort) {\n\t\t\tsetClassName(\"flow-up\");\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (expanded) {\n\t\t\tmoveElementIntoView();\n\t\t}\n\t}, [expanded]);\n\n\tuseOutsideClickDetector(wrapperRef, () => setExpanded(false));\n\n\tconst options = buttonOptions.map((option, index) => (\n\t\t<div\n\t\t\tkey={index}\n\t\t\tclassName=\"finsemble-dropdown-action__btn-option\"\n\t\t\trole=\"button\"\n\t\t\ttabIndex={0}\n\t\t\tonClick={() => {\n\t\t\t\toption.clickHandler();\n\t\t\t\tsetExpanded(false);\n\t\t\t}}\n\t\t\tonKeyDown={(e) => {\n\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\toption.clickHandler();\n\t\t\t\t\tsetExpanded(false);\n\t\t\t\t}\n\t\t\t}}\n\t\t\t{...(option.buttonLabel ? { \"aria-label\": option.buttonLabel } : \"\")}\n\t\t>\n\t\t\t{option.buttonLabel}\n\t\t</div>\n\t));\n\n\tconst buttonAction = () => {\n\t\tif (expanded) {\n\t\t\tsetExpanded(false);\n\t\t\treturn;\n\t\t}\n\n\t\tif (mainAction) {\n\t\t\tmainAction();\n\t\t} else {\n\t\t\t() => setExpanded(!expanded);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div ref={wrapperRef} className=\"finsemble-dropdown-action__btn-container\">\n\t\t\t<div className=\"finsemble-dropdown-action__btn\">\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"btn-label\"\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tonClick={buttonAction}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tbuttonAction;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\t{...(buttonLabel ? { \"aria-label\": buttonLabel } : \"\")}\n\t\t\t\t>\n\t\t\t\t\t{buttonLabel}\n\t\t\t\t</span>\n\t\t\t\t<span className=\"separator\"></span>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"expand-options\"\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetExpanded(!expanded);\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\t\t\tsetExpanded(!expanded);\n\t\t\t\t\t\t\tmoveElementIntoView();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\taria-label=\"expand-options\"\n\t\t\t\t>\n\t\t\t\t\t<span className=\"caret\"></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{expanded ? <div className={`finsemble-dropdown-action__btn-options ${className}`}>{options}</div> : null}\n\t\t</div>\n\t);\n};\n\nexport default DropdownButton;\n"]}

package/react/components/common/css/FinsembleToggle.css

@@ -1,5 +1,4 @@
 .finsembleToggleButtonBar {
-	background-color: var(--core-primary);
 	padding: 4px;
 	border-radius: 5px;
 }

package/react/components/common/css/application-edit-page.css

@@ -48,7 +48,6 @@
 
 .app-edit-fieldset label {
 	font-size: 1em;
-	overflow: hidden;
 	text-overflow: ellipsis;
 	user-select: none;
 	font-weight: 600;
@@ -153,7 +152,7 @@ span.unit {
 	margin-right: 8px;
 }
 
-.accordion-edit-block .complex-menu-checkbox-wrapper {
+.accordion-edit-block .checkbox-wrapper {
 	margin-top: 0;
 }
 
@@ -235,8 +234,8 @@ span.unit {
 	color: #f5f6f7;
 }
 
-.accordion-edit-block .complex-menu-checkbox-wrapper,
-.pull-left .complex-menu-checkbox-wrapper {
+.accordion-edit-block .checkbox-wrapper,
+.pull-left .checkbox-wrapper {
 	margin-left: 0;
 }
 

package/react/components/common/css/checkbox.css

@@ -1,30 +1,69 @@
-.complex-menu-checkbox-wrapper {
-	display: flex;
-	align-items: center;
-	margin-top: 8px;
-	margin-left: 12px;
+.checkbox-wrapper label {
+	display: grid;
+	grid-template-columns: 1em auto;
+	gap: 0.5em;
+	cursor: pointer;
 }
 
-.complex-menu-checkbox {
-	border-radius: 2px;
-	width: 14px;
-	height: 14px;
-	margin-right: 8px;
-	border: 1px solid var(--core-primary-4);
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
+.checkbox-wrapper span {
+	margin-left: 4px;
 }
 
-.complex-menu-checkbox-label {
-	display: inline-block;
+.checkbox-wrapper input[type="checkbox"] {
+	cursor: pointer;
+
+	/* Remove native input styles */
+	appearance: none;
+	margin: 0;
+
+	/* Mkae it look like a box */
+	font: inherit;
+	color: var(--font-color);
+	width: 16px;
+	height: 16px;
+	border: 0.12em solid currentcolor;
+	border-radius: 5px;
+
+	/* Bump it down slightly so that the label looks centered */
+	transform: translateY(1px);
+
+	/* Make the checkmark look nice and centered */
+	display: grid;
+	place-content: center;
 }
 
-.complex-menu-checkbox.checked {
-	border: 1px solid var(--accent-primary);
-	font-size: 12px;
+.checkbox-wrapper input[type="checkbox"]::before {
+	/* Create checkmark (initially invisible) */
+	content: "";
+	width: 0.65em;
+	height: 0.65em;
+	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+	transform: scale(0);
+	transform-origin: bottom left;
+	transition: 120ms transform ease-in-out;
+	box-shadow: inset 1em 1em var(--accent-primary);
+
+	/* Windows High Contrast Mode */
+	background-color: canvastext;
 }
 
-.complex-menu-checkbox.checked .finsemble-icon {
-	color: var(--accent-primary);
+.checkbox-wrapper input[type="checkbox"]:checked {
+	border-color: var(--accent-primary);
+}
+
+.checkbox-wrapper input[type="checkbox"]:checked::before {
+	/* Set checkmark to visible */
+	transform: scale(1);
+	background-color: var(--accent-primary);
+}
+
+.checkbox-wrapper input[type="checkbox"]:disabled,
+.checkbox-wrapper input[type="checkbox"]:disabled + span {
+	cursor: default;
+	opacity: 0.3;
+}
+
+.indent-5px {
+	display: flex;
+	margin-top: 5px;
 }

package/react/components/common/css/icon.css

@@ -4,8 +4,8 @@
 
 .finsemble-icon svg {
 	font-size: 1em;
-	width: 1em;
-	height: 1em;
+	width: 0.7em;
+	height: 0.7em;
 	fill: currentcolor;
 	display: inline-block;
 	color: inherit;

package/react/components/common/css/toggle.css

@@ -22,7 +22,10 @@
 
 .toggle-text-label-wrapper {
 	display: flex;
-	width: 100%;
+	max-width: 330px;
+	border: #22262f 2px solid;
+	border-radius: 7px;
+	background: #22262f;
 }
 
 .toggle-text-label {

package/react/components/common/helpers.js

@@ -46,6 +46,8 @@ export const initFSBL = (windowObject) => {
                 setPreference: () => { },
                 getValues: () => { },
                 getPreferences: () => { },
+                addListener: () => { },
+                removeListener: () => { },
             },
             DialogManager: {
                 spawnDialog: (obj1) => {
@@ -72,6 +74,7 @@ export const initFSBL = (windowObject) => {
                 transmit: () => { },
                 addListener: () => { },
                 subscribe: () => { },
+                removeListener: () => { },
             },
             SearchClient: {
                 invokeItemAction: () => { },
@@ -95,6 +98,12 @@ export const initFSBL = (windowObject) => {
                     cb(null, null);
                 },
             },
+            NotificationClient: {
+                getPreferences: async () => {
+                    return { newNotificationHaloPeriodSeconds: 3 };
+                },
+                performAction: async () => { },
+            },
         },
         onShutdown: () => { },
         System: {

package/react/components/common/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/common/helpers.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { FileInputUploadCb } from \"./FileInput\";\nimport { Story } from \"@storybook/react/types-6-0\";\n\nimport { SDServerInfo } from \"../../types/smartDesktopDesignerTypes\";\nimport { Provider } from \"react-redux\";\nimport { createStore } from \"../../store\";\n\nexport const uploadFunction: FileInputUploadCb = (fileObject: File) =>\n\tnew Promise((resolve) => {\n\t\tresolve({\n\t\t\terr: \"\",\n\t\t\tpath: fileObject.name,\n\t\t});\n\t});\n\nexport const initFSBL = (windowObject?: any) => {\n\t// Poor man's global that can take any appendage\n\tconst globalAsAny: any = global;\n\n\tif (!windowObject) {\n\t\twindowObject = globalAsAny.window = {} as any;\n\t} else {\n\t\twindowObject = window;\n\n\t\tsetTimeout(() => {\n\t\t\tconst event = window.document.createEvent(\"Event\");\n\n\t\t\tevent?.initEvent(\"FSBLReady\", true, true);\n\n\t\t\twindow.dispatchEvent(event);\n\t\t});\n\t}\n\n\tglobalAsAny.FSBL = windowObject.FSBL = {\n\t\taddEventListener: (name: String, callback: () => void) => {\n\t\t\tcallback();\n\t\t},\n\t\tgetFSBLInfo: () =>\n\t\t\tnew Promise((resolve) => {\n\t\t\t\tresolve({\n\t\t\t\t\tFSBLVersion: \"1.0.0\",\n\t\t\t\t});\n\t\t\t}),\n\t\tClients: {\n\t\t\tTmpSmartDesktopClient: {\n\t\t\t\tcheckValidURL(url: string) {\n\t\t\t\t\tif (url.length === 0) {\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn /^https?:\\/\\/[^\\s]+$/.test(url);\n\t\t\t\t},\n\t\t\t\tcheckValidProjectName(name: string) {\n\t\t\t\t\treturn /^[a-zA-Z0-9 \\-_.]{1,}$/.test(name) && /[a-zA-Z0-9]{1,}/.test(name);\n\t\t\t\t},\n\t\t\t} as unknown,\n\t\t\tConfigClient: {\n\t\t\t\tsetPreference: () => {},\n\t\t\t\tgetValues: () => {},\n\t\t\t\tgetPreferences: () => {},\n\t\t\t},\n\t\t\tDialogManager: {\n\t\t\t\tspawnDialog: (obj1: any) => {\n\t\t\t\t\tconsole.table(obj1);\n\t\t\t\t},\n\t\t\t\tregisterDialogCallback: () => {},\n\t\t\t\trespondToOpener: () => {},\n\t\t\t},\n\t\t\tLauncherClient: {\n\t\t\t\tshowWindow: () => {},\n\t\t\t},\n\t\t\tLogger: {\n\t\t\t\tlog: () => {},\n\t\t\t\terror: () => {},\n\t\t\t\tsystem: {\n\t\t\t\t\tdebug: () => {},\n\t\t\t\t\tlog: () => {},\n\t\t\t\t\terror: () => {},\n\t\t\t\t\tverbose: () => {},\n\t\t\t\t\tdeprecated: () => {},\n\t\t\t\t},\n\t\t\t},\n\t\t\tRouterClient: {\n\t\t\t\ttransmit: () => {},\n\t\t\t\taddListener: () => {},\n\t\t\t\tsubscribe: () => {},\n\t\t\t},\n\t\t\tSearchClient: {\n\t\t\t\tinvokeItemAction: () => {},\n\t\t\t},\n\t\t\tStorageClient: {\n\t\t\t\tsave: () => {},\n\t\t\t\tclearCache: () => {},\n\t\t\t},\n\t\t\tWindowClient: {\n\t\t\t\tfitToDOM: () => {},\n\t\t\t},\n\t\t\tWorkspaceClient: {\n\t\t\t\taddEventListener: () => {},\n\t\t\t\tbringWindowsToFront: () => {},\n\t\t\t\tautoArrange: () => {},\n\t\t\t\tminimizeAll: () => {},\n\t\t\t\tactiveWorkspace: {\n\t\t\t\t\tname: \" \",\n\t\t\t\t},\n\t\t\t\tgetWorkspaceDefinition: (obj: Object, cb: Function) => {\n\t\t\t\t\tcb(null, null);\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tonShutdown: () => {},\n\t\tSystem: {\n\t\t\tgetSDServerInfo: () =>\n\t\t\t\tnew Promise((resolve) => {\n\t\t\t\t\tresolve({} as SDServerInfo);\n\t\t\t\t}),\n\t\t},\n\t\tSystemManagerClient: {\n\t\t\tpublishCheckpointState: () => {},\n\t\t},\n\t} as any;\n\n\tglobalAsAny.FSBL.Clients = {\n\t\t...globalAsAny.FSBL.Clients,\n\t\tWindowClient: {\n\t\t\tfitToDOM: () => {},\n\t\t} as any,\n\t};\n\n\tglobalAsAny.finsembleWindow = windowObject.finsembleWindow = {\n\t\tsetAlwaysOnTop: () => {},\n\t\taddEventListener: () => {},\n\t\tremoveEventListener: () => {},\n\t};\n};\n\nexport function createStory<T>(Component: Function, args: T) {\n\tconst template: Story<T> = (props: T) => {\n\t\tinitFSBL(window);\n\n\t\treturn (\n\t\t\t<Provider store={createStore()}>\n\t\t\t\t<Component {...{ ...args, ...props }} />\n\t\t\t</Provider>\n\t\t);\n\t};\n\n\ttemplate.args = args;\n\n\treturn template;\n}\n"]}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/common/helpers.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { FileInputUploadCb } from \"./FileInput\";\nimport { Story } from \"@storybook/react/types-6-0\";\n\nimport { SDServerInfo } from \"../../types/smartDesktopDesignerTypes\";\nimport { Provider } from \"react-redux\";\nimport { createStore } from \"../../store\";\n\nexport const uploadFunction: FileInputUploadCb = (fileObject: File) =>\n\tnew Promise((resolve) => {\n\t\tresolve({\n\t\t\terr: \"\",\n\t\t\tpath: fileObject.name,\n\t\t});\n\t});\n\nexport const initFSBL = (windowObject?: any) => {\n\t// Poor man's global that can take any appendage\n\tconst globalAsAny: any = global;\n\n\tif (!windowObject) {\n\t\twindowObject = globalAsAny.window = {} as any;\n\t} else {\n\t\twindowObject = window;\n\n\t\tsetTimeout(() => {\n\t\t\tconst event = window.document.createEvent(\"Event\");\n\n\t\t\tevent?.initEvent(\"FSBLReady\", true, true);\n\n\t\t\twindow.dispatchEvent(event);\n\t\t});\n\t}\n\n\tglobalAsAny.FSBL = windowObject.FSBL = {\n\t\taddEventListener: (name: String, callback: () => void) => {\n\t\t\tcallback();\n\t\t},\n\t\tgetFSBLInfo: () =>\n\t\t\tnew Promise((resolve) => {\n\t\t\t\tresolve({\n\t\t\t\t\tFSBLVersion: \"1.0.0\",\n\t\t\t\t});\n\t\t\t}),\n\t\tClients: {\n\t\t\tTmpSmartDesktopClient: {\n\t\t\t\tcheckValidURL(url: string) {\n\t\t\t\t\tif (url.length === 0) {\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn /^https?:\\/\\/[^\\s]+$/.test(url);\n\t\t\t\t},\n\t\t\t\tcheckValidProjectName(name: string) {\n\t\t\t\t\treturn /^[a-zA-Z0-9 \\-_.]{1,}$/.test(name) && /[a-zA-Z0-9]{1,}/.test(name);\n\t\t\t\t},\n\t\t\t} as unknown,\n\t\t\tConfigClient: {\n\t\t\t\tsetPreference: () => {},\n\t\t\t\tgetValues: () => {},\n\t\t\t\tgetPreferences: () => {},\n\t\t\t\taddListener: () => {},\n\t\t\t\tremoveListener: () => {},\n\t\t\t},\n\t\t\tDialogManager: {\n\t\t\t\tspawnDialog: (obj1: any) => {\n\t\t\t\t\tconsole.table(obj1);\n\t\t\t\t},\n\t\t\t\tregisterDialogCallback: () => {},\n\t\t\t\trespondToOpener: () => {},\n\t\t\t},\n\t\t\tLauncherClient: {\n\t\t\t\tshowWindow: () => {},\n\t\t\t},\n\t\t\tLogger: {\n\t\t\t\tlog: () => {},\n\t\t\t\terror: () => {},\n\t\t\t\tsystem: {\n\t\t\t\t\tdebug: () => {},\n\t\t\t\t\tlog: () => {},\n\t\t\t\t\terror: () => {},\n\t\t\t\t\tverbose: () => {},\n\t\t\t\t\tdeprecated: () => {},\n\t\t\t\t},\n\t\t\t},\n\t\t\tRouterClient: {\n\t\t\t\ttransmit: () => {},\n\t\t\t\taddListener: () => {},\n\t\t\t\tsubscribe: () => {},\n\t\t\t\tremoveListener: () => {},\n\t\t\t},\n\t\t\tSearchClient: {\n\t\t\t\tinvokeItemAction: () => {},\n\t\t\t},\n\t\t\tStorageClient: {\n\t\t\t\tsave: () => {},\n\t\t\t\tclearCache: () => {},\n\t\t\t},\n\t\t\tWindowClient: {\n\t\t\t\tfitToDOM: () => {},\n\t\t\t},\n\t\t\tWorkspaceClient: {\n\t\t\t\taddEventListener: () => {},\n\t\t\t\tbringWindowsToFront: () => {},\n\t\t\t\tautoArrange: () => {},\n\t\t\t\tminimizeAll: () => {},\n\t\t\t\tactiveWorkspace: {\n\t\t\t\t\tname: \" \",\n\t\t\t\t},\n\t\t\t\tgetWorkspaceDefinition: (obj: Object, cb: Function) => {\n\t\t\t\t\tcb(null, null);\n\t\t\t\t},\n\t\t\t},\n\t\t\tNotificationClient: {\n\t\t\t\tgetPreferences: async () => {\n\t\t\t\t\treturn { newNotificationHaloPeriodSeconds: 3 };\n\t\t\t\t},\n\t\t\t\tperformAction: async () => {},\n\t\t\t},\n\t\t},\n\t\tonShutdown: () => {},\n\t\tSystem: {\n\t\t\tgetSDServerInfo: () =>\n\t\t\t\tnew Promise((resolve) => {\n\t\t\t\t\tresolve({} as SDServerInfo);\n\t\t\t\t}),\n\t\t},\n\t\tSystemManagerClient: {\n\t\t\tpublishCheckpointState: () => {},\n\t\t},\n\t} as any;\n\n\tglobalAsAny.FSBL.Clients = {\n\t\t...globalAsAny.FSBL.Clients,\n\t\tWindowClient: {\n\t\t\tfitToDOM: () => {},\n\t\t} as any,\n\t};\n\n\tglobalAsAny.finsembleWindow = windowObject.finsembleWindow = {\n\t\tsetAlwaysOnTop: () => {},\n\t\taddEventListener: () => {},\n\t\tremoveEventListener: () => {},\n\t};\n};\n\nexport function createStory<T>(Component: Function, args: T) {\n\tconst template: Story<T> = (props: T) => {\n\t\tinitFSBL(window);\n\n\t\treturn (\n\t\t\t<Provider store={createStore()}>\n\t\t\t\t<Component {...{ ...args, ...props }} />\n\t\t\t</Provider>\n\t\t);\n\t};\n\n\ttemplate.args = args;\n\n\treturn template;\n}\n"]}

package/react/components/common/stories/ContextMenu.stories.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import { ContextMenuProps } from "../ContextMenu";
+import "../../../assets/css/finsemble.css";
+import "../css/styles.css";
+import { ContextMenuAction } from "../../notifications/types";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<ContextMenuProps>;
+};
+export default _default;
+export declare const BasicContextMenuToggle: import("@storybook/react").Story<{
+    menuActions: {
+        [key: string]: ContextMenuAction;
+    };
+    message: null;
+    isMuteFilterApplied: boolean;
+}>;
+export declare const ContextMenuToggleBottom: import("@storybook/react").Story<{
+    menuActions: {
+        [key: string]: ContextMenuAction;
+    };
+    message: null;
+    isMuteFilterApplied: boolean;
+}>;
+export declare const ContextMenuToggleRight: import("@storybook/react").Story<{
+    menuActions: {
+        [key: string]: ContextMenuAction;
+    };
+    message: null;
+    isMuteFilterApplied: boolean;
+}>;
+export declare const ContextMenuToggleBottomRight: import("@storybook/react").Story<{
+    menuActions: {
+        [key: string]: ContextMenuAction;
+    };
+    message: null;
+    isMuteFilterApplied: boolean;
+}>;

package/react/components/common/stories/ContextMenu.stories.js

@@ -0,0 +1,70 @@
+import React from "react";
+import ContextMenuToggle from "../ContextMenu";
+import { createStory } from "../helpers";
+import "../../../assets/css/finsemble.css";
+import "../css/styles.css";
+import SnoozeIcon from "../../notifications/icons/SnoozeIcon";
+import EnvelopeCloseIcon from "../../notifications/icons/EnvelopeClose";
+import EnvelopeOpenIcon from "../../notifications/icons/EnvelopeOpen";
+export default {
+    title: "Common/ContextMenu",
+    component: ContextMenuToggle,
+};
+const contextMenuActions = {
+    MARK_AS_UNREAD: {
+        name: "MARK_AS_UNREAD",
+        icon: React.createElement(EnvelopeCloseIcon, null),
+        label: "Mark Unread",
+        action: () => {
+            console.log("Marked as unread");
+        },
+        display: true,
+    },
+    MARK_AS_READ: {
+        name: "MARK_AS_READ",
+        icon: React.createElement(EnvelopeOpenIcon, null),
+        label: "Mark Read",
+        action: () => {
+            console.log("Marked as read");
+        },
+        display: true,
+    },
+    TEST: {
+        name: "TEST",
+        icon: React.createElement(SnoozeIcon, null),
+        label: "Test",
+        action: () => {
+            console.log("Hello World");
+        },
+        display: true,
+    },
+};
+const overFlowActions = Object.assign({}, contextMenuActions);
+export const BasicContextMenuToggle = createStory(ContextMenuToggle, {
+    menuActions: overFlowActions,
+    message: null,
+    isMuteFilterApplied: false,
+});
+BasicContextMenuToggle.decorators = [
+    (Story) => (React.createElement("div", { style: { position: "absolute", left: "1%" } },
+        React.createElement(Story, null))),
+];
+export const ContextMenuToggleBottom = BasicContextMenuToggle.bind({});
+ContextMenuToggleBottom.args = { menuActions: overFlowActions, message: null, isMuteFilterApplied: false };
+ContextMenuToggleBottom.decorators = [
+    (Story) => (React.createElement("div", { style: { position: "absolute", bottom: "10%" } },
+        React.createElement(Story, null))),
+];
+export const ContextMenuToggleRight = BasicContextMenuToggle.bind({});
+ContextMenuToggleRight.args = { menuActions: overFlowActions, message: null, isMuteFilterApplied: false };
+ContextMenuToggleRight.decorators = [
+    (Story) => (React.createElement("div", { style: { position: "absolute", right: "5%" } },
+        React.createElement(Story, null))),
+];
+export const ContextMenuToggleBottomRight = BasicContextMenuToggle.bind({});
+ContextMenuToggleBottomRight.args = { menuActions: overFlowActions, message: null, isMuteFilterApplied: false };
+ContextMenuToggleBottomRight.decorators = [
+    (Story) => (React.createElement("div", { style: { position: "absolute", right: "5%", bottom: "10%" } },
+        React.createElement(Story, null))),
+];
+//# sourceMappingURL=ContextMenu.stories.js.map

package/react/components/common/stories/ContextMenu.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.stories.js","sourceRoot":"","sources":["../../../../src/components/common/stories/ContextMenu.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport ContextMenuToggle, { ContextMenuProps } from \"../ContextMenu\";\nimport { createStory } from \"../helpers\";\nimport \"../../../assets/css/finsemble.css\";\nimport \"../css/styles.css\";\nimport SnoozeIcon from \"../../notifications/icons/SnoozeIcon\";\nimport EnvelopeCloseIcon from \"../../notifications/icons/EnvelopeClose\";\nimport EnvelopeOpenIcon from \"../../notifications/icons/EnvelopeOpen\";\nimport { ContextMenuAction } from \"../../notifications/types\";\n\nexport default {\n\ttitle: \"Common/ContextMenu\",\n\tcomponent: ContextMenuToggle,\n};\nconst contextMenuActions: { [key: string]: ContextMenuAction } = {\n\tMARK_AS_UNREAD: {\n\t\tname: \"MARK_AS_UNREAD\",\n\t\ticon: <EnvelopeCloseIcon />,\n\t\tlabel: \"Mark Unread\",\n\t\taction: () => {\n\t\t\tconsole.log(\"Marked as unread\");\n\t\t},\n\t\tdisplay: true,\n\t},\n\tMARK_AS_READ: {\n\t\tname: \"MARK_AS_READ\",\n\t\ticon: <EnvelopeOpenIcon />,\n\t\tlabel: \"Mark Read\",\n\t\taction: () => {\n\t\t\tconsole.log(\"Marked as read\");\n\t\t},\n\t\tdisplay: true,\n\t},\n\tTEST: {\n\t\tname: \"TEST\",\n\t\ticon: <SnoozeIcon />,\n\t\tlabel: \"Test\",\n\t\taction: () => {\n\t\t\tconsole.log(\"Hello World\");\n\t\t},\n\t\tdisplay: true,\n\t},\n};\n\nconst overFlowActions = Object.assign({}, contextMenuActions);\n\nexport const BasicContextMenuToggle = createStory(ContextMenuToggle, {\n\tmenuActions: overFlowActions,\n\tmessage: null,\n\tisMuteFilterApplied: false,\n});\nBasicContextMenuToggle.decorators = [\n\t(Story) => (\n\t\t<div style={{ position: \"absolute\", left: \"1%\" }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\n\nexport const ContextMenuToggleBottom = BasicContextMenuToggle.bind({});\nContextMenuToggleBottom.args = { menuActions: overFlowActions, message: null, isMuteFilterApplied: false };\nContextMenuToggleBottom.decorators = [\n\t(Story) => (\n\t\t<div style={{ position: \"absolute\", bottom: \"10%\" }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\n\nexport const ContextMenuToggleRight = BasicContextMenuToggle.bind({});\nContextMenuToggleRight.args = { menuActions: overFlowActions, message: null, isMuteFilterApplied: false };\nContextMenuToggleRight.decorators = [\n\t(Story) => (\n\t\t<div style={{ position: \"absolute\", right: \"5%\" }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\n\nexport const ContextMenuToggleBottomRight = BasicContextMenuToggle.bind({});\nContextMenuToggleBottomRight.args = { menuActions: overFlowActions, message: null, isMuteFilterApplied: false };\nContextMenuToggleBottomRight.decorators = [\n\t(Story) => (\n\t\t<div style={{ position: \"absolute\", right: \"5%\", bottom: \"10%\" }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\n"]}

package/react/components/common/stories/DropdownButton.stories.d.ts

@@ -6,13 +6,13 @@ declare const _default: {
     component: React.FunctionComponent<import("../DropdownButton").IFinsembleDropdownActionButtonProps>;
 };
 export default _default;
-export declare const dropdownButton: import("@storybook/react").Story<{
+export declare const DropdownButtonElement: import("@storybook/react").Story<{
     buttonLabel: string;
     buttonOptions: {
         buttonLabel: string;
     }[];
 }>;
-export declare const defaultDropdownButton: import("@storybook/react").Story<{
+export declare const DefaultDropdownButtonElement: import("@storybook/react").Story<{
     buttonLabel: string;
     buttonOptions: {
         optionLabel: string;
@@ -20,7 +20,7 @@ export declare const defaultDropdownButton: import("@storybook/react").Story<{
     caretLocation: string;
     classNames: string;
 }>;
-export declare const defaultDropdownButtonWithDefault: import("@storybook/react").Story<{
+export declare const DefaultDropdownButtonWithDefaultElement: import("@storybook/react").Story<{
     buttonLabel: string;
     buttonOptions: {
         optionLabel: string;

package/react/components/common/stories/DropdownButton.stories.js

@@ -8,33 +8,34 @@ export default {
     title: "Common/DropdownButton",
     component: DropdownButton,
 };
-export const dropdownButton = createStory(DropdownButton, {
+const options = [{ optionLabel: "Alpha" }, { optionLabel: "Bravo" }, { optionLabel: "Charlie" }];
+const buttonOptions = [{ buttonLabel: "Alpha" }, { buttonLabel: "Bravo" }, { buttonLabel: "Charlie" }];
+export const DropdownButtonElement = createStory(DropdownButton, {
     buttonLabel: "Label",
-    buttonOptions: [{ buttonLabel: "Alpha" }, { buttonLabel: "Bravo" }, { buttonLabel: "Charlie" }],
+    buttonOptions: buttonOptions,
 });
-dropdownButton.decorators = [
+DropdownButtonElement.decorators = [
     (Story) => (React.createElement("div", { style: { width: 80 } },
         React.createElement(Story, null))),
 ];
-export const defaultDropdownButton = createStory(DefaultDropdownButton, {
+export const DefaultDropdownButtonElement = createStory(DefaultDropdownButton, {
     buttonLabel: "Label",
-    buttonOptions: [{ optionLabel: "Alpha" }, { optionLabel: "Bravo" }, { optionLabel: "Charlie" }],
+    buttonOptions: options,
     caretLocation: "right",
     classNames: "push-right",
 });
-defaultDropdownButton.decorators = [
+DefaultDropdownButtonElement.decorators = [
     (Story) => (React.createElement("div", { style: { width: 150 } },
         React.createElement(Story, null))),
 ];
-const options = [{ optionLabel: "Alpha" }, { optionLabel: "Bravo" }, { optionLabel: "Charlie" }];
-export const defaultDropdownButtonWithDefault = createStory(DefaultDropdownButton, {
+export const DefaultDropdownButtonWithDefaultElement = createStory(DefaultDropdownButton, {
     buttonLabel: "Label",
-    buttonOptions: [{ optionLabel: "Alpha" }, { optionLabel: "Bravo" }, { optionLabel: "Charlie" }],
+    buttonOptions: options,
     caretLocation: "right",
     classNames: "push-right",
     defaultSelection: options[1],
 });
-defaultDropdownButton.decorators = [
+DefaultDropdownButtonWithDefaultElement.decorators = [
     (Story) => (React.createElement("div", { style: { width: 150 } },
         React.createElement(Story, null))),
 ];

package/react/components/common/stories/DropdownButton.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.stories.js","sourceRoot":"","sources":["../../../../src/components/common/stories/DropdownButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,qBAAqB,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAe;IACd,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,cAAc;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,CAAC,cAAc,EAAE;IACzD,WAAW,EAAE,OAAO;IACpB,aAAa,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;CAC/F,CAAC,CAAC;AACH,cAAc,CAAC,UAAU,GAAG;IAC3B,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QACxB,oBAAC,KAAK,OAAG,CACJ,CACN;CACD,CAAC;AACF,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,qBAAqB,EAAE;IACvE,WAAW,EAAE,OAAO;IACpB,aAAa,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;IAC/F,aAAa,EAAE,OAAO;IACtB,UAAU,EAAE,YAAY;CACxB,CAAC,CAAC;AACH,qBAAqB,CAAC,UAAU,GAAG;IAClC,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;QACzB,oBAAC,KAAK,OAAG,CACJ,CACN;CACD,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;AAEjG,MAAM,CAAC,MAAM,gCAAgC,GAAG,WAAW,CAAC,qBAAqB,EAAE;IAClF,WAAW,EAAE,OAAO;IACpB,aAAa,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;IAC/F,aAAa,EAAE,OAAO;IACtB,UAAU,EAAE,YAAY;IACxB,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;CAC5B,CAAC,CAAC;AACH,qBAAqB,CAAC,UAAU,GAAG;IAClC,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;QACzB,oBAAC,KAAK,OAAG,CACJ,CACN;CACD,CAAC","sourcesContent":["import DropdownButton from \"../DropdownButton\";\nimport DefaultDropdownButton from \"../../shared/DefaultDropdownButton\";\nimport { createStory } from \"../helpers\";\nimport \"../../../assets/css/finsemble.css\";\nimport \"../css/styles.css\";\nimport React from \"react\";\n\nexport default {\n\ttitle: \"Common/DropdownButton\",\n\tcomponent: DropdownButton,\n};\n\nexport const dropdownButton = createStory(DropdownButton, {\n\tbuttonLabel: \"Label\",\n\tbuttonOptions: [{ buttonLabel: \"Alpha\" }, { buttonLabel: \"Bravo\" }, { buttonLabel: \"Charlie\" }],\n});\ndropdownButton.decorators = [\n\t(Story) => (\n\t\t<div style={{ width: 80 }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\nexport const defaultDropdownButton = createStory(DefaultDropdownButton, {\n\tbuttonLabel: \"Label\",\n\tbuttonOptions: [{ optionLabel: \"Alpha\" }, { optionLabel: \"Bravo\" }, { optionLabel: \"Charlie\" }],\n\tcaretLocation: \"right\",\n\tclassNames: \"push-right\",\n});\ndefaultDropdownButton.decorators = [\n\t(Story) => (\n\t\t<div style={{ width: 150 }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\n\nconst options = [{ optionLabel: \"Alpha\" }, { optionLabel: \"Bravo\" }, { optionLabel: \"Charlie\" }];\n\nexport const defaultDropdownButtonWithDefault = createStory(DefaultDropdownButton, {\n\tbuttonLabel: \"Label\",\n\tbuttonOptions: [{ optionLabel: \"Alpha\" }, { optionLabel: \"Bravo\" }, { optionLabel: \"Charlie\" }],\n\tcaretLocation: \"right\",\n\tclassNames: \"push-right\",\n\tdefaultSelection: options[1],\n});\ndefaultDropdownButton.decorators = [\n\t(Story) => (\n\t\t<div style={{ width: 150 }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\n"]}
+{"version":3,"file":"DropdownButton.stories.js","sourceRoot":"","sources":["../../../../src/components/common/stories/DropdownButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,qBAAqB,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAe;IACd,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,cAAc;CACzB,CAAC;AACF,MAAM,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;AACjG,MAAM,aAAa,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;AAEvG,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,cAAc,EAAE;IAChE,WAAW,EAAE,OAAO;IACpB,aAAa,EAAE,aAAa;CAC5B,CAAC,CAAC;AACH,qBAAqB,CAAC,UAAU,GAAG;IAClC,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QACxB,oBAAC,KAAK,OAAG,CACJ,CACN;CACD,CAAC;AACF,MAAM,CAAC,MAAM,4BAA4B,GAAG,WAAW,CAAC,qBAAqB,EAAE;IAC9E,WAAW,EAAE,OAAO;IACpB,aAAa,EAAE,OAAO;IACtB,aAAa,EAAE,OAAO;IACtB,UAAU,EAAE,YAAY;CACxB,CAAC,CAAC;AACH,4BAA4B,CAAC,UAAU,GAAG;IACzC,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;QACzB,oBAAC,KAAK,OAAG,CACJ,CACN;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,uCAAuC,GAAG,WAAW,CAAC,qBAAqB,EAAE;IACzF,WAAW,EAAE,OAAO;IACpB,aAAa,EAAE,OAAO;IACtB,aAAa,EAAE,OAAO;IACtB,UAAU,EAAE,YAAY;IACxB,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;CAC5B,CAAC,CAAC;AACH,uCAAuC,CAAC,UAAU,GAAG;IACpD,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;QACzB,oBAAC,KAAK,OAAG,CACJ,CACN;CACD,CAAC","sourcesContent":["import DropdownButton from \"../DropdownButton\";\nimport DefaultDropdownButton from \"../../shared/DefaultDropdownButton\";\nimport { createStory } from \"../helpers\";\nimport \"../../../assets/css/finsemble.css\";\nimport \"../css/styles.css\";\nimport React from \"react\";\n\nexport default {\n\ttitle: \"Common/DropdownButton\",\n\tcomponent: DropdownButton,\n};\nconst options = [{ optionLabel: \"Alpha\" }, { optionLabel: \"Bravo\" }, { optionLabel: \"Charlie\" }];\nconst buttonOptions = [{ buttonLabel: \"Alpha\" }, { buttonLabel: \"Bravo\" }, { buttonLabel: \"Charlie\" }];\n\nexport const DropdownButtonElement = createStory(DropdownButton, {\n\tbuttonLabel: \"Label\",\n\tbuttonOptions: buttonOptions,\n});\nDropdownButtonElement.decorators = [\n\t(Story) => (\n\t\t<div style={{ width: 80 }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\nexport const DefaultDropdownButtonElement = createStory(DefaultDropdownButton, {\n\tbuttonLabel: \"Label\",\n\tbuttonOptions: options,\n\tcaretLocation: \"right\",\n\tclassNames: \"push-right\",\n});\nDefaultDropdownButtonElement.decorators = [\n\t(Story) => (\n\t\t<div style={{ width: 150 }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\n\nexport const DefaultDropdownButtonWithDefaultElement = createStory(DefaultDropdownButton, {\n\tbuttonLabel: \"Label\",\n\tbuttonOptions: options,\n\tcaretLocation: \"right\",\n\tclassNames: \"push-right\",\n\tdefaultSelection: options[1],\n});\nDefaultDropdownButtonWithDefaultElement.decorators = [\n\t(Story) => (\n\t\t<div style={{ width: 150 }}>\n\t\t\t<Story />\n\t\t</div>\n\t),\n];\n"]}