@finsemble/finsemble-ui 7.0.0-beta.1 → 7.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsemble/finsemble-ui",
-  "version": "7.0.0-beta.1",
+  "version": "7.0.0-beta.4",
   "description": "Ready-made React components to give you a head-start building your SmartDesktop.",
   "types": "index.d.ts",
   "files": [
@@ -28,29 +28,28 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@finsemble/finsemble-api": "7.0.0-beta.1",
+    "@finsemble/finsemble-api": "7.0.0-beta.4",
     "@q42/floating-focus-a11y": "^1.3.3",
     "@reduxjs/toolkit": "^1.5.0",
     "@svgr/webpack": "^5.5.0",
     "@types/async": "3.2.12",
-    "@types/chai": "4.3.0",
-    "@types/lodash": "4.14.179",
-    "@types/mocha": "9.1.0",
-    "@types/react": "17.0.40",
-    "@types/react-dom": "17.0.13",
-    "@types/react-redux": "7.1.23",
+    "@types/chai": "4.3.1",
+    "@types/lodash": "4.14.182",
+    "@types/mocha": "9.1.1",
+    "@types/react": "17.0.44",
+    "@types/react-dom": "17.0.15",
+    "@types/react-redux": "7.1.24",
     "@types/react-relative-portal": "^1.8.1",
     "async": "3.2.3",
     "date-fns": "^2.25.0",
     "immer": "9.0.12",
     "lodash": "4.17.21",
-    "prop-types": "15.8.1",
     "react-circular-progressbar": "^2.0.3",
-    "react-redux": "7.2.6",
+    "react-redux": "7.2.8",
     "react-relative-portal": "^1.8.0",
     "react-sortable-hoc": "2.0.0",
     "react-transition-group": "4.4.2",
-    "redux": "4.1.2",
+    "redux": "4.2.0",
     "redux-loop": "6.2.0",
     "unionize": "3.1.0"
   },
@@ -62,10 +61,10 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.12.10",
     "@babel/register": "^7.16.0",
-    "@storybook/addon-actions": "6.4.19",
-    "@storybook/addon-essentials": "6.4.19",
-    "@storybook/addon-links": "6.4.19",
-    "@storybook/react": "6.4.19",
+    "@storybook/addon-actions": "6.4.22",
+    "@storybook/addon-essentials": "6.4.22",
+    "@storybook/addon-links": "6.4.22",
+    "@storybook/react": "6.4.22",
     "@types/enzyme": "^3.10.8",
     "@types/react-syntax-highlighter": "13.5.2",
     "@types/react-transition-group": "4.4.4",
@@ -73,10 +72,10 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
     "axe-core": "^4.2.3",
     "babel-loader": "^8.2.2",
-    "canvas": "^2.6.1",
-    "chai": "4.3.4",
+    "canvas": "^2.9.0",
+    "chai": "4.3.6",
     "chokidar-cli": "3.0.0",
-    "concurrently": "7.0.0",
+    "concurrently": "7.1.0",
     "copyfiles": "2.4.1",
     "core-js": "^3.15.2",
     "depcheck": "^1.4.3",
@@ -84,7 +83,7 @@
     "ignore-styles": "^5.0.1",
     "improved-yarn-audit": "^3.0.0",
     "jsdom": "^19.0.0",
-    "mocha": "9.1.3",
+    "mocha": "9.2.2",
     "nyc": "15.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -94,18 +93,9 @@
     "typescript": "4.5.5"
   },
   "resolutions": {
-    "@types/react-dom": "17.0.13",
-    "ts-mocha/ts-node": "^10.1.0",
-    "trim": "0.0.3",
-    "css-what": "5.0.1",
-    "prismjs": "1.24.0",
-    "tar": "6.1.9",
-    "set-value": "^4.0.1",
-    "glob-parent": "^5.1.2",
-    "immer": "^9.0.6",
-    "coa": "2.0.2",
-    "node-fetch": "2.6.7",
-    "simple-get": "^4.0.1"
+    "glob-parent": "~5.1.2",
+    "prismjs": "~1.27.0",
+    "trim": "~0.0.3"
   },
   "repository": {
     "type": "git",

package/react/assets/css/button.css

@@ -14,7 +14,7 @@
 
 .finsemble-dropdown__btn:hover,
 .finsemble-dropdown__btn.active {
-	background-color: var(--core-primary-2);
+	background-color: var(--core-primary-4);
 }
 
 .finsemble-dropdown__btn .finsemble-dropdown__btn-options {

package/react/assets/css/favorites.css

@@ -13,13 +13,6 @@
 	white-space: nowrap;
 }
 
-/*
-.favorite-maker {
-	position: absolute;
-	right: 0;
-}
-*/
-
 .rearrange-region div {
 	cursor: pointer;
 }
@@ -52,46 +45,6 @@
 	filter: alpha(opacity=20);
 }
 
-.chevron-container {
-	display: flex;
-	align-items: center;
-}
-
-.scroll-button {
-	color: var(--toolbar-scroll-button-color);
-	margin: 8px 3px;
-	padding: 5px;
-	font-size: 10px;
-	border: 1px solid transparent;
-	border-radius: 50px;
-	height: 10px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.ff-chevron-left:before {
-	padding-right: 2px;
-}
-
-.ff-chevron-right:before {
-	padding-left: 2px;
-}
-
-.scroll-button:hover {
-	background: var(--toolbar-button-hover-color);
-	cursor: pointer;
-}
-
-.greyedOut {
-	opacity: 0.3;
-}
-
-.greyedOut:hover {
-	background: transparent;
-	cursor: default;
-}
-
 #favoritesContainer {
 	overflow: hidden;
 	display: flex;

package/react/assets/css/finsemble.css

@@ -11,6 +11,9 @@
 @import url("./font-finance.css");
 @import url("./fonts/Open_Sans/OpenSans-Definition.css");
 @import url("./focus.css");
+
+@import url("./shared/common.css");
+
 .hidden {
 	display: none !important;
 }

package/react/assets/css/linkerWindow.css

@@ -95,6 +95,18 @@ body .linkerContainer {
 	border: 1px solid #f29a01;
 }
 
+.channel7 .linker-glyph,
+.linker-group.channel7 {
+	background-color: #3c1d5f;
+	border: 1px solid #341853;
+}
+
+.channel8 .linker-glyph,
+.linker-group.channel8 {
+	background-color: #690f2d;
+	border: 1px solid #5c0d27;
+}
+
 /* To reduce the number of channels in the linker simply hide them with CSS!
 .channel6, .channel5 {
 	display: none;
@@ -113,7 +125,7 @@ body .linkerContainer {
     display: block;
     visibility: visible;
     top: -10px;
-    position: relative;	
+    position: relative;
 }
 */
 

package/react/assets/css/menus.css

@@ -80,8 +80,8 @@ html.menu-portal body.menu-no-scroll {
 The "focused" attribute is set during keyboard navigation.
 */
 
-.menu-item[focused],
-.menu-item-icon[focused],
+.menu-item:focus,
+.menu-item-icon:focus,
 .menu-item:hover,
 .menu-item:focus,
 .finsemble-toolbar-button:hover {

package/react/assets/css/notificationsCenter.css

@@ -6,7 +6,7 @@ body.notifications-center-body {
 	background-color: transparent;
 	bottom: 0;
 	margin: 0;
-	overflow: hidden;
+	overflow: hidden !important; /* necessary to hide default scrollbar, cause the parent html element is restyled at the `hackScrollbar()` function */
 }
 
 body.notifications-center-body.notifications-popped-in {
@@ -113,7 +113,11 @@ body.notifications-center-body.notifications-popped-in {
 	display: flex;
 	flex-direction: row;
 	width: 100%;
-	padding: 2px 0;
+	padding: 5px 0;
+}
+
+.notifications-center-controls__row.center {
+	justify-content: center;
 }
 
 .notifications-center-controls__filter-btn {
@@ -128,6 +132,7 @@ body.notifications-center-body.notifications-popped-in {
 	padding: 0px 7px;
 	margin: 0 3px;
 	cursor: pointer;
+	white-space: nowrap;
 }
 
 .notifications-center-controls__filter-btn.active {
@@ -595,3 +600,29 @@ body.notifications-toasts-body {
 .notifications-toast-exit-active {
 	animation: slide-out-right-opaque 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
 }
+
+.notifications-center-controls__filter-btn i {
+	padding-right: 5px;
+}
+
+.notifications-center-controls__filter-btn i.icon_active {
+	color: var(--accent-positive);
+}
+
+.visible {
+	display: flex;
+}
+
+.invisible {
+	display: none;
+}
+
+.enabled {
+	cursor: pointer;
+	opacity: 1;
+}
+
+.disabled {
+	cursor: default;
+	opacity: 0.4;
+}

package/react/assets/css/shared/common.css

@@ -0,0 +1,40 @@
+/* chverons */
+.chevron-container {
+	display: flex;
+	align-items: center;
+}
+
+.ff-chevron-left:before {
+	padding-right: 2px;
+}
+
+.ff-chevron-right:before {
+	padding-left: 2px;
+}
+
+.scroll-button {
+	color: var(--toolbar-scroll-button-color);
+	margin: 8px 3px;
+	padding: 5px;
+	font-size: 10px;
+	border: 1px solid transparent;
+	border-radius: 50px;
+	height: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.scroll-button:hover {
+	background: var(--toolbar-button-hover-color);
+	cursor: pointer;
+}
+
+.greyedOut {
+	opacity: 0.3;
+}
+
+.greyedOut:hover {
+	background: transparent;
+	cursor: default;
+}

package/react/assets/css/userPreferences.css

@@ -44,11 +44,11 @@ img {
 	flex-direction: column;
 	justify-content: start;
 	color: var(--content-font-color);
-	background-color: var(--content-nav-background-color);
+	background-color: var(--core-primary-1);
 }
 
 .complex-menu-left-nav-header {
-	background-color: var(--content-nav-header-background-color);
+	background-color: var(--core-primary-1);
 	font-weight: var(--content-nav-header-font-weight);
 	font-size: var(--content-nav-header-font-size);
 	margin-bottom: 30px;
@@ -125,13 +125,14 @@ img {
 	align-items: center;
 }
 
-.complex-menu-section-toggle:hover {
+.complex-menu-section-toggle:hover,
+.complex-menu-section-toggle:focus {
 	cursor: pointer;
-	background-color: var(--content-nav-highlighter-hover);
+	background-color: var(--accent-primary);
 }
 
 .active-section-toggle {
-	background-color: var(--content-nav-highlighter);
+	background-color: var(--accent-primary-1);
 }
 
 .complex-menu-content-row {
@@ -139,7 +140,7 @@ img {
 	padding: 0.75em;
 	align-content: flex-start;
 	user-select: none;
-	background-color: var(--content-background-color);
+	background-color: var(--core-primary-2);
 	overflow: auto;
 }
 
@@ -188,7 +189,7 @@ img {
 }
 
 .workspace-item:hover {
-	background-color: var(--content-nav-highlighter-hover);
+	background-color: var(--core-primary-2);
 }
 
 .individual-workspace-actions {
@@ -272,8 +273,8 @@ img {
 
 .action-button:hover {
 	cursor: pointer;
-	border: solid 1px var(--content-button-neutral-hover-color);
-	color: var(--content-button-neutral-hover-color);
+	border: solid 1px var(--font-color);
+	color: var(--font-color);
 }
 
 .disabled-button,
@@ -403,11 +404,11 @@ img {
 }
 
 .daily-select.disabled {
-	color: var(--content-nav-highlighter);
+	color: var(--core-primary-5);
 }
 
 .disabled-restart {
-	color: var(--content-nav-highlighter) !important;
+	color: var(--core-primary-5) !important;
 }
 
 select:focus,
@@ -480,7 +481,7 @@ option:focus {
 }
 
 .row-btn:hover {
-	background: var(--menu-actions-hover-color);
+	background: var(--accent-primary);
 	border-radius: 0px 20px 20px 0px;
 }
 
@@ -571,3 +572,7 @@ option:focus {
 	margin-top: 8px;
 	margin-left: 10px;
 }
+
+.complex-menu-wrapper .workspace-list .individual-workspace-action:hover {
+	color: var(--font-color);
+}

package/react/assets/css/windowTitleBar.css

@@ -4,6 +4,13 @@
  * All rights reserved.
  */
 @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("./font-finance.css");
+@import url("./fonts/Open_Sans/OpenSans-Definition.css");
+@import url("./focus.css");
 
 .fsbl-drag-handle {
 	z-index: 2147483641;
@@ -635,7 +642,7 @@ html.desktop-active .fsbl-active-tab .fsbl-tab-title {
 	background: transparent;
 }
 
-input:focus {
+input.tab__input:focus {
 	outline: none;
 	animation: inputHighlighter 0.3s ease;
 }

package/react/assets/icons/server.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 7.7 9.2" style="enable-background:new 0 0 7.7 9.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M1.2,6.5H2c0.2,0,0.3-0.1,0.3-0.3V5.4c0-0.1,0-0.1-0.1-0.2C2.2,5.2,2.1,5.2,2,5.2H1.2c-0.2,0-0.3,0.1-0.3,0.3
+		v0.8C0.9,6.4,1.1,6.5,1.2,6.5z M1.5,6V5.7h0.3V6H1.5z"/>
+	<path class="st0" d="M1.2,4.8H2c0.2,0,0.3-0.1,0.3-0.3V3.7c0-0.1,0-0.1-0.1-0.2C2.2,3.5,2.1,3.4,2,3.4H1.2c-0.2,0-0.3,0.1-0.3,0.3
+		v0.8C0.9,4.7,1.1,4.8,1.2,4.8z M1.5,4.2V4h0.3v0.3H1.5z"/>
+	<path class="st0" d="M1.2,8.3H2c0.2,0,0.3-0.1,0.3-0.3V7.2C2.3,7,2.2,6.9,2,6.9H1.2C1.1,6.9,0.9,7,0.9,7.2V8
+		C0.9,8.1,1.1,8.3,1.2,8.3z M1.8,7.4v0.3H1.5V7.4H1.8z"/>
+	<path class="st0" d="M5.7,6.5h0.8c0.2,0,0.3-0.1,0.3-0.3V5.4c0-0.1,0-0.1-0.1-0.2C6.6,5.2,6.6,5.2,6.5,5.2H5.7
+		c-0.2,0-0.3,0.1-0.3,0.3v0.8C5.4,6.4,5.5,6.5,5.7,6.5z M6,6V5.7h0.3V6H6z"/>
+	<path class="st0" d="M5.7,4.8h0.8c0.2,0,0.3-0.1,0.3-0.3V3.7c0-0.1,0-0.1-0.1-0.2C6.6,3.5,6.6,3.4,6.5,3.4H5.7
+		c-0.2,0-0.3,0.1-0.3,0.3v0.8C5.4,4.7,5.5,4.8,5.7,4.8z M6,4.2V4h0.3v0.3H6z"/>
+	<path class="st0" d="M5.7,8.3h0.8c0.2,0,0.3-0.1,0.3-0.3V7.2c0-0.2-0.1-0.3-0.3-0.3H5.7C5.5,6.9,5.4,7,5.4,7.2V8
+		C5.4,8.1,5.5,8.3,5.7,8.3z M6.2,7.4v0.3H6V7.4H6.2z"/>
+	<path class="st0" d="M7.3,0H4.9C4.7,0,4.5,0.2,4.5,0.5v8.3c0,0.2,0.2,0.5,0.5,0.5h2.3c0.2,0,0.5-0.2,0.5-0.5V0.5
+		C7.7,0.2,7.5,0,7.3,0z M7.1,0.6v8.1H5V0.6H7.1z"/>
+	<path class="st0" d="M2.8,0H0.5C0.2,0,0,0.2,0,0.5v8.3C0,9,0.2,9.2,0.5,9.2h2.3C3,9.2,3.3,9,3.3,8.8V0.5C3.3,0.2,3,0,2.8,0z
+		 M2.7,0.6v8.1H0.6V0.6H2.7z"/>
+</g>
+</svg>

package/react/components/common/ButtonIcon.js

@@ -5,7 +5,7 @@ import { FinsembleIcon } from "./FinsembleIcon";
 export const ButtonIcon = ({ icon, text = "", disabled = false, tabIndex = 0, onClick = () => { }, className = "", buttonAttributes = {}, }) => {
     const containerClassName = fashion_class_lookup.icon;
     return (React.createElement("div", { className: `${containerClassName} ${className}` },
-        React.createElement("button", Object.assign({}, buttonAttributes, { onClick: onClick, disabled: disabled, title: text, tabIndex: tabIndex }),
+        React.createElement("button", Object.assign({}, buttonAttributes, { onClick: onClick, disabled: disabled, title: text, "aria-label": text, tabIndex: tabIndex }),
             React.createElement(FinsembleIcon, { icon: icon }))));
 };
 //# sourceMappingURL=ButtonIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.js","sourceRoot":"","sources":["../../../src/components/common/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,CAAC,MAAM,UAAU,GAAkC,CAAC,EACzD,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,CAAC,EACZ,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,GACrB,EAAE,EAAE;IACJ,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,IAAI,CAAC;IAErD,OAAO,CACN,6BAAK,SAAS,EAAE,GAAG,kBAAkB,IAAI,SAAS,EAAE;QACnD,gDAAY,gBAAgB,IAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ;YAClG,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,GAAkB,CACnC,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { AdvancedButtonProps, fashion_class_lookup } from \"./Button\";\nimport \"./css/button.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport const ButtonIcon: React.FC<AdvancedButtonProps> = ({\n\ticon,\n\ttext = \"\",\n\tdisabled = false,\n\ttabIndex = 0,\n\tonClick = () => {},\n\tclassName = \"\",\n\tbuttonAttributes = {},\n}) => {\n\tconst containerClassName = fashion_class_lookup.icon;\n\n\treturn (\n\t\t<div className={`${containerClassName} ${className}`}>\n\t\t\t<button {...buttonAttributes} onClick={onClick} disabled={disabled} title={text} tabIndex={tabIndex}>\n\t\t\t\t<FinsembleIcon icon={icon}></FinsembleIcon>\n\t\t\t</button>\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"ButtonIcon.js","sourceRoot":"","sources":["../../../src/components/common/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,CAAC,MAAM,UAAU,GAAkC,CAAC,EACzD,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,CAAC,EACZ,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,GACrB,EAAE,EAAE;IACJ,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,IAAI,CAAC;IAErD,OAAO,CACN,6BAAK,SAAS,EAAE,GAAG,kBAAkB,IAAI,SAAS,EAAE;QACnD,gDACK,gBAAgB,IACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,gBACC,IAAI,EAChB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,GAAkB,CACnC,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { AdvancedButtonProps, fashion_class_lookup } from \"./Button\";\nimport \"./css/button.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport const ButtonIcon: React.FC<AdvancedButtonProps> = ({\n\ticon,\n\ttext = \"\",\n\tdisabled = false,\n\ttabIndex = 0,\n\tonClick = () => {},\n\tclassName = \"\",\n\tbuttonAttributes = {},\n}) => {\n\tconst containerClassName = fashion_class_lookup.icon;\n\n\treturn (\n\t\t<div className={`${containerClassName} ${className}`}>\n\t\t\t<button\n\t\t\t\t{...buttonAttributes}\n\t\t\t\tonClick={onClick}\n\t\t\t\tdisabled={disabled}\n\t\t\t\ttitle={text}\n\t\t\t\taria-label={text}\n\t\t\t\ttabIndex={tabIndex}\n\t\t\t>\n\t\t\t\t<FinsembleIcon icon={icon}></FinsembleIcon>\n\t\t\t</button>\n\t\t</div>\n\t);\n};\n"]}

package/react/components/common/ButtonRow.js

@@ -20,12 +20,12 @@ const ButtonRow = ({ label, onClick, iconClass, disabled, img, showDefaultIcon,
                 func();
             }
         } },
-        img && (React.createElement("img", { src: img, style: showDefaultIcon || imgError ? { display: "none" } : { width: "auto", height: "20px" }, onError: () => {
+        img && (React.createElement("img", { src: img, alt: "", style: showDefaultIcon || imgError ? { display: "none" } : { width: "auto", height: "20px" }, onError: () => {
                 setImgError(true);
             } })),
         (showDefaultIcon || imgError) && React.createElement("i", { className: "ff-finsemble default-img" }),
         React.createElement("span", { className: "row__lbl" }, label),
-        React.createElement("i", { className: iconClass })));
+        React.createElement("i", { className: iconClass, "aria-hidden": true })));
 };
 ButtonRow.defaultProps = defaultProps;
 export default ButtonRow;

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonRow.js","sourceRoot":"","sources":["../../../src/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,GACT,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,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE;YACb,IAAI,CAAC,QAAQ,EAAE;gBACd,MAAM,IAAI,GAAG,OAAO,CAAC;gBACrB,IAAI,EAAE,CAAC;aACP;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,MAAM,IAAI,GAAG,OAAO,CAAC;gBACrB,IAAI,EAAE,CAAC;aACP;QACF,CAAC;QAEA,GAAG,IAAI,CACP,6BACC,GAAG,EAAE,GAAG,EACR,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,GAAI,CACtB,CACN,CAAC;AACH,CAAC,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG,YAAY,CAAC;AACtC,eAAe,SAAS,CAAC","sourcesContent":["import React, { useState } from \"react\";\n\nexport interface ButtonRowProps {\n\tlabel?: string;\n\tonClick: Function;\n\ticonClass?: string;\n\tdisabled?: boolean;\n\timg?: string;\n\tshowDefaultIcon?: boolean;\n\tclassName?: string;\n\trole?: string;\n\ttabIndex?: number;\n\tonKeyDown?: Function;\n}\n\nconst defaultProps: ButtonRowProps = {\n\tlabel: \"\",\n\tonClick: () => {},\n\ticonClass: \"\",\n\tdisabled: false,\n\tshowDefaultIcon: false,\n\tclassName: \"row-btn\",\n};\n\nconst ButtonRow: React.FC<ButtonRowProps> = ({\n\tlabel,\n\tonClick,\n\ticonClass,\n\tdisabled,\n\timg,\n\tshowDefaultIcon,\n\tclassName,\n}) => {\n\tconst [imgError, setImgError] = useState(false);\n\treturn (\n\t\t<div\n\t\t\tclassName={disabled ? \"row-btn-disabled\" : className}\n\t\t\trole=\"button\"\n\t\t\ttabIndex={0}\n\t\t\tonClick={() => {\n\t\t\t\tif (!disabled) {\n\t\t\t\t\tconst func = onClick;\n\t\t\t\t\tfunc();\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonKeyDown={(e) => {\n\t\t\t\tif ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\n\t\t\t\t\tconst func = onClick;\n\t\t\t\t\tfunc();\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t{img && (\n\t\t\t\t<img\n\t\t\t\t\tsrc={img}\n\t\t\t\t\tstyle={showDefaultIcon || imgError ? { display: \"none\" } : { width: \"auto\", height: \"20px\" }}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{(showDefaultIcon || imgError) && <i className=\"ff-finsemble default-img\" />}\n\t\t\t<span className=\"row__lbl\">{label}</span>\n\t\t\t<i className={iconClass} />\n\t\t</div>\n\t);\n};\n\nButtonRow.defaultProps = defaultProps;\nexport default ButtonRow;\n"]}
+{"version":3,"file":"ButtonRow.js","sourceRoot":"","sources":["../../../src/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,GACT,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,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE;YACb,IAAI,CAAC,QAAQ,EAAE;gBACd,MAAM,IAAI,GAAG,OAAO,CAAC;gBACrB,IAAI,EAAE,CAAC;aACP;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,MAAM,IAAI,GAAG,OAAO,CAAC;gBACrB,IAAI,EAAE,CAAC;aACP;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","sourcesContent":["import React, { useState } from \"react\";\n\nexport interface ButtonRowProps {\n\tlabel?: string;\n\tonClick: Function;\n\ticonClass?: string;\n\tdisabled?: boolean;\n\timg?: string;\n\tshowDefaultIcon?: boolean;\n\tclassName?: string;\n\trole?: string;\n\ttabIndex?: number;\n\tonKeyDown?: Function;\n}\n\nconst defaultProps: ButtonRowProps = {\n\tlabel: \"\",\n\tonClick: () => {},\n\ticonClass: \"\",\n\tdisabled: false,\n\tshowDefaultIcon: false,\n\tclassName: \"row-btn\",\n};\n\nconst ButtonRow: React.FC<ButtonRowProps> = ({\n\tlabel,\n\tonClick,\n\ticonClass,\n\tdisabled,\n\timg,\n\tshowDefaultIcon,\n\tclassName,\n}) => {\n\tconst [imgError, setImgError] = useState(false);\n\treturn (\n\t\t<div\n\t\t\tclassName={disabled ? \"row-btn-disabled\" : className}\n\t\t\trole=\"button\"\n\t\t\ttabIndex={0}\n\t\t\tonClick={() => {\n\t\t\t\tif (!disabled) {\n\t\t\t\t\tconst func = onClick;\n\t\t\t\t\tfunc();\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonKeyDown={(e) => {\n\t\t\t\tif ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\n\t\t\t\t\tconst func = onClick;\n\t\t\t\t\tfunc();\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t{img && (\n\t\t\t\t<img\n\t\t\t\t\tsrc={img}\n\t\t\t\t\talt=\"\"\n\t\t\t\t\tstyle={showDefaultIcon || imgError ? { display: \"none\" } : { width: \"auto\", height: \"20px\" }}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{(showDefaultIcon || imgError) && <i className=\"ff-finsemble default-img\" />}\n\t\t\t<span className=\"row__lbl\">{label}</span>\n\t\t\t<i className={iconClass} aria-hidden={true} />\n\t\t</div>\n\t);\n};\n\nButtonRow.defaultProps = defaultProps;\nexport default ButtonRow;\n"]}

package/react/components/common/Checkbox.js

@@ -10,7 +10,7 @@ export const Checkbox = ({ checked = false, disabled = false, label = "", onClic
     if (disabled) {
         style = {
             cursor: "default",
-            opacity: ".55",
+            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) => {

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;AAS5B,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EACjD,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,EAAE,EACV,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,KAAK;SACd,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;QAClF,6BAAK,SAAS,EAAC,6BAA6B,IAAE,KAAK,CAAO,CACrD,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\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\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: \".55\",\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<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,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,oBAAoB,CAAC;AAS5B,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EACjD,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,EAAE,EACV,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;QAClF,6BAAK,SAAS,EAAC,6BAA6B,IAAE,KAAK,CAAO,CACrD,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\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\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<div className=\"complex-menu-checkbox-label\">{label}</div>\n\t\t</div>\n\t);\n};\n"]}

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

@@ -0,0 +1,16 @@
+import React, { ErrorInfo, ReactNode } from "react";
+declare type ErrorBoundaryProps = {
+    fallBackUI?: ReactNode;
+};
+declare type ErrorBoundaryState = {
+    hasError: boolean;
+};
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): React.ReactNode;
+}
+export {};

package/react/components/common/ErrorBoundary.js

@@ -0,0 +1,22 @@
+import React from "react";
+export class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error(error, errorInfo);
+        FSBL.Clients.Logger.system.error(error, errorInfo);
+    }
+    render() {
+        var _a;
+        if (this.state.hasError) {
+            return (_a = this.props.fallBackUI) !== null && _a !== void 0 ? _a : React.createElement(React.Fragment, null);
+        }
+        return this.props.children;
+    }
+}
+//# sourceMappingURL=ErrorBoundary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../../src/components/common/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AA2BpD,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,SAAiD;IACzF,YAAY,KAAyB;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClC,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAE3C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC3B,CAAC;IAED,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QAEnD,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;QAChC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;;QACL,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YAExB,OAAO,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,mCAAI,yCAAK,CAAC;SACtC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC5B,CAAC;CACD","sourcesContent":["import React, { ErrorInfo, ReactNode } from \"react\";\n\ntype ErrorBoundaryProps = {\n\tfallBackUI?: ReactNode;\n};\ntype ErrorBoundaryState = {\n\thasError: boolean;\n};\n\n/**\n * Something like a try catch in React component form with some exceptions. Catches Errors and logs them to the central\n * logger. Prevents uncaught exceptions on the render of child components from unintentionally breaking the entire UI.\n * Has the added benefit of sending the errors to the Central Logger\n *\n * Note: The exceptions are that it not catch errors in Event handlers and Asynchronous code.\n * Note: This does not catch errors in the current component directly, only child components. See below for example\n *\n * Eg: WON'T WORK\n *\n * const ContainerComponent = ({test}:any) => <ErrorBoundary><div>{test.undefined.length}</div></ErrorBoundary>\n *\n * WILL WORK:\n * const BrokenComponent = ({test}:any) => <div>{test.undefined.length}</div>\n * const ContainerComponent = ({test}:any) => <ErrorBoundary><BrokenComponent test={test}/></ErrorBoundary>\n *\n * @see https://reactjs.org/docs/error-boundaries.html for more information on Error Boundaries\n */\nexport class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n\tconstructor(props: ErrorBoundaryProps) {\n\t\tsuper(props);\n\t\tthis.state = { hasError: false };\n\t}\n\n\tstatic getDerivedStateFromError(error: Error) {\n\t\t// Update state so the next render will show the fallback UI.\n\t\treturn { hasError: true };\n\t}\n\n\tcomponentDidCatch(error: Error, errorInfo: ErrorInfo) {\n\t\t// Log the error to the dev tools where developers will expect it but also send it to the central logger\n\t\tconsole.error(error, errorInfo);\n\t\tFSBL.Clients.Logger.system.error(error, errorInfo);\n\t}\n\n\trender() {\n\t\tif (this.state.hasError) {\n\t\t\t// Render custom fallback UI or default to nothing\n\t\t\treturn this.props.fallBackUI ?? <></>;\n\t\t}\n\n\t\treturn this.props.children;\n\t}\n}\n"]}

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

@@ -1,10 +1,10 @@
 import React from "react";
 import "./css/icon.css";
-export declare type FinsembleIconType = "alwaysOnTop" | "caret" | "check-square" | "check" | "chevron-left" | "chevron-right" | "close" | "code-block" | "copy" | "documentation" | "exclamation-circle" | "external-link" | "flag" | "folder" | "font" | "globe" | "hdd" | "key" | "life-ring" | "linker" | "lock" | "magic" | "maximize" | "minimize" | "moon" | "paint-roller" | "pencil" | "plus" | "question-circle" | "search" | "sun" | "times" | "toggle-off" | "toggle-on" | "toolbar" | "tools" | "trash" | "upload" | "window";
+export declare type FinsembleIconType = "alwaysOnTop" | "caret" | "check-square" | "check" | "chevron-left" | "chevron-right" | "close" | "code-block" | "copy" | "documentation" | "exclamation-circle" | "external-link" | "flag" | "folder" | "font" | "globe" | "hdd" | "key" | "life-ring" | "linker" | "lock" | "magic" | "maximize" | "minimize" | "moon" | "paint-roller" | "pencil" | "plus" | "question-circle" | "search" | "server" | "sun" | "times" | "toggle-off" | "toggle-on" | "toolbar" | "tools" | "trash" | "upload" | "window";
 export declare type FinsembleIconProps = {
     icon: FinsembleIconType;
     className?: string;
     onClick?: (e: React.MouseEvent) => void;
     label?: string;
 };
-export declare const FinsembleIcon: (props: FinsembleIconProps) => JSX.Element;
+export declare const FinsembleIcon: ({ icon, onClick, className, label }: FinsembleIconProps) => JSX.Element;

package/react/components/common/FinsembleIcon.js

@@ -30,6 +30,7 @@ import { ReactComponent as PencilIcon } from "../../assets/icons/pencil.svg";
 import { ReactComponent as PlusIcon } from "../../assets/icons/plus.svg";
 import { ReactComponent as QuestionCircleIcon } from "../../assets/icons/question-circle.svg";
 import { ReactComponent as SearchIcon } from "../../assets/icons/search.svg";
+import { ReactComponent as ServerIcon } from "../../assets/icons/server.svg";
 import { ReactComponent as SunIcon } from "../../assets/icons/sun.svg";
 import { ReactComponent as TimesIcon } from "../../assets/icons/times.svg";
 import { ReactComponent as ToggleOffIcon } from "../../assets/icons/toggle-off.svg";
@@ -70,6 +71,7 @@ const icons = {
     plus: PlusIcon,
     "question-circle": QuestionCircleIcon,
     search: SearchIcon,
+    server: ServerIcon,
     sun: SunIcon,
     times: TimesIcon,
     "toggle-off": ToggleOffIcon,
@@ -80,9 +82,13 @@ const icons = {
     upload: UploadIcon,
     window: WindowIcon,
 };
-export const FinsembleIcon = (props) => {
-    var _a;
-    const Icon = icons[props.icon];
-    return (React.createElement("span", { className: ["finsemble-icon", `finsemble-icon-${props.icon}`, props.className || ""].join(" "), role: "img", "aria-label": (_a = props.label) !== null && _a !== void 0 ? _a : `${props.icon} icon`, onClick: (e) => props.onClick && props.onClick(e) }, Icon && React.createElement(Icon, null)));
+export const FinsembleIcon = ({ icon, onClick = () => { }, className = "", label = "" }) => {
+    const Icon = icons[icon];
+    return (React.createElement("span", Object.assign({ className: ["finsemble-icon", `finsemble-icon-${icon}`, className].join(" ") }, (label
+        ? {
+            role: "img",
+            "aria-label": label,
+        }
+        : {}), { onClick: onClick }), Icon && React.createElement(Icon, null)));
 };
 //# sourceMappingURL=FinsembleIcon.js.map