@finsemble/finsemble-ui 7.2.1 → 7.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsemble/finsemble-ui",
-  "version": "7.2.1",
+  "version": "7.3.1",
   "description": "Ready-made React components to give you a head-start building your SmartDesktop.",
   "types": "index.d.ts",
   "files": [
@@ -29,11 +29,11 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@finsemble/finsemble-api": "7.2.1",
+    "@finsemble/finsemble-api": "7.3.1",
     "@q42/floating-focus-a11y": "^1.3.3",
     "@reduxjs/toolkit": "^1.5.0",
     "@svgr/webpack": "^5.5.0",
-    "@types/async": "3.2.13",
+    "@types/async": "3.2.15",
     "@types/chai": "4.3.1",
     "@types/lodash": "4.14.182",
     "@types/mocha": "9.1.1",
@@ -41,9 +41,9 @@
     "@types/react-dom": "17.0.16",
     "@types/react-redux": "7.1.24",
     "@types/react-relative-portal": "^1.8.1",
-    "async": "3.2.3",
+    "async": "3.2.4",
     "date-fns": "^2.25.0",
-    "immer": "9.0.14",
+    "immer": "9.0.15",
     "lodash": "4.17.21",
     "react-circular-progressbar": "^2.0.3",
     "react-redux": "7.2.8",
@@ -63,13 +63,13 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.12.10",
     "@babel/register": "^7.16.0",
-    "@storybook/addon-actions": "6.5.8",
-    "@storybook/addon-essentials": "6.5.7",
-    "@storybook/addon-links": "6.5.5",
-    "@storybook/react": "6.5.6",
+    "@storybook/addon-actions": "6.5.9",
+    "@storybook/addon-essentials": "6.5.9",
+    "@storybook/addon-links": "6.5.9",
+    "@storybook/react": "6.5.9",
     "@types/enzyme": "^3.10.8",
-    "@types/react-syntax-highlighter": "15.5.1",
-    "@types/react-transition-group": "4.4.4",
+    "@types/react-syntax-highlighter": "15.5.2",
+    "@types/react-transition-group": "4.4.5",
     "@types/sinon": "^10.0.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
     "axe-core": "^4.2.3",
@@ -77,14 +77,14 @@
     "canvas": "^2.9.0",
     "chai": "4.3.6",
     "chokidar-cli": "3.0.0",
-    "concurrently": "7.2.1",
+    "concurrently": "7.2.2",
     "copyfiles": "2.4.1",
     "core-js": "^3.15.2",
     "depcheck": "^1.4.3",
     "enzyme": "^3.11.0",
     "ignore-styles": "^5.0.1",
     "improved-yarn-audit": "^3.0.0",
-    "jsdom": "^19.0.0",
+    "jsdom": "^20.0.0",
     "mocha": "10.0.0",
     "nyc": "15.1.0",
     "react": "17.0.2",
@@ -92,7 +92,7 @@
     "rimraf": "3.0.2",
     "sinon": "^14.0.0",
     "ts-mocha": "10.0.0",
-    "typescript": "4.7.3"
+    "typescript": "4.7.4"
   },
   "resolutions": {
     "trim-newlines": "4.0.1",

package/react/assets/css/button.css

@@ -83,8 +83,17 @@
 .finsemble-dropdown-action__btn .expand-options {
 	justify-content: center;
 	display: flex;
-	height: 100%;
+	align-self: stretch;
 	align-items: center;
+	padding-left: 4px;
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+
+.finsemble-dropdown-action__btn .expand-options:hover,
+.finsemble-dropdown-action__btn .expand-options:focus {
+	cursor: pointer;
+	background-color: var(--accent-primary-1);
 }
 
 .finsemble-dropdown-action__btn span.btn-label {
@@ -96,9 +105,13 @@
 	padding: 4px;
 	margin: auto;
 	color: var(--font-color);
+	cursor: pointer;
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
 }
 
-.finsemble-dropdown-action__btn:hover {
+.finsemble-dropdown-action__btn span.btn-label:hover,
+.finsemble-dropdown-action__btn span.btn-label:focus {
 	background-color: var(--accent-primary-1);
 }
 
@@ -115,6 +128,12 @@
 	text-align: right;
 	top: 25px;
 	white-space: nowrap;
+	z-index: 999;
+}
+
+.finsemble-dropdown-action__btn-options.flow-up {
+	top: auto;
+	bottom: 31px;
 }
 
 .finsemble-dropdown-action__btn-option {
@@ -128,10 +147,15 @@
 	color: var(--font-color);
 }
 
-.finsemble-dropdown-action__btn-option:hover {
+.finsemble-dropdown-action__btn-option:hover,
+.finsemble-dropdown-action__btn-option:focus {
 	background-color: var(--accent-primary);
 }
 
+.finsemble-dropdown-action__btn .separator {
+	margin: 0;
+}
+
 .caret {
 	border-left: 5px solid transparent;
 	border-right: 5px solid transparent;
@@ -139,6 +163,7 @@
 	height: 0;
 	margin-right: 5px;
 	width: 0;
+	cursor: pointer;
 }
 
 .separator {
@@ -169,7 +194,8 @@
 	margin: 0 10px;
 }
 
-.finsemble-navigation__btn:hover {
+.finsemble-navigation__btn:hover,
+.finsemble-navigation__btn:focus {
 	background-color: var(--core-primary-3);
 }
 
@@ -200,7 +226,8 @@
 	color: var(--font-color);
 }
 
-.finsemble__btn:hover {
+.finsemble__btn:hover,
+.finsemble__btn:focus {
 	background-color: var(--core-primary-2);
 }
 
@@ -208,6 +235,7 @@
 	background-color: var(--accent-negative);
 }
 
-.finsemble__btn.accent-negative:hover {
+.finsemble__btn.accent-negative:hover,
+.finsemble__btn.accent-negative:focus {
 	background-color: var(--accent-negative-1);
 }

package/react/assets/css/contextMenu.css

@@ -0,0 +1,118 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap");
+
+@import "./shared/animations.css";
+
+.context-menu__container {
+	background-color: var(--core-primary-3);
+	border-radius: 4px;
+	display: flex;
+	flex-direction: column;
+	min-width: 105px;
+	padding: 5px 0;
+	position: absolute;
+	z-index: 999;
+	top: 50%;
+	right: 30%;
+	width: fit-content;
+}
+
+.context-menu__container.flow-right {
+	left: 5%;
+}
+
+.context-menu__container.flow-up {
+	top: auto;
+	bottom: 15px;
+}
+
+.context-menu__container .context-menu__action {
+	color: var(--core-primary-5);
+	cursor: pointer;
+	display: flex;
+	font-size: var(--font-size);
+	height: 17px;
+	line-height: 26px;
+	padding: 4px;
+	text-align: center;
+	white-space: nowrap;
+}
+
+.context-menu__container .context-menu__action:hover {
+	opacity: 0.5;
+	background-color: var(--core-primary-1);
+}
+
+.context-menu__action {
+	display: grid;
+	grid-template-columns: 30px auto;
+	grid-template-rows: 26px;
+	align-items: center;
+	padding-left: 0;
+}
+
+.context-menu__action .icon-holder i {
+	font-size: 18px;
+	color: white;
+}
+
+.context-menu__action i {
+	color: var(--core-primary-5);
+}
+
+.context-menu__action span {
+	margin-left: 1px;
+	color: var(--font-color);
+}
+
+.context-menu__action:hover {
+	background-color: var(--accent-primary);
+}
+
+.context-menu__container .finsemble-icon {
+	display: grid;
+	margin: 0 7px;
+	width: 17px;
+	height: 17px;
+	font-size: 16px;
+}
+
+.context-menu__container .finsemble-icon svg {
+	font-size: 1em;
+	width: 1em;
+	height: 1em;
+	fill: currentcolor;
+	display: inline-block;
+	color: inherit;
+	pointer-events: none;
+	line-height: normal;
+}
+
+.context-menu__container .finsemble-icon i {
+	color: var(--font-color);
+}
+
+.context-menu__container .finsemble-icon g {
+	fill: var(--font-color); /* custom icons (evelope, snooze, etc) color */
+}
+
+.finsemble-icon__btn {
+	align-items: center;
+	color: var(--core-primary-5);
+	cursor: pointer;
+	height: 24px;
+	position: relative;
+	width: 24px;
+}
+
+.finsemble-icon__btn.active {
+	color: var(--accent-primary);
+}
+
+.finsemble-icon__btn:hover:not(.no-hover) {
+	background: var(--menu-actions-hover-color);
+	border-radius: 50%;
+}
+
+.finsemble-icon__btn > i {
+	font-size: var(--font-size-large);
+}

package/react/assets/css/notificationsCenter.css

@@ -182,52 +182,13 @@ body.notifications-center-body.notifications-popped-in {
 }
 
 /* Notification card and views */
-.notification-card {
-	background-color: var(--core-primary);
-	box-shadow: 0 0 8px 0 rgb(0 0 0 / 50%);
-	display: flex;
-	flex-direction: column;
-	font-family: var(--notification-font-family);
-	min-height: 120px;
-	padding: 8px 10px;
-	margin: 0 5px;
-}
-
-.notification-card.read {
-	background-color: var(--core-primary-opacity);
-	color: var(--font-shadow-light);
-}
-
-#notifications-center .notification-card.new {
-	box-shadow: 0 0 9px 0 var(--notification-highlight-border-color);
-}
-
-.notification-day {
-	color: var(--font-shadow-light);
-	font-size: var(--font-size);
-	font-weight: bold;
-	margin: 10px auto;
-	padding: 0 0 0 5px;
-}
-
-.notification-card__header {
-	display: grid;
-	grid-template-columns: 25px auto minmax(80px, auto);
-	grid-template-rows: 30px;
-	align-items: center;
-}
-
-.notifications-toast__offscreen .notification-card__header {
-	grid-template-columns: 25px auto 45px;
-}
 
 i.default-img.large {
 	font-size: var(--font-size-large);
 	justify-self: center;
 }
 
-.list-row__cell img,
-.notification-card__header img {
+.list-row__cell img {
 	object-fit: contain;
 	margin-right: 8px;
 	max-width: 18px;
@@ -236,93 +197,6 @@ i.default-img.large {
 	height: auto;
 }
 
-.notification-card__title {
-	display: block;
-	font-size: var(--font-size-large);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	margin-right: auto;
-	width: 100%;
-}
-
-.notification-card__more-options__no-toggle,
-.notification-card__more-options__toggle {
-	cursor: pointer;
-	white-space: nowrap;
-	display: grid;
-	grid-template-rows: 30px;
-	align-items: center;
-	grid-template-columns: minmax(80px, auto);
-	justify-items: end;
-	margin-left: 2px;
-}
-
-.notifications-toast__offscreen .notification-card__more-options__no-toggle,
-.notifications-toast__offscreen .notification-card__more-options__toggle {
-	grid-template-columns: 25px 20px;
-}
-
-.notification-card__more-options__toggle .notification-card_overflow_menu,
-.notification-card__more-options__toggle:hover .notification-card_timestamp {
-	display: none;
-}
-
-.notification-card__more-options__no-toggle .notification-card_overflow_menu,
-.notification-card__more-options__toggle:hover .notification-card_overflow_menu {
-	display: flex;
-}
-
-.notification-card__dismiss.finsemble-icon__btn i {
-	font-size: var(--titleBar-icon-font-size);
-}
-
-.notification-card__more-options__no-toggle .notification-card__dismiss:hover {
-	color: var(--titleBar-button-hover-negative-color);
-}
-
-.notification-card__body {
-	display: flex;
-	flex-direction: row;
-	font-size: var(--font-size-large);
-	margin-top: 8px;
-}
-
-.notification-card__body_text {
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 4;
-	color: var(--core-primary-5);
-	display: box;
-	overflow: hidden;
-}
-
-.notification-card__body_img_container {
-	width: 50px;
-	height: 50px;
-	padding-right: 5px;
-	padding-bottom: 5px;
-}
-
-.notification-card__body_img_container img {
-	width: inherit;
-	height: inherit;
-}
-
-.notification-card.read .notification-card__body_text {
-	color: var(--font-color-1-shadow);
-}
-
-.actions-panel {
-	align-items: flex-end;
-	display: flex;
-	flex-direction: column;
-	margin-left: auto;
-}
-
-.actions-panel__btn:hover {
-	opacity: 0.75;
-}
-
 .list-header__container {
 	align-items: center;
 	display: grid;
@@ -384,82 +258,22 @@ i.default-img.large {
 	visibility: visible;
 }
 
-.notification-card .overflow-menu__container,
-.notification-card.read .overflow-menu__container {
+.notification-card .context-menu__container,
+.notification-card.read .context-menu__container {
 	color: var(--font-color);
 }
 
-.overflow-menu__container {
-	background-color: var(--core-primary-3);
-	border-radius: 4px;
-	display: flex;
-	flex-direction: column;
-	min-width: 120px;
-	padding: 10px 0;
-	position: absolute;
-	right: 10px;
-	top: 10px;
-	z-index: 999;
-}
-
-.overflow-menu__container.flow-up {
-	top: auto;
-	bottom: 15px;
-}
-
-.overflow-menu__container .action {
-	color: var(--core-primary-5);
-	cursor: pointer;
-	display: flex;
-	font-size: var(--font-size);
-	height: 26px;
-	justify-content: center;
-	line-height: 26px;
-	padding: 4px;
-	text-align: center;
-}
-
-.overflow-menu__container .action:hover {
-	opacity: 0.5;
-	background-color: var(--core-primary-1);
-}
-
 .no-notifications {
 	display: flex;
 	justify-content: center;
 	margin-top: 20px;
 }
 
-.overflow-menu__action {
-	display: grid;
-	grid-template-columns: 30px auto;
-	grid-template-rows: 26px;
-	align-items: center;
-}
-
-.overflow-menu__action .icon-holder i {
-	font-size: 18px;
-	color: white;
-}
-
 .icon-holder svg {
 	width: 20px;
 	height: 20px;
 }
 
-.overflow-menu__action i {
-	color: var(--core-primary-5);
-}
-
-.overflow-menu__action span {
-	margin-left: 5px;
-	color: var(--font-color);
-}
-
-.overflow-menu__action:hover {
-	background-color: var(--accent-primary);
-}
-
 .finsemble-icon {
 	display: grid;
 	margin: 0 7px;
@@ -535,30 +349,6 @@ i.default-img.large {
 
 /* Buttons & Icons - This are probably better placed in the core CSS? */
 
-.finsemble-icon__btn {
-	align-items: center;
-	color: var(--core-primary-5);
-	cursor: pointer;
-	display: flex;
-	height: 24px;
-	justify-content: center;
-	position: relative;
-	width: 24px;
-}
-
-.finsemble-icon__btn.active {
-	color: var(--accent-primary);
-}
-
-.finsemble-icon__btn:hover:not(.no-hover) {
-	background: var(--menu-actions-hover-color);
-	border-radius: 50%;
-}
-
-.finsemble-icon__btn i {
-	font-size: var(--font-size-large);
-}
-
 /*** Notifications Toasts ***/
 
 body.notifications-toasts-body {
@@ -577,7 +367,6 @@ body.notifications-toasts-body {
 }
 
 .notifications-toast__offscreen {
-	transform: translateX(1000px);
 	transform: translateX(1000px);
 	animation: slide-in-right-opaque 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }

package/react/assets/css/userPreferences.css

@@ -375,7 +375,7 @@ img {
 	margin-bottom: 10px;
 }
 
-.close-toggle-container .complex-menu-checkbox-wrapper {
+.close-toggle-container .checkbox-wrapper {
 	margin-top: 0;
 	width: 90px;
 	margin-right: 15px;
@@ -462,7 +462,7 @@ option:focus {
 	align-items: center;
 }
 
-.row-section .complex-menu-checkbox-wrapper {
+.row-section .checkbox-wrapper {
 	width: 100%;
 }
 

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

@@ -3,8 +3,9 @@ import "./css/checkbox.css";
 export interface CheckboxProps {
     checked?: boolean;
     disabled?: boolean;
-    label?: string;
+    label: string;
     showLabel?: boolean;
-    onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    id?: string;
+    onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const Checkbox: React.FC<CheckboxProps>;

package/react/components/common/Checkbox.js

@@ -1,24 +1,8 @@
 import React from "react";
-import { FinsembleIcon } from "./FinsembleIcon";
+// import { FinsembleIcon } from "./FinsembleIcon";
 import "./css/checkbox.css";
-export const Checkbox = ({ checked = false, disabled = false, label = "", showLabel = true, onClick = () => { }, }) => {
-    let checkboxClasses = "complex-menu-checkbox";
-    if (checked) {
-        checkboxClasses = `${checkboxClasses} checked`;
-    }
-    let style = {};
-    if (disabled) {
-        style = {
-            cursor: "default",
-            opacity: ".3",
-        };
-    }
-    return (React.createElement("div", { style: style, className: "complex-menu-checkbox-wrapper", role: "checkbox", "aria-checked": checked, "aria-label": label, tabIndex: 0, onClick: disabled ? () => { } : onClick, onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-                !disabled && onClick(e);
-            }
-        } },
-        React.createElement("div", { className: checkboxClasses }, checked && React.createElement(FinsembleIcon, { icon: "check" })),
-        showLabel && React.createElement("div", { className: "complex-menu-checkbox-label" }, label)));
-};
+export const Checkbox = ({ checked = false, disabled = false, label, showLabel = true, id, onClick = () => { }, }) => (React.createElement("div", { className: "checkbox-wrapper" },
+    React.createElement("label", null,
+        React.createElement("input", { type: "checkbox", id: id, disabled: disabled, checked: checked, "aria-label": label, onChange: onClick }),
+        showLabel && React.createElement("span", null, label))));
 //# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/common/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,oBAAoB,CAAC;AAU5B,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EACjD,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,IAAI,EAChB,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GAClB,EAAE,EAAE;IACJ,IAAI,eAAe,GAAG,uBAAuB,CAAC;IAC9C,IAAI,OAAO,EAAE;QACZ,eAAe,GAAG,GAAG,eAAe,UAAU,CAAC;KAC/C;IACD,IAAI,KAAK,GAAG,EAAE,CAAC;IACf,IAAI,QAAQ,EAAE;QACb,KAAK,GAAG;YACP,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,IAAI;SACb,CAAC;KACF;IACD,OAAO,CACN,6BACC,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,UAAU,kBACD,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,OAAO,EACtC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gBACvC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;aACxB;QACF,CAAC;QAED,6BAAK,SAAS,EAAE,eAAe,IAAG,OAAO,IAAI,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,GAAG,CAAO;QACjF,SAAS,IAAI,6BAAK,SAAS,EAAC,6BAA6B,IAAE,KAAK,CAAO,CACnE,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\nimport \"./css/checkbox.css\";\n\nexport interface CheckboxProps {\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\tlabel?: string;\n\tshowLabel?: boolean;\n\tonClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n\tchecked = false,\n\tdisabled = false,\n\tlabel = \"\",\n\tshowLabel = true,\n\tonClick = () => {},\n}) => {\n\tlet checkboxClasses = \"complex-menu-checkbox\";\n\tif (checked) {\n\t\tcheckboxClasses = `${checkboxClasses} checked`;\n\t}\n\tlet style = {};\n\tif (disabled) {\n\t\tstyle = {\n\t\t\tcursor: \"default\",\n\t\t\topacity: \".3\",\n\t\t};\n\t}\n\treturn (\n\t\t<div\n\t\t\tstyle={style}\n\t\t\tclassName=\"complex-menu-checkbox-wrapper\"\n\t\t\trole=\"checkbox\"\n\t\t\taria-checked={checked}\n\t\t\taria-label={label}\n\t\t\ttabIndex={0}\n\t\t\tonClick={disabled ? () => {} : onClick}\n\t\t\tonKeyDown={(e) => {\n\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\t\t!disabled && onClick(e);\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<div className={checkboxClasses}>{checked && <FinsembleIcon icon=\"check\" />}</div>\n\t\t\t{showLabel && <div className=\"complex-menu-checkbox-label\">{label}</div>}\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/common/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,mDAAmD;AACnD,OAAO,oBAAoB,CAAC;AAa5B,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EACjD,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,SAAS,GAAG,IAAI,EAChB,EAAE,EACF,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GAClB,EAAE,EAAE,CAAC,CACL,6BAAK,SAAS,EAAC,kBAAkB;IAChC;QACC,+BACC,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,gBAEJ,KAAK,EACjB,QAAQ,EAAE,OAAO,GAChB;QACD,SAAS,IAAI,kCAAO,KAAK,CAAQ,CAC3B,CACH,CACN,CAAC","sourcesContent":["import React from \"react\";\n// import { FinsembleIcon } from \"./FinsembleIcon\";\nimport \"./css/checkbox.css\";\n\nexport interface CheckboxProps {\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\t/* A label should always be provided, at minimum for accessibility.\n\tIf a visible label shouldn't be displayed, use showLabel=false */\n\tlabel: string;\n\tshowLabel?: boolean;\n\tid?: string;\n\tonClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n\tchecked = false,\n\tdisabled = false,\n\tlabel,\n\tshowLabel = true,\n\tid,\n\tonClick = () => {},\n}) => (\n\t<div className=\"checkbox-wrapper\">\n\t\t<label>\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tid={id}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tchecked={checked}\n\t\t\t\t/* In case showLabel=false, we still want a screen reader to know what the label is. */\n\t\t\t\taria-label={label}\n\t\t\t\tonChange={onClick}\n\t\t\t/>\n\t\t\t{showLabel && <span>{label}</span>}\n\t\t</label>\n\t</div>\n);\n"]}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { ContextMenuAction } from "../notifications/types";
+import "../../assets/css/contextMenu.css";
+export interface ContextMenuProps {
+    menuActions: {
+        [key: string]: ContextMenuAction;
+    };
+    message: any;
+    isMuteFilterApplied: boolean;
+}
+export declare const renderContextMenuAction: (message: any, menuAction: ContextMenuAction, isMuted: boolean) => JSX.Element | undefined;
+declare const ContextMenuToggle: React.FunctionComponent<ContextMenuProps>;
+export default ContextMenuToggle;