@finsemble/finsemble-ui 6.6.0 → 7.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsemble/finsemble-ui",
-  "version": "6.6.0",
+  "version": "7.0.0-beta.2",
   "description": "Ready-made React components to give you a head-start building your SmartDesktop.",
   "types": "index.d.ts",
   "files": [
@@ -10,6 +10,7 @@
   "scripts": {
     "build": "yarn clean && yarn copy-css && tsc",
     "do-audit": " improved-yarn-audit --min-severity high",
+    "depcheck": "depcheck",
     "clean": "rimraf ./react & rimraf coverage",
     "copy-css": "copyfiles -u 1 \"./src/assets/**/*\" react/ && copyfiles -u 1 \"src/**/*.css\" \"react/\"",
     "dev": "yarn copy-css && yarn watch",
@@ -27,26 +28,22 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@finsemble/finsemble-api": "6.6.0",
+    "@finsemble/finsemble-api": "7.0.0-beta.2",
     "@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.178",
-    "@types/mime-types": "^2.1.0",
+    "@types/lodash": "4.14.181",
     "@types/mocha": "9.1.0",
-    "@types/react": "17.0.38",
-    "@types/react-dom": "17.0.11",
-    "@types/react-input-autosize": "2.2.1",
-    "@types/react-redux": "7.1.22",
+    "@types/react": "17.0.43",
+    "@types/react-dom": "17.0.14",
+    "@types/react-redux": "7.1.23",
     "@types/react-relative-portal": "^1.8.1",
-    "@types/react-syntax-highlighter": "13.5.2",
     "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-relative-portal": "^1.8.0",
@@ -61,14 +58,13 @@
     "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-methods": "7.16.7",
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.12.10",
     "@babel/register": "^7.16.0",
-    "@storybook/addon-actions": "6.4.13",
+    "@storybook/addon-actions": "6.4.19",
     "@storybook/addon-essentials": "6.4.19",
-    "@storybook/addon-links": "6.4.13",
-    "@storybook/react": "6.4.13",
+    "@storybook/addon-links": "6.4.19",
+    "@storybook/react": "6.4.19",
     "@types/enzyme": "^3.10.8",
     "@types/react-syntax-highlighter": "13.5.2",
     "@types/react-transition-group": "4.4.4",
@@ -76,40 +72,30 @@
     "@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",
     "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",
-    "mime-types": "^2.1.28",
-    "mocha": "9.1.3",
+    "mocha": "9.2.2",
     "nyc": "15.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "rimraf": "3.0.2",
-    "sinon": "^12.0.0",
-    "ts-loader": "^9.2.3",
+    "sinon": "^13.0.1",
     "ts-mocha": "9.0.2",
     "typescript": "4.5.5"
   },
   "resolutions": {
-    "@types/react-dom": "17.0.11",
-    "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

@@ -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;

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/ColorPicker.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import "./css/color-picker.css";
 const RE_HEX_COLOR = /^#[0-9a-f]{6}$/i;
 export var RGBA_CHANNEL;
@@ -29,23 +29,24 @@ function colorToHex(color) {
     return `#${hex}`;
 }
 export const ColorPicker = ({ id, startColor, updateColor }) => {
-    const [color, setColor] = useState(colorToHex(startColor));
-    const isValid = color.match(RE_HEX_COLOR) !== null;
-    useEffect(() => {
-        if (isValid) {
-            updateColor(color);
-        }
-    }, [color]);
-    useEffect(() => {
-        if (startColor) {
-            setColor(startColor);
-        }
-    }, [startColor]);
+    const [priorColor, setPriorColor] = useState(startColor);
+    const [inputValue, setInputValue] = useState(null);
+    if (priorColor !== startColor) {
+        setPriorColor(startColor);
+        setInputValue(null);
+    }
+    const isValid = inputValue === null || inputValue.match(RE_HEX_COLOR) !== null;
+    const color = colorToHex(startColor);
     const onColorChanged = ({ target }) => {
-        setColor(target.value);
+        const maybeNewColor = target.value;
+        setInputValue(maybeNewColor);
+        const isNewValueValid = maybeNewColor.match(RE_HEX_COLOR) !== null;
+        if (isNewValueValid) {
+            updateColor(maybeNewColor);
+        }
     };
     return (React.createElement("div", { className: "color-picker" },
         React.createElement("input", { className: "theme-color-picker", type: "color", value: color, onChange: onColorChanged, "aria-hidden": "true" }),
-        React.createElement("input", Object.assign({ className: "theme-color-picker-text", type: "text", "aria-invalid": !isValid, value: color, onChange: onColorChanged }, { id }))));
+        React.createElement("input", Object.assign({ className: "theme-color-picker-text", type: "text", "aria-invalid": !isValid, value: inputValue !== null && inputValue !== void 0 ? inputValue : color, onChange: onColorChanged }, { id }))));
 };
 //# sourceMappingURL=ColorPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/common/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport \"./css/color-picker.css\";\n\nconst RE_HEX_COLOR = /^#[0-9a-f]{6}$/i;\n\nexport enum RGBA_CHANNEL {\n\tRED = 0,\n\tGREEN = 1,\n\tBLUE = 2,\n\tALPHA = 3,\n}\n\n// From https://stackoverflow.com/a/24390910\nexport function colorToRGBA(color: string) {\n\t// Returns the color as an array of [r, g, b, a] -- all range from 0 - 255\n\t// color must be a valid canvas fillStyle. This will cover most anything\n\t// you'd want to use.\n\t// Examples:\n\t// colorToRGBA('red')  # [255, 0, 0, 255]\n\t// colorToRGBA('#f00') # [255, 0, 0, 255]\n\tconst cvs = document.createElement(\"canvas\");\n\tcvs.height = 1;\n\tcvs.width = 1;\n\n\tconst ctx = cvs.getContext(\"2d\")!;\n\tctx.fillStyle = color;\n\tctx.fillRect(0, 0, 1, 1);\n\treturn ctx.getImageData(0, 0, 1, 1).data;\n}\n\nfunction byteToHex(num: number) {\n\t// Turns a number (0-255) into a 2-character hex number (00-ff)\n\treturn `0${num.toString(16)}`.slice(-2);\n}\n\nfunction colorToHex(color: string) {\n\t// Convert any CSS color to a hex representation\n\t// Examples:\n\t// colorToHex('red')            # '#ff0000'\n\t// colorToHex('rgb(255, 0, 0)') # '#ff0000'\n\t// colorToHex('#ff0000') # '#ff0000'\n\tif (color.match(RE_HEX_COLOR) !== null) {\n\t\treturn color;\n\t}\n\tconst rgba = colorToRGBA(color);\n\tconst hex = [0, 1, 2].map((idx) => byteToHex(rgba[idx])).join(\"\");\n\treturn `#${hex}`;\n}\n\nexport interface ColorPickerProps {\n\tstartColor: string;\n\tupdateColor: (newColor: string) => void;\n\tid?: string;\n}\n\n/**\n * ColorPicker component to update theme variables.  Displays a browser color input alongside a text version for hex color values.\n *\n * @param {{ [id]: string, startColor: string; updateColor: function }} { id, startColor, callback }\n */\nexport const ColorPicker = ({ id, startColor, updateColor }: ColorPickerProps) => {\n\tconst [color, setColor] = useState(colorToHex(startColor));\n\tconst isValid = color.match(RE_HEX_COLOR) !== null;\n\n\tuseEffect(() => {\n\t\tif (isValid) {\n\t\t\tupdateColor(color);\n\t\t}\n\t}, [color]);\n\n\tuseEffect(() => {\n\t\tif (startColor) {\n\t\t\tsetColor(startColor);\n\t\t}\n\t}, [startColor]);\n\n\tconst onColorChanged = ({ target }: { target: HTMLInputElement }) => {\n\t\tsetColor(target.value);\n\t};\n\n\treturn (\n\t\t<div className=\"color-picker\">\n\t\t\t<input\n\t\t\t\tclassName=\"theme-color-picker\"\n\t\t\t\ttype=\"color\"\n\t\t\t\tvalue={color}\n\t\t\t\tonChange={onColorChanged}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t></input>\n\t\t\t<input\n\t\t\t\tclassName=\"theme-color-picker-text\"\n\t\t\t\ttype=\"text\"\n\t\t\t\taria-invalid={!isValid}\n\t\t\t\tvalue={color}\n\t\t\t\tonChange={onColorChanged}\n\t\t\t\t{...{ id }}\n\t\t\t></input>\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/common/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport \"./css/color-picker.css\";\n\nconst RE_HEX_COLOR = /^#[0-9a-f]{6}$/i;\n\nexport enum RGBA_CHANNEL {\n\tRED = 0,\n\tGREEN = 1,\n\tBLUE = 2,\n\tALPHA = 3,\n}\n\n// From https://stackoverflow.com/a/24390910\nexport function colorToRGBA(color: string) {\n\t// Returns the color as an array of [r, g, b, a] -- all range from 0 - 255\n\t// color must be a valid canvas fillStyle. This will cover most anything\n\t// you'd want to use.\n\t// Examples:\n\t// colorToRGBA('red')  # [255, 0, 0, 255]\n\t// colorToRGBA('#f00') # [255, 0, 0, 255]\n\tconst cvs = document.createElement(\"canvas\");\n\tcvs.height = 1;\n\tcvs.width = 1;\n\n\tconst ctx = cvs.getContext(\"2d\")!;\n\tctx.fillStyle = color;\n\tctx.fillRect(0, 0, 1, 1);\n\treturn ctx.getImageData(0, 0, 1, 1).data;\n}\n\nfunction byteToHex(num: number) {\n\t// Turns a number (0-255) into a 2-character hex number (00-ff)\n\treturn `0${num.toString(16)}`.slice(-2);\n}\n\nfunction colorToHex(color: string) {\n\t// Convert any CSS color to a hex representation\n\t// Examples:\n\t// colorToHex('red')            # '#ff0000'\n\t// colorToHex('rgb(255, 0, 0)') # '#ff0000'\n\t// colorToHex('#ff0000') # '#ff0000'\n\tif (color.match(RE_HEX_COLOR) !== null) {\n\t\treturn color;\n\t}\n\tconst rgba = colorToRGBA(color);\n\tconst hex = [0, 1, 2].map((idx) => byteToHex(rgba[idx])).join(\"\");\n\treturn `#${hex}`;\n}\n\nexport interface ColorPickerProps {\n\tstartColor: string;\n\tupdateColor: (newColor: string) => void;\n\tid?: string;\n}\n\n/**\n * ColorPicker component to update theme variables.  Displays a browser color input alongside a text version for hex color values.\n *\n * @param {{ [id]: string, startColor: string; updateColor: function }} { id, startColor, callback }\n */\nexport const ColorPicker = ({ id, startColor, updateColor }: ColorPickerProps) => {\n\t/**\n\t * There is a delicate ballet here between the color picket and the input box. This is because this color picker\n\t * has state (when the end user is in the midst of picking a color by editing the input field) and also\n\t * receives state (via props). When prop startColor is received, it overrides the input box. But when the user is editing,\n\t * the input box overrides the prop.\n\t */\n\tconst [priorColor, setPriorColor] = useState(startColor);\n\t/**\n\t * inputValue state is set _whenever the user is editing the input box_. Only at this time, the value in the input\n\t * box reflects the user's editing. If at any point the editing yields a valid color then it is immediately\n\t * passed up as an action, which updates the screen and resets the startColor prop. Whenever an invalid color has\n\t * been entered, the value is flagged invalid which causes the input box to be underlined red.\n\t */\n\tconst [inputValue, setInputValue] = useState<string | null>(null);\n\n\t/**\n\t * If the value of the startColor prop changes then we reset the input to the new color. This occurs for instance\n\t * when the user presses the light or dark themes on the theme page. At that point, the parent sends new values\n\t * down to all color pickers as a new prop.\n\t */\n\tif (priorColor !== startColor) {\n\t\tsetPriorColor(startColor);\n\t\tsetInputValue(null);\n\t}\n\n\t// If the value in the input box isn't valid then give UI feedback\n\tconst isValid = inputValue === null || inputValue.match(RE_HEX_COLOR) !== null;\n\n\t// The swatch always displays the current color from prop. This won't change\n\t// until a valid alternative color is picked.\n\tconst color = colorToHex(startColor);\n\n\tconst onColorChanged = ({ target }: { target: HTMLInputElement }) => {\n\t\tconst maybeNewColor = target.value;\n\t\t// Update the value in the input box\n\t\tsetInputValue(maybeNewColor);\n\t\t// If the color is valid then send an update\n\t\tconst isNewValueValid = maybeNewColor.match(RE_HEX_COLOR) !== null;\n\t\tif (isNewValueValid) {\n\t\t\tupdateColor(maybeNewColor);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className=\"color-picker\">\n\t\t\t<input\n\t\t\t\tclassName=\"theme-color-picker\"\n\t\t\t\ttype=\"color\"\n\t\t\t\tvalue={color}\n\t\t\t\tonChange={onColorChanged}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t></input>\n\t\t\t<input\n\t\t\t\tclassName=\"theme-color-picker-text\"\n\t\t\t\ttype=\"text\"\n\t\t\t\taria-invalid={!isValid}\n\t\t\t\tvalue={inputValue ?? color}\n\t\t\t\tonChange={onColorChanged}\n\t\t\t\t{...{ id }}\n\t\t\t></input>\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 {};