@finsemble/finsemble-ui 8.3.0 → 8.4.0-beta.1

package/react/assets/css/windowTitleBar.css

@@ -5,102 +5,42 @@
  */
 @import url("./linkerWindow.css");
 @import url("./defaultTheme.css");
-@import url("core/icons.css");
-@import url("core/windowFrame.css");
-@import url("core/formElements.css");
+@import url("./core/icons.css");
 @import url("./font-finance.css");
 @import url("./fonts/Open_Sans/OpenSans-Definition.css");
 
-.fsbl-drag-handle {
-	z-index: 2147483641;
+/* .fsbl-app-region is only used by e2e tests */
 
-	/* use below with window scrollbar hack */
-	position: fixed;
-	/* stylelint-disable-next-line declaration-no-important */
-	top: 5px !important;
-	/* stylelint-disable-next-line declaration-no-important */
-	margin-top: 0 !important;
-
-	/* use below without window scrollbar hack */
-
-	/* position: absolute; */
-
-	/* top: 0px!important; */
-
-	/* background-color: red; */
-
-	/* prevent dragging any data when move window */
-	user-select: none;
-}
-
-.fsbl-drag-handle-native-movement {
-	z-index: 2147483641;
-
-	/* use below with window scrollbar hack */
-	position: fixed;
-	/* stylelint-disable-next-line declaration-no-important */
-	top: 5px !important;
-	/* stylelint-disable-next-line declaration-no-important */
-	margin-top: 0 !important;
+/* This gets added to draggable areas if useDOMBasedMovement is turned off in config */
+.fsbl-no-dom-movement {
 	-webkit-app-region: drag;
-
-	/* prevent dragging any data when move window */
-	user-select: none;
-}
-
-.fsbl-drag-handle.hidden {
-	display: none;
-}
-
-.fsbl-drag-handle-native-movement.hidden {
-	display: none;
 }
 
-.fsbl-tabs-multiple .fsbl-header-right {
-	padding-left: 80px; /* leave some space for a user to grab */
-}
+/* 100px minimum. flex-grow will fill up available space to the right */
+.fsbl-guaranteed-drag-area {
+	min-width: 100px;
 
-html::before,
-html::after,
-body::before,
-body::after {
-	content: "";
-	position: fixed;
-	display: block;
-	z-index: 2147483640;
-	background-color: var(--window-border-color);
+	/* if, for whatever reason, no tabs appear then this will ensure that the drag region has height to grab */
+	min-height: 20px;
+	flex-grow: 1;
 }
 
-/*
-* The next few items give the border of windows
-* thickness so that the user can see them
-*/
-html::before {
-	height: 1px;
-	left: 0;
-	right: 0;
-	top: 0;
+.fsbl-tab-region {
+	width: 100%;
+	display: inline-block;
 }
 
-html::after {
-	width: 1px;
-	top: 0;
-	right: 0;
-	bottom: 0;
+.fsbl-tab-region-tabbing-disabled {
+	text-align: center;
 }
 
-body::before {
-	height: 1px;
-	right: 0;
-	bottom: 0;
-	left: 0;
+.fsbl-tab-region-tabbing-enabled {
+	text-align: left;
+	display: flex;
 }
 
-body::after {
-	width: 1px;
-	top: 0;
-	bottom: 0;
-	left: 0;
+#FSBLHeader {
+	color: white;
 }
 
 .fsbl-header {
@@ -117,7 +57,8 @@ body::after {
 	background: var(--titleBar-background-inactive-color);
 	width: 100%;
 	left: 0;
-	z-index: 2147483639;
+
+	/* z-index: 2147483639; */
 	top: 0;
 	color: var(--titleBar-inactive-font-color);
 }
@@ -127,39 +68,6 @@ body::after {
 	flex-shrink: unset;
 }
 
-html.desktop-active .fsbl-tab-title-text {
-	background: transparent;
-	color: var(--titleBar-active-font-color);
-}
-
-/* This class applies to a tab that is ALONE and active. For tabs that have neighbors, see .fsbl-tab */
-.fsbl-header-title {
-	position: relative;
-	height: 100%;
-	padding-left: 8px;
-	overflow: hidden;
-	align-items: center;
-	display: flex;
-	padding-right: 14px;
-	transition: background-color 0.2s ease;
-	border-top-left-radius: 10px;
-	border-top-right-radius: 10px;
-	background-color: var(--titlebar-tab-active-background-color);
-}
-
-.fsbl-header-title:hover {
-	background-color: var(--core-primary-2);
-}
-
-html.desktop-active .fsbl-header-title .fsbl-tab-title {
-	color: var(--titlebar-tab-active-font-color);
-}
-
-html.desktop-active .fsbl-header-title:hover {
-	background-color: var(--titlebar-tab-active-background-color);
-	color: var(--titlebar-tab-active-font-color);
-}
-
 .fsbl-header-left {
 	height: calc(100% - 5px); /* leave some space for the resize cursor */
 	margin-left: 2px;
@@ -172,20 +80,17 @@ html.desktop-active .fsbl-header-title:hover {
 }
 
 .fsbl-header-center {
-	height: calc(100% - 10px);
+	overflow: hidden;
+	height: 100%;
 	align-content: center;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: 80%;
+	width: 100%;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-
-	--webkit-user-select: none;
-
 	user-select: none;
 	position: relative;
-	padding-bottom: 3px; /* This needs to be half of the thing subtracted from the height. e.g. height = 100% - 6px, then this is 3px) */
 }
 
 .fsbl-tabs-enabled .fsbl-header-center {
@@ -194,10 +99,6 @@ html.desktop-active .fsbl-header-title:hover {
 	padding-bottom: 0;
 }
 
-html.desktop-active .fsbl-header-right {
-	background: var(--titleBar-background-active-color);
-}
-
 .fsbl-header-right {
 	margin-right: 2px;
 	height: calc(100% - 5px); /* leave some space for the resize cursor */
@@ -212,17 +113,6 @@ html.desktop-active .fsbl-header-right {
 	margin-top: -2px;
 }
 
-html.desktop-active .fsbl-tab-region-drag-area {
-	background-color: var(--titleBar-background-inactive-color);
-}
-
-.tab-drop-region {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 30000;
-}
-
 .fsbl-icon {
 	position: relative;
 	color: var(--titleBar-inactive-font-color);
@@ -257,10 +147,6 @@ html.desktop-active .fsbl-tab-region-drag-area {
 	color: var(--titleBar-button-hover-negative-color);
 }
 
-html.desktop-active .fsbl-icon.fsbl-close:hover {
-	color: var(--titleBar-button-hover-negative-color);
-}
-
 .fsbl-icon-highlighted {
 	transition: background-color 300ms ease-in-out;
 	background-color: var(--titleBar-button-highlight-inactive-color);
@@ -268,21 +154,12 @@ html.desktop-active .fsbl-icon.fsbl-close:hover {
 	color: var(--titlebar-icon-hover-color);
 }
 
-html.desktop-active .fsbl-icon-highlighted {
-	background-color: var(--titleBar-button-highlight-active-color);
-}
-
 .fsbl-minimize {
 	align-items: center;
 	margin-top: -2px;
 	transition: 0.2s all;
 }
 
-.fsbl-ejector {
-	transition: background-color 300ms ease-in-out;
-	background-color: var(--titleBar-button-highlight-active-color);
-}
-
 .linkerSection {
 	display: flex;
 	height: 100%;
@@ -421,54 +298,44 @@ html.desktop-active .fsbl-icon-highlighted {
 	box-sizing: border-box;
 	justify-content: flex-start;
 	transition: color 0.2s ease;
-}
+	transition: transform 0.2s ease-in-out;
+	max-width: max-content;
+	min-width: 30px;
 
-.fsbl-active-tab {
-	background-color: var(--titlebar-tab-active-background-color);
-	color: var(--titlebar-tab-active-font-color);
-}
-
-.fsbl-tab:hover {
-	background-color: var(--titlebar-tab-hover-background-color);
-	color: var(--titlebar-tab-hover-font-color);
+	/* This is important, otherwise flex box expands the final tab, causing scroll buttons to appear when they aren't necessary */
+	overflow: hidden;
 }
 
-.tab-region-wrapper {
-	display: flex;
-	max-width: 90%;
+/* The gap that appears in the final, right-most, position in the tab region when dragging. */
+.fsbl-tab-gap[data-display="true"] {
+	background-color: var(--titlebar-tab-active-background-color);
+	border-top-right-radius: 10px;
+	border-top-left-radius: 10px;
+	height: 23px;
 }
 
-/* When there are multiple tabs, no border for the last tab on the right side. */
-.fsbl-tabs-multiple .tab-region-wrapper > div:last-child {
-	border-right: none;
+.fsbl-active-tab {
+	background-color: var(--titlebar-tab-active-background-color);
+	color: var(--titlebar-tab-active-font-color);
 }
 
-.fsbl-tab-area {
-	height: 100%;
-	display: flex;
-	width: 100%;
-	position: absolute;
-	left: 0;
-	overflow: scroll;
-}
+.fsbl-tab-title {
+	text-align: left;
+	padding-left: 1px;
+	padding-right: 4px;
+	display: inline-flex;
+	align-items: center;
 
-.fsbl-tab-area::-webkit-scrollbar {
-	display: none;
+	/*	min-width: 20px; */
+	color: var(--titlebar-tab-inactive-font-color);
 }
 
-.fsbl-tab-editor {
-	position: relative;
-	z-index: 29999;
-	overflow: auto;
+.fsbl-open-tab {
+	width: 100px;
 }
 
-.fsbl-tab-title {
-	text-align: left;
-	padding-left: 1px;
-	min-width: 0;
-	color: var(--titlebar-tab-inactive-font-color);
-	display: flex;
-	align-items: center;
+.fsbl-tab-title-text {
+	margin-right: 5px;
 }
 
 /* The block below allows for a flex-child to have text truncated with an ellipsis. */
@@ -494,20 +361,8 @@ html.desktop-active .fsbl-icon-highlighted {
 	transition-delay: 0.2s;
 }
 
-.fsbl-tab:hover .fsbl-tab-title .fsbl-tab-title-text {
-	padding-right: 18px;
-}
-
 div.fsbl-tab-close .ff-close {
-	/**
-	Override the "transition: 2s all;" on .ff-close
-	 */
-	transition: 0s all;
-	transition-delay: 0.2s;
-}
-
-html.desktop-active .fsbl-active-tab .fsbl-tab-title {
-	color: var(--titlebar-tab-active-font-color);
+	transition: all 0.2s ease-in;
 }
 
 div.fsbl-tab-close {
@@ -521,7 +376,14 @@ div.fsbl-tab-close {
 	justify-content: center;
 	position: absolute;
 	right: 0;
-	z-index: 30001;
+
+	/** This transition is critical. Without it, a user can click on a tab and accidentally close it. This happens if you click in the vicinity
+	of the close button when a different window currently has focus. This transition ensures that the close button isn't visible at the time
+	that such a click occurs. */
+	transition: visibility 0s ease 0.5s;
+
+	/* z-index: 30001; */
+	background-color: var(--titlebar-tab-hover-background-color);
 }
 
 .fsbl-tab-close:hover {
@@ -532,51 +394,11 @@ div.fsbl-tab-close {
 	visibility: visible;
 }
 
-.fsbl-tab-logo {
-	margin: 0 7px;
-	padding-top: 3px;
-	width: auto;
-	height: auto;
-	color: var(--titlebar-tab-icon-font-color);
-}
-
-.fsbl-tab-logo i {
-	font-size: 14px;
-}
-
-.fsbl-tab-logo img {
-	height: 18px;
-	width: 18px;
-}
-
-.fsbl-tab .fsbl-tab-style {
-	position: relative;
-	height: 100%;
-	left: 0;
-}
-
-.fsbl-tab-region-drag-area::before {
-	content: "a";
-	visibility: hidden;
-}
-
-/* Without content, the ghost-tab caused really strange sizing behaviors. */
-.ghost-tab::before {
-	content: "a";
+/* Hovering will be disabled by the react component if the element is too thin and not the promoted tab */
+.fsbl-tab:hover[data-show-close-button="false"] > .fsbl-tab-close {
 	visibility: hidden;
 }
 
-.ghost-tab {
-	background-color: var(--titlebar-tab-ghost-background-color);
-	border-right: 1px solid var(--titlebar-tab-ghost-border-colorcolor);
-	border-top: 1px solid var(--titlebar-tab-ghost-border-color);
-	width: 175px;
-	opacity: 0.7;
-	position: relative;
-	height: 100%;
-	left: 0;
-}
-
 /* Styles the zoom pop up */
 .fsbl-zoom-popup {
 	display: none;
@@ -618,14 +440,6 @@ div.fsbl-tab-close {
 		/* stylelint-disable-next-line declaration-no-important */
 		display: none !important;
 	}
-
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 70px; /* leave some space for a user to grab */
-	}
-
-	.fsbl-header-title {
-		max-width: 50%;
-	}
 }
 
 /* At 310px, the left section of the header will be removed. */
@@ -634,10 +448,6 @@ div.fsbl-tab-close {
 		/* stylelint-disable-next-line declaration-no-important */
 		display: none !important;
 	}
-
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 60px; /* leave some space for a user to grab */
-	}
 }
 
 /* At 280px, the docking icon will be removed. */
@@ -647,10 +457,6 @@ div.fsbl-tab-close {
 		/* stylelint-disable-next-line declaration-no-important */
 		display: none !important;
 	}
-
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 50px; /* this will leave some space for window dragging */
-	}
 }
 
 /* At 245px, the maximize icon will be removed. */
@@ -659,10 +465,6 @@ div.fsbl-tab-close {
 		/* stylelint-disable-next-line declaration-no-important */
 		display: none !important;
 	}
-
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 40px; /* this will leave some space for window dragging */
-	}
 }
 
 /* At 210px, all other icons icon will be removed. */
@@ -681,21 +483,12 @@ div.fsbl-tab-close {
 		/* stylelint-disable-next-line declaration-no-important */
 		display: none !important;
 	}
-
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 30px; /* this will leave some space for window dragging */
-	}
-
-	.fsbl-header-title {
-		max-width: 25%;
-	}
 }
 
 .finsemble-toolbar .icon-avatar {
 	padding: 3px;
 	font-size: 7px;
 	position: relative;
-	top: -1px;
 }
 
 .finsemble-toolbar .icon-avatar > i {
@@ -703,30 +496,50 @@ div.fsbl-tab-close {
 	top: 1px;
 }
 
-#title_editor_input {
+.finsemble-toolbar .icon-avatar-wrapper {
+	align-items: normal;
+}
+
+/* Do not attempt to animate the input's width. Doing so can cause the input tag to disappear due to stray clicks
+that blur the input while animating */
+input.fsbl-tab-input {
 	font-size: 12px;
-	padding: 2px 10px;
-	width: 80%;
-	border: none;
+	margin-top: 1px;
+	width: 100%;
+	border-right: 2px solid gray;
 	border-bottom: 2px solid #73c3ff;
 	color: white;
 	transition: none;
-	background: transparent;
+	background-color: #353434;
 }
 
-input.tab__input:focus {
+input.fsbl-tab-input:focus {
 	outline: none;
-	animation: input-highlighter 0.3s ease;
 }
 
-@keyframes input-highlighter {
-	from {
-		background: #527bae;
-		width: 0;
-	}
+.fsbl-tabs-container {
+	display: flex;
+	align-items: center;
+}
 
-	to {
-		width: 80%;
-		background: transparent;
-	}
+.fsbl-tabs-scroll-surround {
+	--webkit-app-region: no-drag;
+
+	overflow: hidden;
+}
+
+.fsbl-tab-region-tabbing-enabled .fsbl-tab {
+	display: flex;
+	white-space: nowrap;
+}
+
+.fsbl-tab-scroll-button {
+	--webkit-app-region: no-drag;
+
+	background-color: transparent;
+	color: var(--titleBar-active-font-color);
+}
+
+.fsbl-tab-scroll-button:disabled {
+	color: var(--titleBar-inactive-font-color);
 }

package/react/assets/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 429.3l22.6-22.6 192-192L493.3 192 448 146.7l-22.6 22.6L256 338.7 86.6 169.4 64 146.7 18.7 192l22.6 22.6 192 192L256 429.3z"/></svg>

package/react/assets/icons/chevron-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 82.7l22.6 22.6 192 192L493.3 320 448 365.3l-22.6-22.6L256 173.3 86.6 342.6 64 365.3 18.7 320l22.6-22.6 192-192L256 82.7z"/></svg>

package/react/components/common/ButtonRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonRow.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/common/ButtonRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,MAAM,WAAW,cAAc;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAWD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4CvC,CAAC;AAGF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ButtonRow.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/common/ButtonRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,MAAM,WAAW,cAAc;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAWD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoCvC,CAAC;AAGF,eAAe,SAAS,CAAC"}

package/react/components/common/ButtonRow.js

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { onClickA11y } from "../utils";
 const defaultProps = {
     label: "",
     onClick: () => { },
@@ -9,15 +10,9 @@ const defaultProps = {
 };
 const ButtonRow = ({ label, onClick, iconClass, disabled, img, showDefaultIcon, className, ariaSelected, role = "button", }) => {
     const [imgError, setImgError] = useState(false);
-    return (React.createElement("div", { className: disabled ? "row-btn-disabled" : className, role: role, tabIndex: 0, "aria-selected": ariaSelected, onClick: () => {
-            if (!disabled) {
-                onClick();
-            }
-        }, onKeyDown: (e) => {
-            if ((e.key === "Enter" || e.key === " ") && !disabled) {
-                onClick();
-            }
-        } },
+    return (React.createElement("div", Object.assign({ className: disabled ? "row-btn-disabled" : className, role: role, "aria-selected": ariaSelected }, onClickA11y(() => {
+        !disabled && onClick();
+    })),
         img && (React.createElement("img", { src: img, alt: "", style: showDefaultIcon || imgError ? { display: "none" } : { width: "auto", height: "20px" }, onError: () => {
                 setImgError(true);
             } })),

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonRow.js","sourceRoot":"","sources":["../../../../../src/ui/components/common/ButtonRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAexC,MAAM,YAAY,GAAmB;IACpC,KAAK,EAAE,EAAE;IACT,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;IACjB,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,KAAK;IACf,eAAe,EAAE,KAAK;IACtB,SAAS,EAAE,SAAS;CACpB,CAAC;AAEF,MAAM,SAAS,GAA6B,CAAC,EAC5C,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,EACH,eAAe,EACf,SAAS,EACT,YAAY,EACZ,IAAI,GAAG,QAAQ,GACf,EAAE,EAAE;IACJ,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,OAAO,CACN,6BACC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,EACpD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,mBACI,YAAY,EAC3B,OAAO,EAAE,GAAG,EAAE;YACb,IAAI,CAAC,QAAQ,EAAE;gBACd,OAAO,EAAE,CAAC;aACV;QACF,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACtD,OAAO,EAAE,CAAC;aACV;QACF,CAAC;QAEA,GAAG,IAAI,CACP,6BACC,GAAG,EAAE,GAAG,EACR,GAAG,EAAC,EAAE,EACN,KAAK,EAAE,eAAe,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAC5F,OAAO,EAAE,GAAG,EAAE;gBACb,WAAW,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,GACA,CACF;QACA,CAAC,eAAe,IAAI,QAAQ,CAAC,IAAI,2BAAG,SAAS,EAAC,0BAA0B,GAAG;QAC5E,8BAAM,SAAS,EAAC,UAAU,IAAE,KAAK,CAAQ;QACzC,2BAAG,SAAS,EAAE,SAAS,iBAAe,IAAI,GAAI,CACzC,CACN,CAAC;AACH,CAAC,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG,YAAY,CAAC;AACtC,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ButtonRow.js","sourceRoot":"","sources":["../../../../../src/ui/components/common/ButtonRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAevC,MAAM,YAAY,GAAmB;IACpC,KAAK,EAAE,EAAE;IACT,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;IACjB,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,KAAK;IACf,eAAe,EAAE,KAAK;IACtB,SAAS,EAAE,SAAS;CACpB,CAAC;AAEF,MAAM,SAAS,GAA6B,CAAC,EAC5C,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,EACH,eAAe,EACf,SAAS,EACT,YAAY,EACZ,IAAI,GAAG,QAAQ,GACf,EAAE,EAAE;IACJ,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,OAAO,CACN,2CACC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,EACpD,IAAI,EAAE,IAAI,mBACK,YAAY,IACvB,WAAW,CAAC,GAAG,EAAE;QACpB,CAAC,QAAQ,IAAI,OAAO,EAAE,CAAC;IACxB,CAAC,CAAC;QAED,GAAG,IAAI,CACP,6BACC,GAAG,EAAE,GAAG,EACR,GAAG,EAAC,EAAE,EACN,KAAK,EAAE,eAAe,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAC5F,OAAO,EAAE,GAAG,EAAE;gBACb,WAAW,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,GACA,CACF;QACA,CAAC,eAAe,IAAI,QAAQ,CAAC,IAAI,2BAAG,SAAS,EAAC,0BAA0B,GAAG;QAC5E,8BAAM,SAAS,EAAC,UAAU,IAAE,KAAK,CAAQ;QACzC,2BAAG,SAAS,EAAE,SAAS,iBAAe,IAAI,GAAI,CACzC,CACN,CAAC;AACH,CAAC,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG,YAAY,CAAC;AACtC,eAAe,SAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/common/ContextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAOrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAM3D,OAAO,kCAAkC,CAAC;AAE1C,MAAM,WAAW,gBAAgB;IAChC,WAAW,EAAE;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,iBAAiB,CAAC;KACjC,CAAC;IACF,OAAO,EAAE,GAAG,CAAC;IACb,mBAAmB,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,uBAAuB,YAC1B,GAAG,cACA,iBAAiB,WAEpB,OAAO,4BAwBhB,CAAC;AA+CF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAkBhE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/common/ContextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAOrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAM3D,OAAO,kCAAkC,CAAC;AAG1C,MAAM,WAAW,gBAAgB;IAChC,WAAW,EAAE;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,iBAAiB,CAAC;KACjC,CAAC;IACF,OAAO,EAAE,GAAG,CAAC;IACb,mBAAmB,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,uBAAuB,YAC1B,GAAG,cACA,iBAAiB,WAEpB,OAAO,4BAehB,CAAC;AA+CF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAkBhE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/react/components/common/ContextMenu.js

@@ -6,20 +6,12 @@ import { useOutsideClickDetector } from "../../hooks/useOutsideClickDetector";
 import IconButton from "../notifications/components/shared/IconButton";
 // CSS
 import "../../assets/css/contextMenu.css";
+import { onClickA11y } from "../utils";
 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 :
+        return (React.createElement("div", Object.assign({ key: `${message === null || message === void 0 ? void 0 : message.id}_${menuAction.name}`, className: "context-menu__action", title: menuAction === null || menuAction === void 0 ? void 0 : menuAction.label }, onClickA11y(() => { var _a; return (_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)));
     }

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/common/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,WAAW,mCAAmC;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC5C,UAAU,EAAE,QAAQ,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,mCAAmC,CAyGhF,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/common/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,MAAM,WAAW,mCAAmC;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC5C,UAAU,EAAE,QAAQ,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,mCAAmC,CAwFhF,CAAC;AAEF,eAAe,cAAc,CAAC"}