@finsemble/finsemble-ui 6.1.3 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsemble/finsemble-ui",
-  "version": "6.1.3",
+  "version": "6.2.0",
   "description": "Ready-made React components to give you a head-start building your SmartDesktop.",
   "types": "index.d.ts",
   "files": [
@@ -33,16 +33,17 @@
     "@reduxjs/toolkit": "^1.5.0",
     "@svgr/webpack": "^5.5.0",
     "@types/chai": "4.2.21",
-    "@types/lodash": "4.14.171",
+    "@types/lodash": "4.14.172",
     "@types/mime-types": "^2.1.0",
     "@types/mocha": "9.0.0",
-    "@types/react": "17.0.14",
+    "@types/react": "17.0.19",
     "@types/react-dom": "17.0.8",
     "@types/react-input-autosize": "2.2.1",
     "@types/react-redux": "7.1.18",
-    "@typescript-eslint/eslint-plugin": "4.28.1",
-    "@typescript-eslint/parser": "4.28.4",
-    "async": "3.2.0",
+    "@types/react-relative-portal": "^1.8.1",
+    "@typescript-eslint/eslint-plugin": "4.29.3",
+    "@typescript-eslint/parser": "4.29.3",
+    "async": "3.2.1",
     "babel-core": "^6.26.3",
     "date-fns": "^2.16.1",
     "dom-autoscroller": "2.3.4",
@@ -52,9 +53,10 @@
     "react-circular-progressbar": "^2.0.3",
     "react-input-autosize": "^3.0.0",
     "react-redux": "7.2.4",
+    "react-relative-portal": "^1.8.0",
     "react-sortable-hoc": "2.0.0",
     "react-transition-group": "4.4.2",
-    "redux": "4.1.0",
+    "redux": "4.1.1",
     "unionize": "3.1.0"
   },
   "peerDependencies": {
@@ -66,10 +68,10 @@
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.12.10",
     "@finsemble/finsemble-core": "6.0.0-beta.4",
-    "@storybook/addon-actions": "6.3.4",
-    "@storybook/addon-essentials": "6.3.5",
-    "@storybook/addon-links": "6.3.4",
-    "@storybook/react": "6.3.4",
+    "@storybook/addon-actions": "6.3.7",
+    "@storybook/addon-essentials": "6.3.7",
+    "@storybook/addon-links": "6.3.7",
+    "@storybook/react": "6.3.7",
     "@types/enzyme": "^3.10.8",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/react-transition-group": "4.4.2",
@@ -80,20 +82,20 @@
     "babel-register": "^6.26.0",
     "canvas": "^2.6.1",
     "chai": "4.3.4",
-    "chokidar-cli": "2.1.0",
-    "concurrently": "6.2.0",
+    "chokidar-cli": "3.0.0",
+    "concurrently": "6.2.1",
     "copyfiles": "2.4.1",
     "core-js": "^3.15.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
-    "eslint": "7.31.0",
-    "eslint-plugin-import": "2.23.4",
+    "eslint": "7.32.0",
+    "eslint-plugin-import": "2.24.2",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "esm": "^3.2.25",
     "ignore-styles": "^5.0.1",
     "improved-yarn-audit": "^2.3.3",
-    "jsdom": "^16.4.0",
+    "jsdom": "^17.0.0",
     "mime-types": "^2.1.28",
     "mocha": "8.2.1",
     "nyc": "15.1.0",
@@ -109,7 +111,8 @@
     "ts-mocha/ts-node": "^10.1.0",
     "trim": "0.0.3",
     "css-what": "5.0.1",
-    "prismjs": "1.24.0"
+    "prismjs": "1.24.0",
+    "tar": "6.1.2"
   },
   "repository": {
     "type": "git",

package/react/actions/smartDesktopDesignerActions.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="finsemble-core" />
+import { AppDefinition } from "services/Interop/types";
 import { UnionOf } from "unionize";
 import { ApplicationSetupType, AuthenticationProvider, MenuType, ProjectError, ProjectSaveData } from "../types/smartDesktopDesignerTypes";
 export declare const SmartDesktopDesignerActions: import("unionize").Unionized<{
     change_view: string;
-    update_apps: any[];
+    update_apps: AppDefinition[];
     new_app: string | null;
     set_current_app_id: string | null;
     set_current_app_setup_type: ApplicationSetupType | null;
-    update_app: any;
+    update_app: AppDefinition;
     delete_app: string;
     update_menus: MenuType;
     set_deploy_info: DeployInfo | null;
@@ -22,11 +23,11 @@ export declare const SmartDesktopDesignerActions: import("unionize").Unionized<{
     set_reviewing_project_errors: boolean;
 }, import("unionize").SingleValueVariants<{
     change_view: string;
-    update_apps: any[];
+    update_apps: AppDefinition[];
     new_app: string | null;
     set_current_app_id: string | null;
     set_current_app_setup_type: ApplicationSetupType | null;
-    update_app: any;
+    update_app: AppDefinition;
     delete_app: string;
     update_menus: MenuType;
     set_deploy_info: DeployInfo | null;

package/react/actions/smartDesktopDesignerActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"smartDesktopDesignerActions.js","sourceRoot":"","sources":["../../src/actions/smartDesktopDesignerActions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAW,MAAM,UAAU,CAAC;AASrD,MAAM,CAAC,MAAM,2BAA2B,GAAG,QAAQ,CAClD;IACC,WAAW,EAAE,MAAM,EAAU;IAC7B,WAAW,EAAE,MAAM,EAAgB;IACnC,OAAO,EAAE,MAAM,EAAiB;IAChC,kBAAkB,EAAE,MAAM,EAAiB;IAC3C,0BAA0B,EAAE,MAAM,EAA+B;IACjE,UAAU,EAAE,MAAM,EAAc;IAChC,UAAU,EAAE,MAAM,EAAU;IAC5B,YAAY,EAAE,MAAM,EAAY;IAChC,eAAe,EAAE,MAAM,EAAqB;IAC5C,iBAAiB,EAAE,MAAM,EAAiB;IAC1C,iBAAiB,EAAE,MAAM,EAAW;IACpC,gBAAgB,EAAE,MAAM,EAAmB;IAC3C,sBAAsB,EAAE,MAAM,EAAW;IACzC,oBAAoB,EAAE,MAAM,EAA0B;IACtD,oBAAoB,EAAE,MAAM,EAAU;IACtC,iBAAiB,EAAE,MAAM,EAAgB;IACzC,oBAAoB,EAAE,MAAM,EAAgB;IAC5C,4BAA4B,EAAE,MAAM,EAAW;CAC/C,EACD,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,CACjC,CAAC","sourcesContent":["import { unionize, ofType, UnionOf } from \"unionize\";\r\nimport {\r\n\tApplicationSetupType,\r\n\tAuthenticationProvider,\r\n\tMenuType,\r\n\tProjectError,\r\n\tProjectSaveData,\r\n} from \"../types/smartDesktopDesignerTypes\";\r\n\r\nexport const SmartDesktopDesignerActions = unionize(\r\n\t{\r\n\t\tchange_view: ofType<string>(),\r\n\t\tupdate_apps: ofType<AppDConfig[]>(),\r\n\t\tnew_app: ofType<string | null>(),\r\n\t\tset_current_app_id: ofType<string | null>(),\r\n\t\tset_current_app_setup_type: ofType<ApplicationSetupType | null>(),\r\n\t\tupdate_app: ofType<AppDConfig>(),\r\n\t\tdelete_app: ofType<string>(),\r\n\t\tupdate_menus: ofType<MenuType>(),\r\n\t\tset_deploy_info: ofType<DeployInfo | null>(),\r\n\t\tset_publish_error: ofType<string | null>(),\r\n\t\tset_is_publishing: ofType<boolean>(),\r\n\t\tset_project_info: ofType<ProjectSaveData>(),\r\n\t\tset_is_getting_started: ofType<boolean>(),\r\n\t\tupdate_auth_provider: ofType<AuthenticationProvider>(),\r\n\t\tenable_auth_provider: ofType<string>(),\r\n\t\tset_project_error: ofType<ProjectError>(),\r\n\t\tdelete_project_error: ofType<ProjectError>(),\r\n\t\tset_reviewing_project_errors: ofType<boolean>(),\r\n\t},\r\n\t{ tag: \"type\", value: \"payload\" }\r\n);\r\n\r\nexport type SmartDesktopDesignerActionsTypes = UnionOf<typeof SmartDesktopDesignerActions>;\r\n"]}
+{"version":3,"file":"smartDesktopDesignerActions.js","sourceRoot":"","sources":["../../src/actions/smartDesktopDesignerActions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAW,MAAM,UAAU,CAAC;AASrD,MAAM,CAAC,MAAM,2BAA2B,GAAG,QAAQ,CAClD;IACC,WAAW,EAAE,MAAM,EAAU;IAC7B,WAAW,EAAE,MAAM,EAAmB;IACtC,OAAO,EAAE,MAAM,EAAiB;IAChC,kBAAkB,EAAE,MAAM,EAAiB;IAC3C,0BAA0B,EAAE,MAAM,EAA+B;IACjE,UAAU,EAAE,MAAM,EAAiB;IACnC,UAAU,EAAE,MAAM,EAAU;IAC5B,YAAY,EAAE,MAAM,EAAY;IAChC,eAAe,EAAE,MAAM,EAAqB;IAC5C,iBAAiB,EAAE,MAAM,EAAiB;IAC1C,iBAAiB,EAAE,MAAM,EAAW;IACpC,gBAAgB,EAAE,MAAM,EAAmB;IAC3C,sBAAsB,EAAE,MAAM,EAAW;IACzC,oBAAoB,EAAE,MAAM,EAA0B;IACtD,oBAAoB,EAAE,MAAM,EAAU;IACtC,iBAAiB,EAAE,MAAM,EAAgB;IACzC,oBAAoB,EAAE,MAAM,EAAgB;IAC5C,4BAA4B,EAAE,MAAM,EAAW;CAC/C,EACD,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,CACjC,CAAC","sourcesContent":["import { AppDefinition } from \"services/Interop/types\";\r\nimport { unionize, ofType, UnionOf } from \"unionize\";\r\nimport {\r\n\tApplicationSetupType,\r\n\tAuthenticationProvider,\r\n\tMenuType,\r\n\tProjectError,\r\n\tProjectSaveData,\r\n} from \"../types/smartDesktopDesignerTypes\";\r\n\r\nexport const SmartDesktopDesignerActions = unionize(\r\n\t{\r\n\t\tchange_view: ofType<string>(),\r\n\t\tupdate_apps: ofType<AppDefinition[]>(),\r\n\t\tnew_app: ofType<string | null>(),\r\n\t\tset_current_app_id: ofType<string | null>(),\r\n\t\tset_current_app_setup_type: ofType<ApplicationSetupType | null>(),\r\n\t\tupdate_app: ofType<AppDefinition>(),\r\n\t\tdelete_app: ofType<string>(),\r\n\t\tupdate_menus: ofType<MenuType>(),\r\n\t\tset_deploy_info: ofType<DeployInfo | null>(),\r\n\t\tset_publish_error: ofType<string | null>(),\r\n\t\tset_is_publishing: ofType<boolean>(),\r\n\t\tset_project_info: ofType<ProjectSaveData>(),\r\n\t\tset_is_getting_started: ofType<boolean>(),\r\n\t\tupdate_auth_provider: ofType<AuthenticationProvider>(),\r\n\t\tenable_auth_provider: ofType<string>(),\r\n\t\tset_project_error: ofType<ProjectError>(),\r\n\t\tdelete_project_error: ofType<ProjectError>(),\r\n\t\tset_reviewing_project_errors: ofType<boolean>(),\r\n\t},\r\n\t{ tag: \"type\", value: \"payload\" }\r\n);\r\n\r\nexport type SmartDesktopDesignerActionsTypes = UnionOf<typeof SmartDesktopDesignerActions>;\r\n"]}

package/react/assets/css/defaultTheme.css

@@ -90,7 +90,7 @@
 	--titlebar-tab-icon-font-color: var(--accent-primary);
 	--titlebar-tab-hover-background-color: var(--core-primary-2);
 	--titlebar-tab-active-background-color: var(--core-primary-3);
-	--titlebar-tab-inactive-background-color: var(--core-primary);
+	--titlebar-tab-inactive-background-color: var(--core-primary-1);
 	--titlebar-tab-ghost-background-color: var(--accent-primary-1);
 	--titlebar-tab-ghost-border-color: var(--accent-primary);
 

package/react/assets/css/notificationsCenter.css

@@ -196,6 +196,7 @@ body.notifications-center-body.notifications-popped-in {
 	font-family: var(--notification-font-family);
 	min-height: 120px;
 	padding: 8px 10px;
+	margin: 0 5px 0 5px;
 }
 
 .notification-card.read {

package/react/assets/css/userPreferences.css

@@ -402,6 +402,7 @@ img {
 }
 
 .scheduled-restart-select-label {
+	margin-top: 0.45em;
 	margin-left: 4em;
 	margin-right: 0.5em;
 }
@@ -454,7 +455,7 @@ option:focus {
 .notifications-main-preferences__container {
 	display: flex;
 	flex-direction: column;
-	padding: 20px 10px;
+	padding: 5px 15px;
 }
 
 .notifications-main-preferences__container .row-section {
@@ -468,7 +469,8 @@ option:focus {
 }
 
 .row-section .row-btn,
-.row-section .row {
+.row-section .row,
+.row-section .row-btn-disabled {
 	display: grid;
 	grid-template-columns: min-content auto min-content;
 	grid-template-rows: 100%;

package/react/assets/css/windowTitleBar.css

@@ -116,6 +116,7 @@ html.desktop-active .title-text {
 	transition: background-color 0.2s ease;
 	border-top-left-radius: 10px;
 	border-top-right-radius: 10px;
+	background-color: var(--titlebar-tab-inactive-background-color);
 }
 
 .fsbl-header-title[data-hover="true"] {

package/react/assets/icons/check-square.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M12.667 0.666748H3.33366C1.8609 0.666748 0.666992 1.86066 0.666992 3.33341V12.6667C0.666992 14.1395 1.8609 15.3334 3.33366 15.3334H12.667C14.1398 15.3334 15.3337 14.1395 15.3337 12.6667V3.33341C15.3337 1.86066 14.1398 0.666748 12.667 0.666748Z"
+        fill="transparent" style="stroke: currentColor" />
+    <path d="M2.66699 7.6122H5.11348L6.77708 10.1334L10.8872 2.66675H13.3337L7.07066 13.3334H6.38565L2.66699 7.6122Z" />
+</svg>

package/react/assets/icons/lock.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M13.2225 6.39998C13.8205 6.39998 14.3051 6.91444 14.2909 7.54952V14.8504C14.2909 15.4855 13.8064 16 13.2084 16H3.08255C2.48455 16 2 15.4855 2 14.8504V7.54952C2 6.91444 2.48455 6.39998 3.08255 6.39998H13.2225ZM8.15255 8.71383C7.58291 8.71383 7.11255 9.21229 7.09836 9.83137C7.09836 10.1489 7.213 10.4369 7.44109 10.6486C7.54036 10.7384 7.61127 10.9046 7.61127 11.056V13.1274C7.61127 13.4449 7.85355 13.6874 8.13836 13.6874C8.43736 13.6874 8.66545 13.4289 8.66545 13.1274V11.0412C8.66545 10.8898 8.73636 10.7384 8.84982 10.6326C9.06373 10.4209 9.19255 10.1341 9.19255 9.8166C9.19255 9.21229 8.72218 8.7126 8.15255 8.7126V8.71383Z" />
+    <path
+        d="M8.14534 0C5.77934 0 3.84353 2.32 3.84353 5.15446V7.68H5.16244V5.15446C5.16244 3.17908 6.49671 1.58031 8.14534 1.58031C9.79398 1.58031 11.1283 3.17908 11.1283 5.15446V7.68H12.4472V5.15446C12.4472 2.32 10.5113 0 8.14534 0Z" />
+</svg>

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

@@ -19,6 +19,7 @@ export interface ButtonProps {
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     className?: string;
     buttonAttributes?: object;
+    fixedSize?: number;
 }
 export declare const fashion_class_lookup: {
     secondary: string;

package/react/components/common/Button.js

@@ -10,10 +10,10 @@ export const fashion_class_lookup = {
     ghost: "button-container-ghost",
     "danger ghost": "button-container-danger-ghost",
 };
-export const Button = ({ fashion = "secondary", text = "", iconBefore, iconAfter, disabled = false, onClick = () => { }, className = "", buttonAttributes = {}, }) => {
+export const Button = ({ fashion = "secondary", text = "", iconBefore, iconAfter, disabled = false, onClick = () => { }, className = "", buttonAttributes = {}, fixedSize, }) => {
     const containerClassName = [fashion_class_lookup[fashion], className].join(" ");
     return (React.createElement("div", { className: `${containerClassName}` },
-        React.createElement("button", { ...buttonAttributes, onClick: onClick, disabled: disabled },
+        React.createElement("button", { ...buttonAttributes, onClick: onClick, disabled: disabled, style: { width: fixedSize } },
             iconBefore && React.createElement(FinsembleIcon, { className: "button-icon-before", icon: iconBefore }),
             text,
             iconAfter && React.createElement(FinsembleIcon, { className: "button-icon-after", icon: iconAfter }))));

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/common/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAuBhD,MAAM,CAAC,MAAM,oBAAoB,GAAG;IACnC,SAAS,EAAE,4BAA4B;IACvC,IAAI,EAAE,uBAAuB;IAC7B,OAAO,EAAE,0BAA0B;IACnC,IAAI,EAAE,uBAAuB;IAC7B,MAAM,EAAE,yBAAyB;IACjC,KAAK,EAAE,wBAAwB;IAC/B,cAAc,EAAE,+BAA+B;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC7C,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,EAAE,EACT,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,GACrB,EAAE,EAAE;IACJ,MAAM,kBAAkB,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEhF,OAAO,CACN,6BAAK,SAAS,EAAE,GAAG,kBAAkB,EAAE;QACtC,mCAAY,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ;YAChE,UAAU,IAAI,oBAAC,aAAa,IAAC,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAE,UAAU,GAAkB;YAC9F,IAAI;YACJ,SAAS,IAAI,oBAAC,aAAa,IAAC,SAAS,EAAC,mBAAmB,EAAC,IAAI,EAAE,SAAS,GAAkB,CACpF,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\r\nimport \"./css/button.css\";\r\nimport { FinsembleIcon } from \"./FinsembleIcon\";\r\n\r\nexport interface AdvancedButtonProps {\r\n\ticon: FinsembleIcon;\r\n\ttext: string;\r\n\tdisabled?: boolean;\r\n\tonClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\r\n\ttabIndex?: number;\r\n\tclassName?: string;\r\n\tbuttonAttributes?: object;\r\n}\r\n\r\nexport interface ButtonProps {\r\n\tfashion: \"secondary\" | \"primary\" | \"danger\" | \"ghost\" | \"danger ghost\";\r\n\ttext: string;\r\n\ticonBefore?: FinsembleIcon;\r\n\ticonAfter?: FinsembleIcon;\r\n\tdisabled?: boolean;\r\n\tonClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\r\n\tclassName?: string;\r\n\tbuttonAttributes?: object;\r\n}\r\n\r\nexport const fashion_class_lookup = {\r\n\tsecondary: \"button-container-secondary\",\r\n\ttile: \"button-container-tile\",\r\n\tprimary: \"button-container-primary\",\r\n\ticon: \"button-container-icon\",\r\n\tdanger: \"button-container-danger\",\r\n\tghost: \"button-container-ghost\",\r\n\t\"danger ghost\": \"button-container-danger-ghost\",\r\n};\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n\tfashion = \"secondary\",\r\n\ttext = \"\",\r\n\ticonBefore,\r\n\ticonAfter,\r\n\tdisabled = false,\r\n\tonClick = () => {},\r\n\tclassName = \"\",\r\n\tbuttonAttributes = {},\r\n}) => {\r\n\tconst containerClassName = [fashion_class_lookup[fashion], className].join(\" \");\r\n\r\n\treturn (\r\n\t\t<div className={`${containerClassName}`}>\r\n\t\t\t<button {...buttonAttributes} onClick={onClick} disabled={disabled}>\r\n\t\t\t\t{iconBefore && <FinsembleIcon className=\"button-icon-before\" icon={iconBefore}></FinsembleIcon>}\r\n\t\t\t\t{text}\r\n\t\t\t\t{iconAfter && <FinsembleIcon className=\"button-icon-after\" icon={iconAfter}></FinsembleIcon>}\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/common/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAwBhD,MAAM,CAAC,MAAM,oBAAoB,GAAG;IACnC,SAAS,EAAE,4BAA4B;IACvC,IAAI,EAAE,uBAAuB;IAC7B,OAAO,EAAE,0BAA0B;IACnC,IAAI,EAAE,uBAAuB;IAC7B,MAAM,EAAE,yBAAyB;IACjC,KAAK,EAAE,wBAAwB;IAC/B,cAAc,EAAE,+BAA+B;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC7C,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,EAAE,EACT,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,SAAS,GACT,EAAE,EAAE;IACJ,MAAM,kBAAkB,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEhF,OAAO,CACN,6BAAK,SAAS,EAAE,GAAG,kBAAkB,EAAE;QACtC,mCAAY,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC7F,UAAU,IAAI,oBAAC,aAAa,IAAC,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAE,UAAU,GAAkB;YAC9F,IAAI;YACJ,SAAS,IAAI,oBAAC,aAAa,IAAC,SAAS,EAAC,mBAAmB,EAAC,IAAI,EAAE,SAAS,GAAkB,CACpF,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\r\nimport \"./css/button.css\";\r\nimport { FinsembleIcon } from \"./FinsembleIcon\";\r\n\r\nexport interface AdvancedButtonProps {\r\n\ticon: FinsembleIcon;\r\n\ttext: string;\r\n\tdisabled?: boolean;\r\n\tonClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\r\n\ttabIndex?: number;\r\n\tclassName?: string;\r\n\tbuttonAttributes?: object;\r\n}\r\n\r\nexport interface ButtonProps {\r\n\tfashion: \"secondary\" | \"primary\" | \"danger\" | \"ghost\" | \"danger ghost\";\r\n\ttext: string;\r\n\ticonBefore?: FinsembleIcon;\r\n\ticonAfter?: FinsembleIcon;\r\n\tdisabled?: boolean;\r\n\tonClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\r\n\tclassName?: string;\r\n\tbuttonAttributes?: object;\r\n\tfixedSize?: number;\r\n}\r\n\r\nexport const fashion_class_lookup = {\r\n\tsecondary: \"button-container-secondary\",\r\n\ttile: \"button-container-tile\",\r\n\tprimary: \"button-container-primary\",\r\n\ticon: \"button-container-icon\",\r\n\tdanger: \"button-container-danger\",\r\n\tghost: \"button-container-ghost\",\r\n\t\"danger ghost\": \"button-container-danger-ghost\",\r\n};\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n\tfashion = \"secondary\",\r\n\ttext = \"\",\r\n\ticonBefore,\r\n\ticonAfter,\r\n\tdisabled = false,\r\n\tonClick = () => {},\r\n\tclassName = \"\",\r\n\tbuttonAttributes = {},\r\n\tfixedSize,\r\n}) => {\r\n\tconst containerClassName = [fashion_class_lookup[fashion], className].join(\" \");\r\n\r\n\treturn (\r\n\t\t<div className={`${containerClassName}`}>\r\n\t\t\t<button {...buttonAttributes} onClick={onClick} disabled={disabled} style={{ width: fixedSize }}>\r\n\t\t\t\t{iconBefore && <FinsembleIcon className=\"button-icon-before\" icon={iconBefore}></FinsembleIcon>}\r\n\t\t\t\t{text}\r\n\t\t\t\t{iconAfter && <FinsembleIcon className=\"button-icon-after\" icon={iconAfter}></FinsembleIcon>}\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}

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

@@ -0,0 +1,15 @@
+import React from "react";
+export interface ButtonRowProps {
+    label?: string;
+    onClick: Function;
+    iconClass?: string;
+    disabled?: boolean;
+    img?: string;
+    showDefaultIcon?: boolean;
+    className?: string;
+    role?: string;
+    tabIndex?: number;
+    onKeyDown?: Function;
+}
+declare const ButtonRow: React.FC<ButtonRowProps>;
+export default ButtonRow;

package/react/components/common/ButtonRow.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+const defaultProps = {
+    label: "",
+    onClick: () => { },
+    iconClass: "",
+    disabled: false,
+    showDefaultIcon: false,
+    className: "row-btn",
+};
+const ButtonRow = ({ label, onClick, iconClass, disabled, img, showDefaultIcon, className, }) => {
+    const [imgError, setImgError] = useState(false);
+    return (React.createElement("div", { className: disabled ? "row-btn-disabled" : className, role: "button", tabIndex: 0, onClick: () => {
+            if (!disabled) {
+                const func = onClick;
+                func();
+            }
+        }, onKeyDown: (e) => {
+            if ((e.key === "Enter" || e.key === " ") && !disabled) {
+                const func = onClick;
+                func();
+            }
+        } },
+        img && (React.createElement("img", { src: img, 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 })));
+};
+ButtonRow.defaultProps = defaultProps;
+export default ButtonRow;
+//# sourceMappingURL=ButtonRow.js.map

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

@@ -0,0 +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\";\r\n\r\nexport interface ButtonRowProps {\r\n\tlabel?: string;\r\n\tonClick: Function;\r\n\ticonClass?: string;\r\n\tdisabled?: boolean;\r\n\timg?: string;\r\n\tshowDefaultIcon?: boolean;\r\n\tclassName?: string;\r\n\trole?: string;\r\n\ttabIndex?: number;\r\n\tonKeyDown?: Function;\r\n}\r\n\r\nconst defaultProps: ButtonRowProps = {\r\n\tlabel: \"\",\r\n\tonClick: () => {},\r\n\ticonClass: \"\",\r\n\tdisabled: false,\r\n\tshowDefaultIcon: false,\r\n\tclassName: \"row-btn\",\r\n};\r\n\r\nconst ButtonRow: React.FC<ButtonRowProps> = ({\r\n\tlabel,\r\n\tonClick,\r\n\ticonClass,\r\n\tdisabled,\r\n\timg,\r\n\tshowDefaultIcon,\r\n\tclassName,\r\n}) => {\r\n\tconst [imgError, setImgError] = useState(false);\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={disabled ? \"row-btn-disabled\" : className}\r\n\t\t\trole=\"button\"\r\n\t\t\ttabIndex={0}\r\n\t\t\tonClick={() => {\r\n\t\t\t\tif (!disabled) {\r\n\t\t\t\t\tconst func = onClick;\r\n\t\t\t\t\tfunc();\r\n\t\t\t\t}\r\n\t\t\t}}\r\n\t\t\tonKeyDown={(e) => {\r\n\t\t\t\tif ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\r\n\t\t\t\t\tconst func = onClick;\r\n\t\t\t\t\tfunc();\r\n\t\t\t\t}\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t{img && (\r\n\t\t\t\t<img\r\n\t\t\t\t\tsrc={img}\r\n\t\t\t\t\tstyle={showDefaultIcon || imgError ? { display: \"none\" } : { width: \"auto\", height: \"20px\" }}\r\n\t\t\t\t\tonError={() => {\r\n\t\t\t\t\t\tsetImgError(true);\r\n\t\t\t\t\t}}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t\t{(showDefaultIcon || imgError) && <i className=\"ff-finsemble default-img\" />}\r\n\t\t\t<span className=\"row__lbl\">{label}</span>\r\n\t\t\t<i className={iconClass} />\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nButtonRow.defaultProps = defaultProps;\r\nexport default ButtonRow;\r\n"]}

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

@@ -0,0 +1,8 @@
+import React from "react";
+export interface CheckboxProps {
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;

package/react/components/common/Checkbox.js

@@ -0,0 +1,22 @@
+import React from "react";
+export const Checkbox = ({ checked = false, disabled = false, label = "", onClick = () => { }, }) => {
+    let checkboxClasses = "complex-menu-checkbox";
+    if (checked) {
+        checkboxClasses = `${checkboxClasses} checked`;
+    }
+    let style = {};
+    if (disabled) {
+        style = {
+            cursor: "default",
+            opacity: ".55",
+        };
+    }
+    return (React.createElement("div", { style: style, className: "complex-menu-checkbox-wrapper", role: "checkbox", "aria-label": label, tabIndex: 0, onClick: disabled ? () => { } : onClick, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                !disabled && onClick(e);
+            }
+        } },
+        React.createElement("div", { className: checkboxClasses }, checked && React.createElement("i", { className: "ff-check-mark" })),
+        React.createElement("div", { className: "complex-menu-checkbox-label" }, label)));
+};
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/common/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,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,gBACH,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,2BAAG,SAAS,EAAC,eAAe,GAAK,CAAO;QACrF,6BAAK,SAAS,EAAC,6BAA6B,IAAE,KAAK,CAAO,CACrD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\r\n\r\nexport interface CheckboxProps {\r\n\tchecked?: boolean;\r\n\tdisabled?: boolean;\r\n\tlabel?: string;\r\n\tonClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport const Checkbox: React.FC<CheckboxProps> = ({\r\n\tchecked = false,\r\n\tdisabled = false,\r\n\tlabel = \"\",\r\n\tonClick = () => {},\r\n}) => {\r\n\tlet checkboxClasses = \"complex-menu-checkbox\";\r\n\tif (checked) {\r\n\t\tcheckboxClasses = `${checkboxClasses} checked`;\r\n\t}\r\n\tlet style = {};\r\n\tif (disabled) {\r\n\t\tstyle = {\r\n\t\t\tcursor: \"default\",\r\n\t\t\topacity: \".55\",\r\n\t\t};\r\n\t}\r\n\treturn (\r\n\t\t<div\r\n\t\t\tstyle={style}\r\n\t\t\tclassName=\"complex-menu-checkbox-wrapper\"\r\n\t\t\trole=\"checkbox\"\r\n\t\t\taria-label={label}\r\n\t\t\ttabIndex={0}\r\n\t\t\tonClick={disabled ? () => {} : onClick}\r\n\t\t\tonKeyDown={(e) => {\r\n\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\r\n\t\t\t\t\t!disabled && onClick(e);\r\n\t\t\t\t}\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t<div className={checkboxClasses}>{checked && <i className=\"ff-check-mark\"></i>}</div>\r\n\t\t\t<div className=\"complex-menu-checkbox-label\">{label}</div>\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}

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

@@ -1,6 +1,6 @@
 import React from "react";
 import "./css/icon.css";
-export declare type FinsembleIcon = "check" | "chevron-left" | "chevron-right" | "copy" | "exclamation-circle" | "external-link" | "flag" | "font" | "folder" | "globe" | "hdd" | "key" | "life-ring" | "magic" | "moon" | "paint-roller" | "pencil" | "plus" | "question-circle" | "search" | "sun" | "times" | "toggle-off" | "toggle-on" | "tools" | "trash" | "upload" | "window";
+export declare type FinsembleIcon = "check" | "check-square" | "chevron-left" | "chevron-right" | "copy" | "exclamation-circle" | "external-link" | "flag" | "font" | "folder" | "globe" | "hdd" | "key" | "life-ring" | "lock" | "magic" | "moon" | "paint-roller" | "pencil" | "plus" | "question-circle" | "search" | "sun" | "times" | "toggle-off" | "toggle-on" | "tools" | "trash" | "upload" | "window";
 export declare type FinsembleIconProps = {
     icon: FinsembleIcon;
     className?: string;

package/react/components/common/FinsembleIcon.js

@@ -1,6 +1,7 @@
 import React from "react";
 import "./css/icon.css";
 import { ReactComponent as CheckIcon } from "../../assets/icons/check.svg";
+import { ReactComponent as CheckSquare } from "../../assets/icons/check-square.svg";
 import { ReactComponent as ChevronLeftIcon } from "../../assets/icons/chevron-left.svg";
 import { ReactComponent as ChevronRightIcon } from "../../assets/icons/chevron-right.svg";
 import { ReactComponent as CopyIcon } from "../../assets/icons/copy.svg";
@@ -13,6 +14,7 @@ import { ReactComponent as GlobeIcon } from "../../assets/icons/globe.svg";
 import { ReactComponent as HDDIcon } from "../../assets/icons/hdd.svg";
 import { ReactComponent as KeyIcon } from "../../assets/icons/key.svg";
 import { ReactComponent as LifeRingIcon } from "../../assets/icons/life-ring.svg";
+import { ReactComponent as LockIcon } from "../../assets/icons/lock.svg";
 import { ReactComponent as MagicIcon } from "../../assets/icons/magic.svg";
 import { ReactComponent as MoonIcon } from "../../assets/icons/moon.svg";
 import { ReactComponent as PaintRollerIcon } from "../../assets/icons/paint-roller.svg";
@@ -30,6 +32,7 @@ import { ReactComponent as UploadIcon } from "../../assets/icons/upload.svg";
 import { ReactComponent as WindowIcon } from "../../assets/icons/window.svg";
 const icons = {
     check: CheckIcon,
+    "check-square": CheckSquare,
     "chevron-left": ChevronLeftIcon,
     "chevron-right": ChevronRightIcon,
     copy: CopyIcon,
@@ -42,6 +45,7 @@ const icons = {
     hdd: HDDIcon,
     key: KeyIcon,
     "life-ring": LifeRingIcon,
+    lock: LockIcon,
     magic: MagicIcon,
     moon: MoonIcon,
     "paint-roller": PaintRollerIcon,

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleIcon.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport \"./css/icon.css\";\r\nimport { ReactComponent as CheckIcon } from \"../../assets/icons/check.svg\";\r\nimport { ReactComponent as ChevronLeftIcon } from \"../../assets/icons/chevron-left.svg\";\r\nimport { ReactComponent as ChevronRightIcon } from \"../../assets/icons/chevron-right.svg\";\r\nimport { ReactComponent as CopyIcon } from \"../../assets/icons/copy.svg\";\r\nimport { ReactComponent as ExclaimationCircleIcon } from \"../../assets/icons/exclamation-circle.svg\";\r\nimport { ReactComponent as ExternalLinkIcon } from \"../../assets/icons/external-link.svg\";\r\nimport { ReactComponent as FlagIcon } from \"../../assets/icons/flag.svg\";\r\nimport { ReactComponent as FolderIcon } from \"../../assets/icons/folder.svg\";\r\nimport { ReactComponent as FontIcon } from \"../../assets/icons/font.svg\";\r\nimport { ReactComponent as GlobeIcon } from \"../../assets/icons/globe.svg\";\r\nimport { ReactComponent as HDDIcon } from \"../../assets/icons/hdd.svg\";\r\nimport { ReactComponent as KeyIcon } from \"../../assets/icons/key.svg\";\r\nimport { ReactComponent as LifeRingIcon } from \"../../assets/icons/life-ring.svg\";\r\nimport { ReactComponent as MagicIcon } from \"../../assets/icons/magic.svg\";\r\nimport { ReactComponent as MoonIcon } from \"../../assets/icons/moon.svg\";\r\nimport { ReactComponent as PaintRollerIcon } from \"../../assets/icons/paint-roller.svg\";\r\nimport { ReactComponent as PencilIcon } from \"../../assets/icons/pencil.svg\";\r\nimport { ReactComponent as PlusIcon } from \"../../assets/icons/plus.svg\";\r\nimport { ReactComponent as QuestionCircleIcon } from \"../../assets/icons/question-circle.svg\";\r\nimport { ReactComponent as SearchIcon } from \"../../assets/icons/search.svg\";\r\nimport { ReactComponent as SunIcon } from \"../../assets/icons/sun.svg\";\r\nimport { ReactComponent as TimesIcon } from \"../../assets/icons/times.svg\";\r\nimport { ReactComponent as ToggleOffIcon } from \"../../assets/icons/toggle-off.svg\";\r\nimport { ReactComponent as ToggleOnIcon } from \"../../assets/icons/toggle-on.svg\";\r\nimport { ReactComponent as ToolsIcon } from \"../../assets/icons/tools.svg\";\r\nimport { ReactComponent as TrashIcon } from \"../../assets/icons/trash.svg\";\r\nimport { ReactComponent as UploadIcon } from \"../../assets/icons/upload.svg\";\r\nimport { ReactComponent as WindowIcon } from \"../../assets/icons/window.svg\";\r\n\r\nexport type FinsembleIcon =\r\n\t| \"check\"\r\n\t| \"chevron-left\"\r\n\t| \"chevron-right\"\r\n\t| \"copy\"\r\n\t| \"exclamation-circle\"\r\n\t| \"external-link\"\r\n\t| \"flag\"\r\n\t| \"font\"\r\n\t| \"folder\"\r\n\t| \"globe\"\r\n\t| \"hdd\"\r\n\t| \"key\"\r\n\t| \"life-ring\"\r\n\t| \"magic\"\r\n\t| \"moon\"\r\n\t| \"paint-roller\"\r\n\t| \"pencil\"\r\n\t| \"plus\"\r\n\t| \"question-circle\"\r\n\t| \"search\"\r\n\t| \"sun\"\r\n\t| \"times\"\r\n\t| \"toggle-off\"\r\n\t| \"toggle-on\"\r\n\t| \"tools\"\r\n\t| \"trash\"\r\n\t| \"upload\"\r\n\t| \"window\";\r\n\r\ntype IconComponents = {\r\n\t[key in FinsembleIcon]: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;\r\n};\r\n\r\nconst icons: IconComponents = {\r\n\tcheck: CheckIcon,\r\n\t\"chevron-left\": ChevronLeftIcon,\r\n\t\"chevron-right\": ChevronRightIcon,\r\n\tcopy: CopyIcon,\r\n\t\"exclamation-circle\": ExclaimationCircleIcon,\r\n\t\"external-link\": ExternalLinkIcon,\r\n\tflag: FlagIcon,\r\n\tfolder: FolderIcon,\r\n\tfont: FontIcon,\r\n\tglobe: GlobeIcon,\r\n\thdd: HDDIcon,\r\n\tkey: KeyIcon,\r\n\t\"life-ring\": LifeRingIcon,\r\n\tmagic: MagicIcon,\r\n\tmoon: MoonIcon,\r\n\t\"paint-roller\": PaintRollerIcon,\r\n\tpencil: PencilIcon,\r\n\tplus: PlusIcon,\r\n\t\"question-circle\": QuestionCircleIcon,\r\n\tsearch: SearchIcon,\r\n\tsun: SunIcon,\r\n\ttimes: TimesIcon,\r\n\t\"toggle-off\": ToggleOffIcon,\r\n\t\"toggle-on\": ToggleOnIcon,\r\n\ttools: ToolsIcon,\r\n\ttrash: TrashIcon,\r\n\tupload: UploadIcon,\r\n\twindow: WindowIcon,\r\n};\r\n\r\nexport type FinsembleIconProps = {\r\n\ticon: FinsembleIcon;\r\n\tclassName?: string;\r\n\tonClick?: (e: React.MouseEvent) => void;\r\n};\r\n\r\nexport const FinsembleIcon = (props: FinsembleIconProps) => {\r\n\tconst Icon = icons[props.icon];\r\n\r\n\treturn (\r\n\t\t<span\r\n\t\t\tclassName={[\"finsemble-icon\", `finsemble-icon-${props.icon}`, props.className || \"\"].join(\" \")}\r\n\t\t\trole=\"img\"\r\n\t\t\taria-label={`${props.icon} icon`}\r\n\t\t\tonClick={(e) => props.onClick && props.onClick(e)}\r\n\t\t>\r\n\t\t\t{Icon && <Icon></Icon>}\r\n\t\t</span>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"FinsembleIcon.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport \"./css/icon.css\";\r\nimport { ReactComponent as CheckIcon } from \"../../assets/icons/check.svg\";\r\nimport { ReactComponent as CheckSquare } from \"../../assets/icons/check-square.svg\";\r\nimport { ReactComponent as ChevronLeftIcon } from \"../../assets/icons/chevron-left.svg\";\r\nimport { ReactComponent as ChevronRightIcon } from \"../../assets/icons/chevron-right.svg\";\r\nimport { ReactComponent as CopyIcon } from \"../../assets/icons/copy.svg\";\r\nimport { ReactComponent as ExclaimationCircleIcon } from \"../../assets/icons/exclamation-circle.svg\";\r\nimport { ReactComponent as ExternalLinkIcon } from \"../../assets/icons/external-link.svg\";\r\nimport { ReactComponent as FlagIcon } from \"../../assets/icons/flag.svg\";\r\nimport { ReactComponent as FolderIcon } from \"../../assets/icons/folder.svg\";\r\nimport { ReactComponent as FontIcon } from \"../../assets/icons/font.svg\";\r\nimport { ReactComponent as GlobeIcon } from \"../../assets/icons/globe.svg\";\r\nimport { ReactComponent as HDDIcon } from \"../../assets/icons/hdd.svg\";\r\nimport { ReactComponent as KeyIcon } from \"../../assets/icons/key.svg\";\r\nimport { ReactComponent as LifeRingIcon } from \"../../assets/icons/life-ring.svg\";\r\nimport { ReactComponent as LockIcon } from \"../../assets/icons/lock.svg\";\r\nimport { ReactComponent as MagicIcon } from \"../../assets/icons/magic.svg\";\r\nimport { ReactComponent as MoonIcon } from \"../../assets/icons/moon.svg\";\r\nimport { ReactComponent as PaintRollerIcon } from \"../../assets/icons/paint-roller.svg\";\r\nimport { ReactComponent as PencilIcon } from \"../../assets/icons/pencil.svg\";\r\nimport { ReactComponent as PlusIcon } from \"../../assets/icons/plus.svg\";\r\nimport { ReactComponent as QuestionCircleIcon } from \"../../assets/icons/question-circle.svg\";\r\nimport { ReactComponent as SearchIcon } from \"../../assets/icons/search.svg\";\r\nimport { ReactComponent as SunIcon } from \"../../assets/icons/sun.svg\";\r\nimport { ReactComponent as TimesIcon } from \"../../assets/icons/times.svg\";\r\nimport { ReactComponent as ToggleOffIcon } from \"../../assets/icons/toggle-off.svg\";\r\nimport { ReactComponent as ToggleOnIcon } from \"../../assets/icons/toggle-on.svg\";\r\nimport { ReactComponent as ToolsIcon } from \"../../assets/icons/tools.svg\";\r\nimport { ReactComponent as TrashIcon } from \"../../assets/icons/trash.svg\";\r\nimport { ReactComponent as UploadIcon } from \"../../assets/icons/upload.svg\";\r\nimport { ReactComponent as WindowIcon } from \"../../assets/icons/window.svg\";\r\n\r\nexport type FinsembleIcon =\r\n\t| \"check\"\r\n\t| \"check-square\"\r\n\t| \"chevron-left\"\r\n\t| \"chevron-right\"\r\n\t| \"copy\"\r\n\t| \"exclamation-circle\"\r\n\t| \"external-link\"\r\n\t| \"flag\"\r\n\t| \"font\"\r\n\t| \"folder\"\r\n\t| \"globe\"\r\n\t| \"hdd\"\r\n\t| \"key\"\r\n\t| \"life-ring\"\r\n\t| \"lock\"\r\n\t| \"magic\"\r\n\t| \"moon\"\r\n\t| \"paint-roller\"\r\n\t| \"pencil\"\r\n\t| \"plus\"\r\n\t| \"question-circle\"\r\n\t| \"search\"\r\n\t| \"sun\"\r\n\t| \"times\"\r\n\t| \"toggle-off\"\r\n\t| \"toggle-on\"\r\n\t| \"tools\"\r\n\t| \"trash\"\r\n\t| \"upload\"\r\n\t| \"window\";\r\n\r\ntype IconComponents = {\r\n\t[key in FinsembleIcon]: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;\r\n};\r\n\r\nconst icons: IconComponents = {\r\n\tcheck: CheckIcon,\r\n\t\"check-square\": CheckSquare,\r\n\t\"chevron-left\": ChevronLeftIcon,\r\n\t\"chevron-right\": ChevronRightIcon,\r\n\tcopy: CopyIcon,\r\n\t\"exclamation-circle\": ExclaimationCircleIcon,\r\n\t\"external-link\": ExternalLinkIcon,\r\n\tflag: FlagIcon,\r\n\tfolder: FolderIcon,\r\n\tfont: FontIcon,\r\n\tglobe: GlobeIcon,\r\n\thdd: HDDIcon,\r\n\tkey: KeyIcon,\r\n\t\"life-ring\": LifeRingIcon,\r\n\tlock: LockIcon,\r\n\tmagic: MagicIcon,\r\n\tmoon: MoonIcon,\r\n\t\"paint-roller\": PaintRollerIcon,\r\n\tpencil: PencilIcon,\r\n\tplus: PlusIcon,\r\n\t\"question-circle\": QuestionCircleIcon,\r\n\tsearch: SearchIcon,\r\n\tsun: SunIcon,\r\n\ttimes: TimesIcon,\r\n\t\"toggle-off\": ToggleOffIcon,\r\n\t\"toggle-on\": ToggleOnIcon,\r\n\ttools: ToolsIcon,\r\n\ttrash: TrashIcon,\r\n\tupload: UploadIcon,\r\n\twindow: WindowIcon,\r\n};\r\n\r\nexport type FinsembleIconProps = {\r\n\ticon: FinsembleIcon;\r\n\tclassName?: string;\r\n\tonClick?: (e: React.MouseEvent) => void;\r\n};\r\n\r\nexport const FinsembleIcon = (props: FinsembleIconProps) => {\r\n\tconst Icon = icons[props.icon];\r\n\r\n\treturn (\r\n\t\t<span\r\n\t\t\tclassName={[\"finsemble-icon\", `finsemble-icon-${props.icon}`, props.className || \"\"].join(\" \")}\r\n\t\t\trole=\"img\"\r\n\t\t\taria-label={`${props.icon} icon`}\r\n\t\t\tonClick={(e) => props.onClick && props.onClick(e)}\r\n\t\t>\r\n\t\t\t{Icon && <Icon></Icon>}\r\n\t\t</span>\r\n\t);\r\n};\r\n"]}

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

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import { ReactNode } from "react";
 import "./css/selector.css";
 export interface FinsembleSelectProps {
     options: string[];
+    optionComponents?: ReactNode[];
     values?: string[];
     selected?: string[];
     size?: number;
@@ -9,4 +10,4 @@ export interface FinsembleSelectProps {
     showSearch?: boolean;
     limit?: number;
 }
-export declare const FinsembleSelect: ({ options, updateCallback, selected, size, values, showSearch, limit, }: FinsembleSelectProps) => JSX.Element;
+export declare const FinsembleSelect: ({ options, optionComponents, updateCallback, selected, size, values, showSearch, limit, }: FinsembleSelectProps) => JSX.Element;

package/react/components/common/FinsembleSelect.js

@@ -10,7 +10,7 @@ const removeItem = (startingArray, removableItem) => {
     }
     return startingArray.slice(0, removableIndex).concat(startingArray.slice(removableIndex + 1));
 };
-export const FinsembleSelect = ({ options, updateCallback, selected = [], size, values = options, showSearch = false, limit = Infinity, }) => {
+export const FinsembleSelect = ({ options, optionComponents, updateCallback, selected = [], size, values = options, showSearch = false, limit = Infinity, }) => {
     const mappedOptions = options.map((option, index) => {
         return { option, value: values[index] };
     });
@@ -56,6 +56,6 @@ export const FinsembleSelect = ({ options, updateCallback, selected = [], size,
                                 doSetSelectedOptions(selectedOptions.concat([value]));
                             }
                         } }),
-                    React.createElement("span", { dangerouslySetInnerHTML: { __html: option } })))))))));
+                    optionComponents?.[index] ? (optionComponents?.[index]) : (React.createElement("span", { dangerouslySetInnerHTML: { __html: option } }))))))))));
 };
 //# sourceMappingURL=FinsembleSelect.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleSelect.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from \"react\";\r\nimport \"./css/selector.css\";\r\nimport { FinsembleIcon } from \"./FinsembleIcon\";\r\nimport { FinsembleToggle } from \"./FinsembleToggle\";\r\n\r\nconst heightMultiplier = 40; // It works in storybook, but we will probably want a better way of detecting this soon.\r\n\r\nconst removeItem = (startingArray: string[], removableItem: string) => {\r\n\tconst removableIndex = startingArray.indexOf(removableItem);\r\n\tif (removableIndex < 0) {\r\n\t\treturn startingArray;\r\n\t}\r\n\treturn startingArray.slice(0, removableIndex).concat(startingArray.slice(removableIndex + 1));\r\n};\r\n\r\nexport interface FinsembleSelectProps {\r\n\toptions: string[];\r\n\tvalues?: string[];\r\n\tselected?: string[];\r\n\tsize?: number;\r\n\tupdateCallback: (selectedValues: string[]) => void;\r\n\tshowSearch?: boolean;\r\n\tlimit?: number;\r\n}\r\n\r\nexport const FinsembleSelect = ({\r\n\toptions,\r\n\tupdateCallback,\r\n\tselected = [],\r\n\tsize,\r\n\tvalues = options,\r\n\tshowSearch = false,\r\n\tlimit = Infinity,\r\n}: FinsembleSelectProps) => {\r\n\tconst mappedOptions = options.map((option, index) => {\r\n\t\treturn { option, value: values[index] };\r\n\t});\r\n\tconst [selectedOptions, setSelectedOptions] = useState<string[]>(selected);\r\n\tconst [displayOptions, setDisplayOptions] = useState(mappedOptions);\r\n\r\n\t// Magic numbers\r\n\tconst height = size ? heightMultiplier * size : \"\";\r\n\r\n\t// Updating consumer\r\n\tconst doSetSelectedOptions = (opts: string[]) => {\r\n\t\tif (opts.length > limit) {\r\n\t\t\topts = opts.slice(limit * -1);\r\n\t\t}\r\n\r\n\t\tif (JSON.stringify(opts) !== JSON.stringify(selectedOptions)) {\r\n\t\t\tupdateCallback(opts);\r\n\t\t}\r\n\t\tsetSelectedOptions(opts);\r\n\t};\r\n\r\n\t// Event handlers\r\n\tconst changeHandler = (e: any) => {\r\n\t\tdoSetSelectedOptions(Array.from(e.target.selectedOptions).map((option: any) => option.value));\r\n\t};\r\n\r\n\tconst updateSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n\t\t// @ts-ignore: \"value\" is on e.target, I don't know what your problem is\r\n\t\t// TS doesn't complain if I use .currentTarget, but then I can't use Enzyme to test it, so here we are\r\n\t\tconst searchString = e.target.value;\r\n\t\tsetDisplayOptions(\r\n\t\t\tmappedOptions\r\n\t\t\t\t.filter((optionMap) => optionMap.option.toUpperCase().includes(searchString.toUpperCase()))\r\n\t\t\t\t.map((combination) => {\r\n\t\t\t\t\treturn {\r\n\t\t\t\t\t\t...combination,\r\n\t\t\t\t\t\toption: combination.option.replace(\r\n\t\t\t\t\t\t\tnew RegExp(`(${searchString})`, \"i\"),\r\n\t\t\t\t\t\t\t`<span class=\"highlight\">$1</span>`\r\n\t\t\t\t\t\t),\r\n\t\t\t\t\t};\r\n\t\t\t\t})\r\n\t\t);\r\n\t};\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<div className=\"emperorSelectContainer\">\r\n\t\t\t\t{showSearch && (\r\n\t\t\t\t\t<>\r\n\t\t\t\t\t\t<FinsembleIcon className=\"searchIcon\" icon=\"search\"></FinsembleIcon>\r\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"Search\" aria-label=\"search\" className=\"search\" onInput={updateSearch} />\r\n\t\t\t\t\t</>\r\n\t\t\t\t)}\r\n\t\t\t\t<select className=\"shogunSelect\" multiple onChange={changeHandler}>\r\n\t\t\t\t\t{displayOptions.map(({ option, value }, index: number) => (\r\n\t\t\t\t\t\t<option key={`shogun-option-${index}`} value={value}>\r\n\t\t\t\t\t\t\t{option}\r\n\t\t\t\t\t\t</option>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</select>\r\n\t\t\t\t<div className=\"emperorSelect\" style={height === \"\" ? {} : { height }}>\r\n\t\t\t\t\t{displayOptions.map(({ option, value }, index: number) => (\r\n\t\t\t\t\t\t<div className=\"emperorOption\" key={`emperor-option-${index}`}>\r\n\t\t\t\t\t\t\t<label>\r\n\t\t\t\t\t\t\t\t<FinsembleToggle\r\n\t\t\t\t\t\t\t\t\tchecked={selectedOptions.includes(value) || selected.includes(value)}\r\n\t\t\t\t\t\t\t\t\tonChange={() => {\r\n\t\t\t\t\t\t\t\t\t\tif (selectedOptions.includes(value) || selected.includes(value)) {\r\n\t\t\t\t\t\t\t\t\t\t\tdoSetSelectedOptions(removeItem(selectedOptions, value));\r\n\t\t\t\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\t\t\t\tdoSetSelectedOptions(selectedOptions.concat([value]));\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t></FinsembleToggle>\r\n\t\t\t\t\t\t\t\t<span dangerouslySetInnerHTML={{ __html: option }}></span>\r\n\t\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"FinsembleSelect.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState, ReactNode } from \"react\";\r\nimport \"./css/selector.css\";\r\nimport { FinsembleIcon } from \"./FinsembleIcon\";\r\nimport { FinsembleToggle } from \"./FinsembleToggle\";\r\n\r\nconst heightMultiplier = 40; // It works in storybook, but we will probably want a better way of detecting this soon.\r\n\r\nconst removeItem = (startingArray: string[], removableItem: string) => {\r\n\tconst removableIndex = startingArray.indexOf(removableItem);\r\n\tif (removableIndex < 0) {\r\n\t\treturn startingArray;\r\n\t}\r\n\treturn startingArray.slice(0, removableIndex).concat(startingArray.slice(removableIndex + 1));\r\n};\r\n\r\nexport interface FinsembleSelectProps {\r\n\toptions: string[];\r\n\toptionComponents?: ReactNode[];\r\n\tvalues?: string[];\r\n\tselected?: string[];\r\n\tsize?: number;\r\n\tupdateCallback: (selectedValues: string[]) => void;\r\n\tshowSearch?: boolean;\r\n\tlimit?: number;\r\n}\r\n\r\nexport const FinsembleSelect = ({\r\n\toptions,\r\n\toptionComponents,\r\n\tupdateCallback,\r\n\tselected = [],\r\n\tsize,\r\n\tvalues = options,\r\n\tshowSearch = false,\r\n\tlimit = Infinity,\r\n}: FinsembleSelectProps) => {\r\n\tconst mappedOptions = options.map((option, index) => {\r\n\t\treturn { option, value: values[index] };\r\n\t});\r\n\tconst [selectedOptions, setSelectedOptions] = useState<string[]>(selected);\r\n\tconst [displayOptions, setDisplayOptions] = useState(mappedOptions);\r\n\r\n\t// Magic numbers\r\n\tconst height = size ? heightMultiplier * size : \"\";\r\n\r\n\t// Updating consumer\r\n\tconst doSetSelectedOptions = (opts: string[]) => {\r\n\t\tif (opts.length > limit) {\r\n\t\t\topts = opts.slice(limit * -1);\r\n\t\t}\r\n\r\n\t\tif (JSON.stringify(opts) !== JSON.stringify(selectedOptions)) {\r\n\t\t\tupdateCallback(opts);\r\n\t\t}\r\n\t\tsetSelectedOptions(opts);\r\n\t};\r\n\r\n\t// Event handlers\r\n\tconst changeHandler = (e: any) => {\r\n\t\tdoSetSelectedOptions(Array.from(e.target.selectedOptions).map((option: any) => option.value));\r\n\t};\r\n\r\n\tconst updateSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n\t\t// @ts-ignore: \"value\" is on e.target, I don't know what your problem is\r\n\t\t// TS doesn't complain if I use .currentTarget, but then I can't use Enzyme to test it, so here we are\r\n\t\tconst searchString = e.target.value;\r\n\t\tsetDisplayOptions(\r\n\t\t\tmappedOptions\r\n\t\t\t\t.filter((optionMap) => optionMap.option.toUpperCase().includes(searchString.toUpperCase()))\r\n\t\t\t\t.map((combination) => {\r\n\t\t\t\t\treturn {\r\n\t\t\t\t\t\t...combination,\r\n\t\t\t\t\t\toption: combination.option.replace(\r\n\t\t\t\t\t\t\tnew RegExp(`(${searchString})`, \"i\"),\r\n\t\t\t\t\t\t\t`<span class=\"highlight\">$1</span>`\r\n\t\t\t\t\t\t),\r\n\t\t\t\t\t};\r\n\t\t\t\t})\r\n\t\t);\r\n\t};\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<div className=\"emperorSelectContainer\">\r\n\t\t\t\t{showSearch && (\r\n\t\t\t\t\t<>\r\n\t\t\t\t\t\t<FinsembleIcon className=\"searchIcon\" icon=\"search\"></FinsembleIcon>\r\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"Search\" aria-label=\"search\" className=\"search\" onInput={updateSearch} />\r\n\t\t\t\t\t</>\r\n\t\t\t\t)}\r\n\t\t\t\t<select className=\"shogunSelect\" multiple onChange={changeHandler}>\r\n\t\t\t\t\t{displayOptions.map(({ option, value }, index: number) => (\r\n\t\t\t\t\t\t<option key={`shogun-option-${index}`} value={value}>\r\n\t\t\t\t\t\t\t{option}\r\n\t\t\t\t\t\t</option>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</select>\r\n\t\t\t\t<div className=\"emperorSelect\" style={height === \"\" ? {} : { height }}>\r\n\t\t\t\t\t{displayOptions.map(({ option, value }, index: number) => (\r\n\t\t\t\t\t\t<div className=\"emperorOption\" key={`emperor-option-${index}`}>\r\n\t\t\t\t\t\t\t<label>\r\n\t\t\t\t\t\t\t\t<FinsembleToggle\r\n\t\t\t\t\t\t\t\t\tchecked={selectedOptions.includes(value) || selected.includes(value)}\r\n\t\t\t\t\t\t\t\t\tonChange={() => {\r\n\t\t\t\t\t\t\t\t\t\tif (selectedOptions.includes(value) || selected.includes(value)) {\r\n\t\t\t\t\t\t\t\t\t\t\tdoSetSelectedOptions(removeItem(selectedOptions, value));\r\n\t\t\t\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\t\t\t\tdoSetSelectedOptions(selectedOptions.concat([value]));\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t></FinsembleToggle>\r\n\t\t\t\t\t\t\t\t{optionComponents?.[index] ? (\r\n\t\t\t\t\t\t\t\t\toptionComponents?.[index]\r\n\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t<span dangerouslySetInnerHTML={{ __html: option }}></span>\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</>\r\n\t);\r\n};\r\n"]}

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

@@ -2,12 +2,13 @@
  * Copyright 2017 - 2020 by ChartIQ, Inc.
  * All rights reserved.
  */
-/// <reference types="react" />
+import React from "react";
 import "./css/tooltip.css";
 export declare type TooltipProps = {
-    type?: "info" | "error" | "warn";
+    type?: "info" | "error" | "warn" | "lock";
     altClassName?: string;
     position?: string;
     children?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
-export declare const Tooltip: ({ type, position, children, altClassName }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ type, position, children, altClassName, onClick, }: TooltipProps) => JSX.Element;

package/react/components/common/Tooltip.js

@@ -5,7 +5,7 @@
 import React, { useState, useRef } from "react";
 import "./css/tooltip.css";
 import { FinsembleIcon } from "./FinsembleIcon";
-export const Tooltip = ({ type = "info", position = "right", children = "", altClassName }) => {
+export const Tooltip = ({ type = "info", position = "right", children = "", altClassName, onClick = () => { }, }) => {
     const [tooltipOpen, setTooltipOpen] = useState(false);
     const tooltipContentRef = useRef(null);
     const pos = tooltipContentRef.current && tooltipContentRef.current.getBoundingClientRect().right > window.innerWidth
@@ -19,8 +19,8 @@ export const Tooltip = ({ type = "info", position = "right", children = "", altC
             setTooltipOpen(false);
         }, onBlur: () => {
             setTooltipOpen(false);
-        } },
-        altClassName ? (React.createElement("div", { className: altClassName })) : (React.createElement("div", { className: ["tooltip-icon", `tooltip-icon-${type}`].join(" ") }, type === "error" || type === "warn" ? (React.createElement(FinsembleIcon, { icon: "exclamation-circle" })) : (React.createElement(FinsembleIcon, { icon: "question-circle" })))),
+        }, onClick: onClick },
+        altClassName ? (React.createElement("div", { className: altClassName })) : (React.createElement("div", { className: ["tooltip-icon", `tooltip-icon-${type}`].join(" ") }, type === "error" || type === "warn" ? (React.createElement(FinsembleIcon, { icon: "exclamation-circle" })) : type === "lock" ? (React.createElement(FinsembleIcon, { icon: "lock" })) : (React.createElement(FinsembleIcon, { icon: "question-circle" })))),
         React.createElement("div", { ref: tooltipContentRef, className: ["tooltip-content", tooltipOpen ? "visible" : ""].join(" ") }, children)));
 };
 //# sourceMappingURL=Tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/common/Tooltip.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAShD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,QAAQ,GAAG,OAAO,EAAE,QAAQ,GAAG,EAAE,EAAE,YAAY,EAAgB,EAAE,EAAE;IAC3G,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAItD,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACvD,MAAM,GAAG,GACR,iBAAiB,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU;QACvG,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,QAAQ,CAAC;IAEb,OAAO,CACN,6BACC,SAAS,EAAE,CAAC,SAAS,EAAE,4BAA4B,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACnE,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,SAAS,gBACF,QAAQ,EACpB,WAAW,EAAE,GAAG,EAAE;YACjB,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;YAClB,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACZ,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;QAEA,YAAY,CAAC,CAAC,CAAC,CACf,6BAAK,SAAS,EAAE,YAAY,GAAQ,CACpC,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAE,CAAC,cAAc,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAChE,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACtC,oBAAC,aAAa,IAAC,IAAI,EAAC,oBAAoB,GAAiB,CACzD,CAAC,CAAC,CAAC,CACH,oBAAC,aAAa,IAAC,IAAI,EAAC,iBAAiB,GAAiB,CACtD,CACI,CACN;QACD,6BAAK,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IACjG,QAAQ,CACJ,CACD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\r\n * Copyright 2017 - 2020 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport React, { useState, useRef } from \"react\";\r\nimport \"./css/tooltip.css\";\r\nimport { FinsembleIcon } from \"./FinsembleIcon\";\r\n\r\nexport type TooltipProps = {\r\n\ttype?: \"info\" | \"error\" | \"warn\";\r\n\taltClassName?: string;\r\n\tposition?: string;\r\n\tchildren?: string;\r\n};\r\n\r\nexport const Tooltip = ({ type = \"info\", position = \"right\", children = \"\", altClassName }: TooltipProps) => {\r\n\tconst [tooltipOpen, setTooltipOpen] = useState(false);\r\n\r\n\t// If the tooltip content is floating so far to the right that it flows offscreen, switch the position to the left.\r\n\t// This only works for right-sided tooltips. Left-sided tooltips that float offscreen are not addressed.\r\n\tconst tooltipContentRef = useRef<HTMLDivElement>(null);\r\n\tconst pos =\r\n\t\ttooltipContentRef.current && tooltipContentRef.current.getBoundingClientRect().right > window.innerWidth\r\n\t\t\t? \"left\"\r\n\t\t\t: position;\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={[\"tooltip\", `tooltip-position-content-${pos}`].join(\" \")}\r\n\t\t\ttabIndex={0}\r\n\t\t\trole=\"tooltip\"\r\n\t\t\taria-label={children}\r\n\t\t\tonMouseOver={() => {\r\n\t\t\t\tsetTooltipOpen(true);\r\n\t\t\t}}\r\n\t\t\tonFocus={() => {\r\n\t\t\t\tsetTooltipOpen(true);\r\n\t\t\t}}\r\n\t\t\tonMouseLeave={() => {\r\n\t\t\t\tsetTooltipOpen(false);\r\n\t\t\t}}\r\n\t\t\tonBlur={() => {\r\n\t\t\t\tsetTooltipOpen(false);\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t{altClassName ? (\r\n\t\t\t\t<div className={altClassName}></div>\r\n\t\t\t) : (\r\n\t\t\t\t<div className={[\"tooltip-icon\", `tooltip-icon-${type}`].join(\" \")}>\r\n\t\t\t\t\t{type === \"error\" || type === \"warn\" ? (\r\n\t\t\t\t\t\t<FinsembleIcon icon=\"exclamation-circle\"></FinsembleIcon>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<FinsembleIcon icon=\"question-circle\"></FinsembleIcon>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</div>\r\n\t\t\t)}\r\n\t\t\t<div ref={tooltipContentRef} className={[\"tooltip-content\", tooltipOpen ? \"visible\" : \"\"].join(\" \")}>\r\n\t\t\t\t{children}\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/common/Tooltip.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAUhD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACvB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,OAAO,EAClB,QAAQ,GAAG,EAAE,EACb,YAAY,EACZ,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GACJ,EAAE,EAAE;IAClB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAItD,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACvD,MAAM,GAAG,GACR,iBAAiB,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU;QACvG,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,QAAQ,CAAC;IAEb,OAAO,CACN,6BACC,SAAS,EAAE,CAAC,SAAS,EAAE,4BAA4B,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACnE,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,SAAS,gBACF,QAAQ,EACpB,WAAW,EAAE,GAAG,EAAE;YACjB,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;YAClB,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACZ,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,OAAO,EAAE,OAAO;QAEf,YAAY,CAAC,CAAC,CAAC,CACf,6BAAK,SAAS,EAAE,YAAY,GAAQ,CACpC,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAE,CAAC,cAAc,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAChE,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACtC,oBAAC,aAAa,IAAC,IAAI,EAAC,oBAAoB,GAAiB,CACzD,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACrB,oBAAC,aAAa,IAAC,IAAI,EAAC,MAAM,GAAiB,CAC3C,CAAC,CAAC,CAAC,CACH,oBAAC,aAAa,IAAC,IAAI,EAAC,iBAAiB,GAAiB,CACtD,CACI,CACN;QACD,6BAAK,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IACjG,QAAQ,CACJ,CACD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\r\n * Copyright 2017 - 2020 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport React, { useState, useRef } from \"react\";\r\nimport \"./css/tooltip.css\";\r\nimport { FinsembleIcon } from \"./FinsembleIcon\";\r\n\r\nexport type TooltipProps = {\r\n\ttype?: \"info\" | \"error\" | \"warn\" | \"lock\";\r\n\taltClassName?: string;\r\n\tposition?: string;\r\n\tchildren?: string;\r\n\tonClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\r\n};\r\n\r\nexport const Tooltip = ({\r\n\ttype = \"info\",\r\n\tposition = \"right\",\r\n\tchildren = \"\",\r\n\taltClassName,\r\n\tonClick = () => {},\r\n}: TooltipProps) => {\r\n\tconst [tooltipOpen, setTooltipOpen] = useState(false);\r\n\r\n\t// If the tooltip content is floating so far to the right that it flows offscreen, switch the position to the left.\r\n\t// This only works for right-sided tooltips. Left-sided tooltips that float offscreen are not addressed.\r\n\tconst tooltipContentRef = useRef<HTMLDivElement>(null);\r\n\tconst pos =\r\n\t\ttooltipContentRef.current && tooltipContentRef.current.getBoundingClientRect().right > window.innerWidth\r\n\t\t\t? \"left\"\r\n\t\t\t: position;\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={[\"tooltip\", `tooltip-position-content-${pos}`].join(\" \")}\r\n\t\t\ttabIndex={0}\r\n\t\t\trole=\"tooltip\"\r\n\t\t\taria-label={children}\r\n\t\t\tonMouseOver={() => {\r\n\t\t\t\tsetTooltipOpen(true);\r\n\t\t\t}}\r\n\t\t\tonFocus={() => {\r\n\t\t\t\tsetTooltipOpen(true);\r\n\t\t\t}}\r\n\t\t\tonMouseLeave={() => {\r\n\t\t\t\tsetTooltipOpen(false);\r\n\t\t\t}}\r\n\t\t\tonBlur={() => {\r\n\t\t\t\tsetTooltipOpen(false);\r\n\t\t\t}}\r\n\t\t\tonClick={onClick}\r\n\t\t>\r\n\t\t\t{altClassName ? (\r\n\t\t\t\t<div className={altClassName}></div>\r\n\t\t\t) : (\r\n\t\t\t\t<div className={[\"tooltip-icon\", `tooltip-icon-${type}`].join(\" \")}>\r\n\t\t\t\t\t{type === \"error\" || type === \"warn\" ? (\r\n\t\t\t\t\t\t<FinsembleIcon icon=\"exclamation-circle\"></FinsembleIcon>\r\n\t\t\t\t\t) : type === \"lock\" ? (\r\n\t\t\t\t\t\t<FinsembleIcon icon=\"lock\"></FinsembleIcon>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<FinsembleIcon icon=\"question-circle\"></FinsembleIcon>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</div>\r\n\t\t\t)}\r\n\t\t\t<div ref={tooltipContentRef} className={[\"tooltip-content\", tooltipOpen ? \"visible\" : \"\"].join(\" \")}>\r\n\t\t\t\t{children}\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}

package/react/components/common/css/tooltip.css

@@ -66,3 +66,13 @@
 	border-color: #f5a623;
 	position: relative;
 }
+
+.app-edit-access-item {
+	display: flex;
+	width: 100%;
+	padding-right: 1em;
+}
+
+.app-edit-access-item-name {
+	flex-grow: 1;
+}