@finsemble/finsemble-ui 6.1.4 → 6.3.0-beta.20211008

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

@@ -1,10 +1,5 @@
 import React from "react";
 import "./css/drop-zone.css";
-declare global {
-    interface Window {
-        File: object;
-    }
-}
 export declare type FileWithPath = File & {
     path?: string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DropZone.js","sourceRoot":"","sources":["../../../src/components/common/DropZone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,qBAAqB,CAAC;AA4B7B,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAiB,EAAE,EAAE;IACtF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,CAAC,CAA0D,EAAE,EAAE;QACtF,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACrB,CAAC,CAAC;IAIF,IAAI,SAAS,EAAE;QAId,IAAI,OAAO,GAA0B,IAAI,CAAC;QAC1C,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;YAC3C,eAAe,CAAC,CAAC,CAAC,CAAC;YACnB,YAAY,CAAC,IAAI,CAAC,CAAC;YAGnB,IAAI,OAAO,KAAK,IAAI,EAAE;gBACrB,YAAY,CAAC,OAAO,CAAC,CAAC;aACtB;YAGD,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAEzB,YAAY,CAAC,KAAK,CAAC,CAAC;YACrB,CAAC,EAAE,GAAG,CAAC,CAAC;QAET,CAAC,CAAC,CAAC;QACH,YAAY,CAAC,KAAK,CAAC,CAAC;KACpB;IAED,OAAO,QAAQ,CAAC,CAAC,CAAC,CACjB,0CAAG,QAAQ,CAAI,CACf,CAAC,CAAC,CAAC,CACH,6BACC,SAAS,EAAE,YAAY,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,EACnF,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YAClB,eAAe,CAAC,CAAC,CAAC,CAAC;YACnB,aAAa,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YAClB,eAAe,CAAC,CAAC,CAAC,CAAC;YACnB,aAAa,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,EACD,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,aAAa,CAAC,KAAK,CAAC,CAAC;YAErB,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,YAAY,CAAC;YACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACtC,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE;oBACtB,SAAS;iBACT;gBACD,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;aACzB;YAED,eAAe,CAAC,CAAC,CAAC,CAAC;QACpB,CAAC,IAEA,QAAQ,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useEffect, useState } from \"react\";\r\nimport \"./css/drop-zone.css\";\r\n\r\ndeclare global {\r\n\tinterface Window {\r\n\t\tFile: object;\r\n\t}\r\n}\r\n\r\n// Electron adds File.path\r\nexport type FileWithPath = File & { path?: string };\r\n\r\nexport type DropZoneProps = {\r\n\tchildren: React.ReactNode;\r\n\tprocessFile: (fileObj: FileWithPath, index: number) => void;\r\n\tsuppress?: boolean;\r\n};\r\n\r\n/***\r\n * Component that serves as a drop zone. It also keeps track of visual concerns and event handlers for\r\n * drag-and-drop.\r\n *\r\n * The DropZone component is intended to be a container element for other elements, such as text, lists,\r\n * images, input elements, etc.\r\n *\r\n * @callback processFile - This function will be called for each file that is dropped in the dropzone.\r\n * @param {ReactNode} children - React will fill this in.\r\n * @param {boolean} suppress=false - If the dropzone-ness should be suppressed, which would turn this container into just a div\r\n */\r\nexport const DropZone = ({ processFile, children, suppress = false }: DropZoneProps) => {\r\n\tconst [isDragging, setIsDragging] = useState(false);\r\n\tconst [potential, setPotential] = useState(false);\r\n\tconst [singleton, setSingleton] = useState(true);\r\n\r\n\tconst preventDefaults = (e: { preventDefault: Function; stopPropagation: Function }) => {\r\n\t\te.preventDefault();\r\n\t\te.stopPropagation();\r\n\t};\r\n\r\n\t// Check if something is being dragged somewhere on the page\r\n\t// If dragging is happening on the page, there will be a visual indication for potential drop zone\r\n\tif (singleton) {\r\n\t\t// \"dragenter\" and \"dragleave\" events are fired off of every single child element, and counting them isn't reliable\r\n\t\t// so, when \"dragover\" events are fired, we know dragging is happening.\r\n\t\t// we will wait 100ms after the last \"dragover\" event is fired, and then turn off the potential zone.\r\n\t\tlet timeout: NodeJS.Timeout | null = null;\r\n\t\tdocument.addEventListener(\"dragover\", (e) => {\r\n\t\t\tpreventDefaults(e);\r\n\t\t\tsetPotential(true);\r\n\r\n\t\t\t// If timeout was previously set, clear it\r\n\t\t\tif (timeout !== null) {\r\n\t\t\t\tclearTimeout(timeout);\r\n\t\t\t}\r\n\r\n\t\t\t// Set a new timeout, now that we've gotten a new dragover event\r\n\t\t\ttimeout = setTimeout(() => {\r\n\t\t\t\t// If it's been 100ms and no dragover event has been fired, assume the user isn't dragging anymore.\r\n\t\t\t\tsetPotential(false);\r\n\t\t\t}, 100); // 100ms was chosen by trial and error.\r\n\t\t\t// 10ms was too little time, and caused flicker. 100ms doesn't have a flicker, and turns off potential without a noticeable delay\r\n\t\t});\r\n\t\tsetSingleton(false);\r\n\t}\r\n\r\n\treturn suppress ? (\r\n\t\t<>{children}</>\r\n\t) : (\r\n\t\t<div\r\n\t\t\tclassName={`dropZone ${isDragging ? \"isDragging\" : potential ? \"isPotential\" : \"\"}`}\r\n\t\t\tonDragEnter={(e) => {\r\n\t\t\t\tpreventDefaults(e);\r\n\t\t\t\tsetIsDragging(true);\r\n\t\t\t}}\r\n\t\t\tonDragLeave={(e) => {\r\n\t\t\t\tpreventDefaults(e);\r\n\t\t\t\tsetIsDragging(false);\r\n\t\t\t}}\r\n\t\t\tonDrop={(e) => {\r\n\t\t\t\tsetIsDragging(false);\r\n\r\n\t\t\t\tconst { files } = e.dataTransfer;\r\n\t\t\t\tfor (let i = 0; i < files.length; i++) {\r\n\t\t\t\t\tif (files[i] === null) {\r\n\t\t\t\t\t\tcontinue;\r\n\t\t\t\t\t}\r\n\t\t\t\t\tprocessFile(files[i], i);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tpreventDefaults(e);\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"DropZone.js","sourceRoot":"","sources":["../../../src/components/common/DropZone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,qBAAqB,CAAC;AAsB7B,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAiB,EAAE,EAAE;IACtF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,CAAC,CAA0D,EAAE,EAAE;QACtF,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACrB,CAAC,CAAC;IAIF,IAAI,SAAS,EAAE;QAId,IAAI,OAAO,GAA0B,IAAI,CAAC;QAC1C,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;YAC3C,eAAe,CAAC,CAAC,CAAC,CAAC;YACnB,YAAY,CAAC,IAAI,CAAC,CAAC;YAGnB,IAAI,OAAO,KAAK,IAAI,EAAE;gBACrB,YAAY,CAAC,OAAO,CAAC,CAAC;aACtB;YAGD,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAEzB,YAAY,CAAC,KAAK,CAAC,CAAC;YACrB,CAAC,EAAE,GAAG,CAAC,CAAC;QAET,CAAC,CAAC,CAAC;QACH,YAAY,CAAC,KAAK,CAAC,CAAC;KACpB;IAED,OAAO,QAAQ,CAAC,CAAC,CAAC,CACjB,0CAAG,QAAQ,CAAI,CACf,CAAC,CAAC,CAAC,CACH,6BACC,SAAS,EAAE,YAAY,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,EACnF,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YAClB,eAAe,CAAC,CAAC,CAAC,CAAC;YACnB,aAAa,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YAClB,eAAe,CAAC,CAAC,CAAC,CAAC;YACnB,aAAa,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,EACD,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,aAAa,CAAC,KAAK,CAAC,CAAC;YAErB,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,YAAY,CAAC;YACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACtC,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE;oBACtB,SAAS;iBACT;gBACD,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;aACzB;YAED,eAAe,CAAC,CAAC,CAAC,CAAC;QACpB,CAAC,IAEA,QAAQ,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useState } from \"react\";\r\nimport \"./css/drop-zone.css\";\r\n\r\n// Electron adds File.path\r\nexport type FileWithPath = File & { path?: string };\r\n\r\nexport type DropZoneProps = {\r\n\tchildren: React.ReactNode;\r\n\tprocessFile: (fileObj: FileWithPath, index: number) => void;\r\n\tsuppress?: boolean;\r\n};\r\n\r\n/***\r\n * Component that serves as a drop zone. It also keeps track of visual concerns and event handlers for\r\n * drag-and-drop.\r\n *\r\n * The DropZone component is intended to be a container element for other elements, such as text, lists,\r\n * images, input elements, etc.\r\n *\r\n * @callback processFile - This function will be called for each file that is dropped in the dropzone.\r\n * @param {ReactNode} children - React will fill this in.\r\n * @param {boolean} suppress=false - If the dropzone-ness should be suppressed, which would turn this container into just a div\r\n */\r\nexport const DropZone = ({ processFile, children, suppress = false }: DropZoneProps) => {\r\n\tconst [isDragging, setIsDragging] = useState(false);\r\n\tconst [potential, setPotential] = useState(false);\r\n\tconst [singleton, setSingleton] = useState(true);\r\n\r\n\tconst preventDefaults = (e: { preventDefault: Function; stopPropagation: Function }) => {\r\n\t\te.preventDefault();\r\n\t\te.stopPropagation();\r\n\t};\r\n\r\n\t// Check if something is being dragged somewhere on the page\r\n\t// If dragging is happening on the page, there will be a visual indication for potential drop zone\r\n\tif (singleton) {\r\n\t\t// \"dragenter\" and \"dragleave\" events are fired off of every single child element, and counting them isn't reliable\r\n\t\t// so, when \"dragover\" events are fired, we know dragging is happening.\r\n\t\t// we will wait 100ms after the last \"dragover\" event is fired, and then turn off the potential zone.\r\n\t\tlet timeout: NodeJS.Timeout | null = null;\r\n\t\tdocument.addEventListener(\"dragover\", (e) => {\r\n\t\t\tpreventDefaults(e);\r\n\t\t\tsetPotential(true);\r\n\r\n\t\t\t// If timeout was previously set, clear it\r\n\t\t\tif (timeout !== null) {\r\n\t\t\t\tclearTimeout(timeout);\r\n\t\t\t}\r\n\r\n\t\t\t// Set a new timeout, now that we've gotten a new dragover event\r\n\t\t\ttimeout = setTimeout(() => {\r\n\t\t\t\t// If it's been 100ms and no dragover event has been fired, assume the user isn't dragging anymore.\r\n\t\t\t\tsetPotential(false);\r\n\t\t\t}, 100); // 100ms was chosen by trial and error.\r\n\t\t\t// 10ms was too little time, and caused flicker. 100ms doesn't have a flicker, and turns off potential without a noticeable delay\r\n\t\t});\r\n\t\tsetSingleton(false);\r\n\t}\r\n\r\n\treturn suppress ? (\r\n\t\t<>{children}</>\r\n\t) : (\r\n\t\t<div\r\n\t\t\tclassName={`dropZone ${isDragging ? \"isDragging\" : potential ? \"isPotential\" : \"\"}`}\r\n\t\t\tonDragEnter={(e) => {\r\n\t\t\t\tpreventDefaults(e);\r\n\t\t\t\tsetIsDragging(true);\r\n\t\t\t}}\r\n\t\t\tonDragLeave={(e) => {\r\n\t\t\t\tpreventDefaults(e);\r\n\t\t\t\tsetIsDragging(false);\r\n\t\t\t}}\r\n\t\t\tonDrop={(e) => {\r\n\t\t\t\tsetIsDragging(false);\r\n\r\n\t\t\t\tconst { files } = e.dataTransfer;\r\n\t\t\t\tfor (let i = 0; i < files.length; i++) {\r\n\t\t\t\t\tif (files[i] === null) {\r\n\t\t\t\t\t\tcontinue;\r\n\t\t\t\t\t}\r\n\t\t\t\t\tprocessFile(files[i], i);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tpreventDefaults(e);\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}

package/react/components/common/DropdownButton.js

@@ -25,7 +25,7 @@ const DropdownButton = ({ buttonLabel = "Label", buttonOptions = [], mainAction,
         React.createElement("div", { className: "finsemble-dropdown-action__btn" },
             React.createElement("span", { className: "btn-label", onClick: buttonAction }, buttonLabel),
             React.createElement("span", { className: "separator" }),
-            React.createElement("div", { className: "expand-options", onClick: (event) => setExpanded(!expanded) },
+            React.createElement("div", { className: "expand-options", onClick: () => setExpanded(!expanded) },
                 React.createElement("span", { className: "caret" }))),
         expanded ? React.createElement("div", { className: "finsemble-dropdown-action__btn-options" }, options) : null));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../src/components/common/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,6BAA6B,CAAC;AACrC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAS9E,MAAM,cAAc,GAAiE,CAAC,EACrF,WAAW,GAAG,OAAO,EACrB,aAAa,GAAG,EAAE,EAClB,UAAU,GAC2B,EAAE,EAAE;IACzC,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,uBAAuB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9D,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACpD,6BACC,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,uCAAuC,EACjD,OAAO,EAAE,GAAG,EAAE;YACb,MAAM,CAAC,YAAY,EAAE,CAAC;YACtB,WAAW,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,IAEA,MAAM,CAAC,WAAW,CACd,CACN,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ,EAAE;YACb,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,OAAO;SACP;QAED,IAAI,UAAU,EAAE;YACf,UAAU,EAAE,CAAC;SACb;aAAM;YACN,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;SAC7B;IACF,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,0CAA0C;QACzE,6BAAK,SAAS,EAAC,gCAAgC;YAC9C,8BAAM,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,YAAY,IAC/C,WAAW,CACN;YACP,8BAAM,SAAS,EAAC,WAAW,GAAQ;YACnC,6BAAK,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC;gBACzE,8BAAM,SAAS,EAAC,OAAO,GAAQ,CAC1B,CACD;QACL,QAAQ,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,wCAAwC,IAAE,OAAO,CAAO,CAAC,CAAC,CAAC,IAAI,CACrF,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import React, { useState, useRef } from \"react\";\r\nimport \"../../assets/css/button.css\";\r\nimport { useOutsideClickDetector } from \"../../hooks/useOutsideClickDetector\";\r\nimport { IFinsembleButtonProps } from \"../shared/Button\";\r\n\r\nexport interface IFinsembleDropdownActionButtonProps {\r\n\tbuttonLabel: string;\r\n\tbuttonOptions: Array<IFinsembleButtonProps>;\r\n\tmainAction: Function;\r\n}\r\n\r\nconst DropdownButton: React.FunctionComponent<IFinsembleDropdownActionButtonProps> = ({\r\n\tbuttonLabel = \"Label\",\r\n\tbuttonOptions = [],\r\n\tmainAction,\r\n}: IFinsembleDropdownActionButtonProps) => {\r\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\r\n\tconst [expanded, setExpanded] = useState(false);\r\n\r\n\tuseOutsideClickDetector(wrapperRef, () => setExpanded(false));\r\n\r\n\tconst options = buttonOptions.map((option, index) => (\r\n\t\t<div\r\n\t\t\tkey={index}\r\n\t\t\tclassName=\"finsemble-dropdown-action__btn-option\"\r\n\t\t\tonClick={() => {\r\n\t\t\t\toption.clickHandler();\r\n\t\t\t\tsetExpanded(false);\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t{option.buttonLabel}\r\n\t\t</div>\r\n\t));\r\n\r\n\tconst buttonAction = () => {\r\n\t\tif (expanded) {\r\n\t\t\tsetExpanded(false);\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (mainAction) {\r\n\t\t\tmainAction();\r\n\t\t} else {\r\n\t\t\t() => setExpanded(!expanded);\r\n\t\t}\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div ref={wrapperRef} className=\"finsemble-dropdown-action__btn-container\">\r\n\t\t\t<div className=\"finsemble-dropdown-action__btn\">\r\n\t\t\t\t<span className=\"btn-label\" onClick={buttonAction}>\r\n\t\t\t\t\t{buttonLabel}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span className=\"separator\"></span>\r\n\t\t\t\t<div className=\"expand-options\" onClick={(event) => setExpanded(!expanded)}>\r\n\t\t\t\t\t<span className=\"caret\"></span>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t{expanded ? <div className=\"finsemble-dropdown-action__btn-options\">{options}</div> : null}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default DropdownButton;\r\n"]}
+{"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../src/components/common/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,6BAA6B,CAAC;AACrC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAS9E,MAAM,cAAc,GAAiE,CAAC,EACrF,WAAW,GAAG,OAAO,EACrB,aAAa,GAAG,EAAE,EAClB,UAAU,GAC2B,EAAE,EAAE;IACzC,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,uBAAuB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9D,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACpD,6BACC,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,uCAAuC,EACjD,OAAO,EAAE,GAAG,EAAE;YACb,MAAM,CAAC,YAAY,EAAE,CAAC;YACtB,WAAW,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,IAEA,MAAM,CAAC,WAAW,CACd,CACN,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ,EAAE;YACb,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,OAAO;SACP;QAED,IAAI,UAAU,EAAE;YACf,UAAU,EAAE,CAAC;SACb;aAAM;YACN,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;SAC7B;IACF,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,0CAA0C;QACzE,6BAAK,SAAS,EAAC,gCAAgC;YAC9C,8BAAM,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,YAAY,IAC/C,WAAW,CACN;YACP,8BAAM,SAAS,EAAC,WAAW,GAAQ;YACnC,6BAAK,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC;gBACpE,8BAAM,SAAS,EAAC,OAAO,GAAQ,CAC1B,CACD;QACL,QAAQ,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,wCAAwC,IAAE,OAAO,CAAO,CAAC,CAAC,CAAC,IAAI,CACrF,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import React, { useState, useRef } from \"react\";\r\nimport \"../../assets/css/button.css\";\r\nimport { useOutsideClickDetector } from \"../../hooks/useOutsideClickDetector\";\r\nimport { IFinsembleButtonProps } from \"../shared/Button\";\r\n\r\nexport interface IFinsembleDropdownActionButtonProps {\r\n\tbuttonLabel: string;\r\n\tbuttonOptions: Array<IFinsembleButtonProps>;\r\n\tmainAction: Function;\r\n}\r\n\r\nconst DropdownButton: React.FunctionComponent<IFinsembleDropdownActionButtonProps> = ({\r\n\tbuttonLabel = \"Label\",\r\n\tbuttonOptions = [],\r\n\tmainAction,\r\n}: IFinsembleDropdownActionButtonProps) => {\r\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\r\n\tconst [expanded, setExpanded] = useState(false);\r\n\r\n\tuseOutsideClickDetector(wrapperRef, () => setExpanded(false));\r\n\r\n\tconst options = buttonOptions.map((option, index) => (\r\n\t\t<div\r\n\t\t\tkey={index}\r\n\t\t\tclassName=\"finsemble-dropdown-action__btn-option\"\r\n\t\t\tonClick={() => {\r\n\t\t\t\toption.clickHandler();\r\n\t\t\t\tsetExpanded(false);\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t{option.buttonLabel}\r\n\t\t</div>\r\n\t));\r\n\r\n\tconst buttonAction = () => {\r\n\t\tif (expanded) {\r\n\t\t\tsetExpanded(false);\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (mainAction) {\r\n\t\t\tmainAction();\r\n\t\t} else {\r\n\t\t\t() => setExpanded(!expanded);\r\n\t\t}\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div ref={wrapperRef} className=\"finsemble-dropdown-action__btn-container\">\r\n\t\t\t<div className=\"finsemble-dropdown-action__btn\">\r\n\t\t\t\t<span className=\"btn-label\" onClick={buttonAction}>\r\n\t\t\t\t\t{buttonLabel}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span className=\"separator\"></span>\r\n\t\t\t\t<div className=\"expand-options\" onClick={() => setExpanded(!expanded)}>\r\n\t\t\t\t\t<span className=\"caret\"></span>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t{expanded ? <div className=\"finsemble-dropdown-action__btn-options\">{options}</div> : null}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default DropdownButton;\r\n"]}

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

@@ -4,11 +4,6 @@
  */
 /// <reference types="react" />
 import "./css/file-input.css";
-declare global {
-    interface Window {
-        File: object;
-    }
-}
 export declare type FileInputUploadCb = (fileObject: File, cb?: (progress: number) => void) => Promise<{
     err: string | null;
     path: string;

package/react/components/common/FileInput.js

@@ -36,7 +36,7 @@ export const FileInput = ({ acceptTypes, value, onSetValue, id, shouldUpload = t
             dispatch(SmartDesktopDesignerActions.delete_project_error(INVALID_FILE_TYPE_ERROR));
             setErrorMessage(null);
             setPath(successPath);
-            onSetValue?.(successPath);
+            onSetValue === null || onSetValue === void 0 ? void 0 : onSetValue(successPath);
             fileInput.value = "";
         }
     };
@@ -48,12 +48,9 @@ export const FileInput = ({ acceptTypes, value, onSetValue, id, shouldUpload = t
             return;
         }
         setIsUploading(true);
-        uploadFunction?.(fileObj, (progress) => {
+        uploadFunction === null || uploadFunction === void 0 ? void 0 : uploadFunction(fileObj, (progress) => {
             setUploadProgress(progress);
-        })
-            .then(uploadSuccess)
-            .catch(uploadError)
-            .finally(() => {
+        }).then(uploadSuccess).catch(uploadError).finally(() => {
             setIsUploading(false);
             setUploadProgress(0);
         });
@@ -62,7 +59,7 @@ export const FileInput = ({ acceptTypes, value, onSetValue, id, shouldUpload = t
         if (shouldUpload) {
             uploadFile(fileObj);
         }
-        else if (fileObj?.path) {
+        else if (fileObj === null || fileObj === void 0 ? void 0 : fileObj.path) {
             uploadSuccess({
                 err: null,
                 path: fileObj.path,
@@ -76,7 +73,8 @@ export const FileInput = ({ acceptTypes, value, onSetValue, id, shouldUpload = t
         setPath(value || "");
     }, [value]);
     const onFileChange = (e) => {
-        const fileObj = e.target.files?.[0];
+        var _a;
+        const fileObj = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
         if (fileObj !== undefined) {
             processFile(fileObj);
         }
@@ -96,7 +94,7 @@ export const FileInput = ({ acceptTypes, value, onSetValue, id, shouldUpload = t
                         fileInputElement.current.click();
                     } })),
             React.createElement("div", { className: "file-input-value" },
-                React.createElement("input", { className: "file-input-value-input", type: "text", disabled: true, value: path, "aria-invalid": isInvalid, ...{ id } }),
+                React.createElement("input", Object.assign({ className: "file-input-value-input", type: "text", disabled: true, value: path, "aria-invalid": isInvalid }, { id })),
                 errorMessage && React.createElement("div", { className: "file-input-error" }, errorMessage)),
             React.createElement("div", { className: "file-input-status" }, isUploading ? (React.createElement("div", { className: "file-input-progress-container" },
                 uploadProgress,

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

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/common/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\r\n * Copyright 2017 - 2020 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport React, { useState, useRef, useEffect } from \"react\";\r\nimport { SmartDesktopDesignerActions } from \"../../actions/smartDesktopDesignerActions\";\r\nimport { useDispatch } from \"../../store\";\r\nimport { ProjectError } from \"../../types/smartDesktopDesignerTypes\";\r\n\r\nimport { Button } from \"./Button\";\r\nimport \"./css/file-input.css\";\r\n\r\nimport { DropZone, FileWithPath } from \"./DropZone\";\r\nimport { validateFilename } from \"./file_helpers\";\r\n\r\ndeclare global {\r\n\tinterface Window {\r\n\t\tFile: object;\r\n\t}\r\n}\r\n\r\nexport type FileInputUploadCb = (\r\n\tfileObject: File,\r\n\tcb?: (progress: number) => void\r\n) => Promise<{ err: string | null; path: string }>;\r\n\r\nexport type FileInputProps = {\r\n\tacceptTypes: string[];\r\n\tvalue: string;\r\n\tid?: string;\r\n\tshouldUpload?: boolean;\r\n\tonSetValue?: (value: string) => void;\r\n\tuploadFunction?: FileInputUploadCb;\r\n\tpresetFile?: null | File;\r\n\tsuppressDropzone?: boolean;\r\n};\r\n\r\nconst INVALID_FILE_TYPE_ERROR: ProjectError = {\r\n\tviewId: \"themes\",\r\n\tmessage: \"Your uploaded file is not in the correct format\",\r\n};\r\n\r\nconst defaultUploadFunction = async () => {\r\n\treturn { err: null, path: \"\" };\r\n};\r\n\r\n/**\r\n * A Browse button with a hidden file input to allow for a file select dialog and extraction of a path\r\n *\r\n * @param {FileInputProps} { acceptTypes, value, onSetValue, shouldUpload=true, uploadFunction = defaultUploadFunction}\r\n * @return {*}\r\n */\r\nexport const FileInput = ({\r\n\tacceptTypes,\r\n\tvalue,\r\n\tonSetValue,\r\n\tid,\r\n\tshouldUpload = true,\r\n\tuploadFunction = defaultUploadFunction,\r\n\tpresetFile = null,\r\n\tsuppressDropzone = false,\r\n}: FileInputProps) => {\r\n\tconst dispatch = useDispatch();\r\n\tconst fileInputElement = useRef({} as HTMLInputElement);\r\n\tconst [isUploading, setIsUploading] = useState(false);\r\n\tconst [uploadProgress, setUploadProgress] = useState(0);\r\n\tconst [fileInput, setFileInput] = useState({} as HTMLInputElement); // cast to correct type so typescript doesn't complain\r\n\tconst [path, setPath] = useState(value || \"\");\r\n\tconst [errorMessage, setErrorMessage] = useState(null as string | null);\r\n\tconst [handedFile, setHandedFile] = useState<FileWithPath | null>(presetFile);\r\n\r\n\tconst isInvalid = validateFilename(acceptTypes, path);\r\n\r\n\tconst uploadSuccess = ({ err, path: successPath }: { err: string | null; path: string }) => {\r\n\t\tif (err) {\r\n\t\t\tdispatch(SmartDesktopDesignerActions.set_project_error(INVALID_FILE_TYPE_ERROR));\r\n\r\n\t\t\tsetErrorMessage(err);\r\n\t\t\tsetPath(\"\");\r\n\t\t} else {\r\n\t\t\tdispatch(SmartDesktopDesignerActions.delete_project_error(INVALID_FILE_TYPE_ERROR));\r\n\t\t\tsetErrorMessage(null);\r\n\t\t\tsetPath(successPath);\r\n\r\n\t\t\tonSetValue?.(successPath);\r\n\r\n\t\t\tfileInput.value = \"\";\r\n\t\t}\r\n\t};\r\n\r\n\tconst uploadError = (err: string) => {\r\n\t\tsetErrorMessage(err);\r\n\t};\r\n\r\n\tconst uploadFile = (fileObj: FileWithPath | undefined) => {\r\n\t\t// If it's not a file, we can't do anything with it\r\n\t\tif (!(fileObj instanceof File)) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tsetIsUploading(true);\r\n\t\tuploadFunction?.(fileObj, (progress: number) => {\r\n\t\t\tsetUploadProgress(progress);\r\n\t\t})\r\n\t\t\t.then(uploadSuccess)\r\n\t\t\t.catch(uploadError)\r\n\t\t\t.finally(() => {\r\n\t\t\t\tsetIsUploading(false);\r\n\t\t\t\tsetUploadProgress(0);\r\n\t\t\t});\r\n\t};\r\n\r\n\tconst processFile = (fileObj: FileWithPath) => {\r\n\t\tif (shouldUpload) {\r\n\t\t\tuploadFile(fileObj);\r\n\t\t} else if (fileObj?.path) {\r\n\t\t\t// If the consumer doesn't want the file actually uploaded, just return the file name\r\n\t\t\tuploadSuccess({\r\n\t\t\t\terr: null,\r\n\t\t\t\tpath: fileObj.path,\r\n\t\t\t});\r\n\t\t}\r\n\t\tsetIsUploading(false);\r\n\t\tsetUploadProgress(0);\r\n\t\tsetErrorMessage(null);\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tsetPath(value || \"\");\r\n\t}, [value]);\r\n\r\n\tconst onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n\t\tconst fileObj = e.target.files?.[0] as FileWithPath | undefined;\r\n\r\n\t\tif (fileObj !== undefined) {\r\n\t\t\tprocessFile(fileObj);\r\n\t\t}\r\n\r\n\t\tsetFileInput(e.target);\r\n\t};\r\n\r\n\t// Check if props updated\r\n\tif (handedFile !== presetFile) {\r\n\t\tsetHandedFile(presetFile);\r\n\t\tif (presetFile !== null) {\r\n\t\t\tuploadFile(presetFile);\r\n\t\t}\r\n\t}\r\n\r\n\treturn (\r\n\t\t<DropZone processFile={processFile} suppress={suppressDropzone}>\r\n\t\t\t<div className=\"file-input-container\">\r\n\t\t\t\t<div className=\"file-input-actions\">\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\tref={fileInputElement}\r\n\t\t\t\t\t\ttype=\"file\"\r\n\t\t\t\t\t\tonChange={onFileChange}\r\n\t\t\t\t\t\taccept={acceptTypes.join(\", \")}\r\n\t\t\t\t\t\ttabIndex={-1}\r\n\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<Button\r\n\t\t\t\t\t\tfashion=\"primary\"\r\n\t\t\t\t\t\ttext=\"Browse\"\r\n\t\t\t\t\t\tonClick={() => {\r\n\t\t\t\t\t\t\tfileInputElement.current.click();\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"file-input-value\">\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\tclassName=\"file-input-value-input\"\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tdisabled\r\n\t\t\t\t\t\tvalue={path}\r\n\t\t\t\t\t\taria-invalid={isInvalid}\r\n\t\t\t\t\t\t{...{ id }}\r\n\t\t\t\t\t></input>\r\n\t\t\t\t\t{errorMessage && <div className=\"file-input-error\">{errorMessage}</div>}\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"file-input-status\">\r\n\t\t\t\t\t{isUploading ? (\r\n\t\t\t\t\t\t<div className=\"file-input-progress-container\">{uploadProgress}% uploaded</div>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t!errorMessage && <></>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</DropZone>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/common/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\r\n * Copyright 2017 - 2020 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport React, { useState, useRef, useEffect } from \"react\";\r\nimport { SmartDesktopDesignerActions } from \"../../actions/smartDesktopDesignerActions\";\r\nimport { useDispatch } from \"../../store\";\r\nimport { ProjectError } from \"../../types/smartDesktopDesignerTypes\";\r\n\r\nimport { Button } from \"./Button\";\r\nimport \"./css/file-input.css\";\r\n\r\nimport { DropZone, FileWithPath } from \"./DropZone\";\r\nimport { validateFilename } from \"./file_helpers\";\r\n\r\nexport type FileInputUploadCb = (\r\n\tfileObject: File,\r\n\tcb?: (progress: number) => void\r\n) => Promise<{ err: string | null; path: string }>;\r\n\r\nexport type FileInputProps = {\r\n\tacceptTypes: string[];\r\n\tvalue: string;\r\n\tid?: string;\r\n\tshouldUpload?: boolean;\r\n\tonSetValue?: (value: string) => void;\r\n\tuploadFunction?: FileInputUploadCb;\r\n\tpresetFile?: null | File;\r\n\tsuppressDropzone?: boolean;\r\n};\r\n\r\nconst INVALID_FILE_TYPE_ERROR: ProjectError = {\r\n\tviewId: \"themes\",\r\n\tmessage: \"Your uploaded file is not in the correct format\",\r\n};\r\n\r\nconst defaultUploadFunction = async () => {\r\n\treturn { err: null, path: \"\" };\r\n};\r\n\r\n/**\r\n * A Browse button with a hidden file input to allow for a file select dialog and extraction of a path\r\n *\r\n * @param {FileInputProps} { acceptTypes, value, onSetValue, shouldUpload=true, uploadFunction = defaultUploadFunction}\r\n * @return {*}\r\n */\r\nexport const FileInput = ({\r\n\tacceptTypes,\r\n\tvalue,\r\n\tonSetValue,\r\n\tid,\r\n\tshouldUpload = true,\r\n\tuploadFunction = defaultUploadFunction,\r\n\tpresetFile = null,\r\n\tsuppressDropzone = false,\r\n}: FileInputProps) => {\r\n\tconst dispatch = useDispatch();\r\n\tconst fileInputElement = useRef({} as HTMLInputElement);\r\n\tconst [isUploading, setIsUploading] = useState(false);\r\n\tconst [uploadProgress, setUploadProgress] = useState(0);\r\n\tconst [fileInput, setFileInput] = useState({} as HTMLInputElement); // cast to correct type so typescript doesn't complain\r\n\tconst [path, setPath] = useState(value || \"\");\r\n\tconst [errorMessage, setErrorMessage] = useState(null as string | null);\r\n\tconst [handedFile, setHandedFile] = useState<FileWithPath | null>(presetFile);\r\n\r\n\tconst isInvalid = validateFilename(acceptTypes, path);\r\n\r\n\tconst uploadSuccess = ({ err, path: successPath }: { err: string | null; path: string }) => {\r\n\t\tif (err) {\r\n\t\t\tdispatch(SmartDesktopDesignerActions.set_project_error(INVALID_FILE_TYPE_ERROR));\r\n\r\n\t\t\tsetErrorMessage(err);\r\n\t\t\tsetPath(\"\");\r\n\t\t} else {\r\n\t\t\tdispatch(SmartDesktopDesignerActions.delete_project_error(INVALID_FILE_TYPE_ERROR));\r\n\t\t\tsetErrorMessage(null);\r\n\t\t\tsetPath(successPath);\r\n\r\n\t\t\tonSetValue?.(successPath);\r\n\r\n\t\t\tfileInput.value = \"\";\r\n\t\t}\r\n\t};\r\n\r\n\tconst uploadError = (err: string) => {\r\n\t\tsetErrorMessage(err);\r\n\t};\r\n\r\n\tconst uploadFile = (fileObj: FileWithPath | undefined) => {\r\n\t\t// If it's not a file, we can't do anything with it\r\n\t\tif (!(fileObj instanceof File)) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tsetIsUploading(true);\r\n\t\tuploadFunction?.(fileObj, (progress: number) => {\r\n\t\t\tsetUploadProgress(progress);\r\n\t\t})\r\n\t\t\t.then(uploadSuccess)\r\n\t\t\t.catch(uploadError)\r\n\t\t\t.finally(() => {\r\n\t\t\t\tsetIsUploading(false);\r\n\t\t\t\tsetUploadProgress(0);\r\n\t\t\t});\r\n\t};\r\n\r\n\tconst processFile = (fileObj: FileWithPath) => {\r\n\t\tif (shouldUpload) {\r\n\t\t\tuploadFile(fileObj);\r\n\t\t} else if (fileObj?.path) {\r\n\t\t\t// If the consumer doesn't want the file actually uploaded, just return the file name\r\n\t\t\tuploadSuccess({\r\n\t\t\t\terr: null,\r\n\t\t\t\tpath: fileObj.path,\r\n\t\t\t});\r\n\t\t}\r\n\t\tsetIsUploading(false);\r\n\t\tsetUploadProgress(0);\r\n\t\tsetErrorMessage(null);\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tsetPath(value || \"\");\r\n\t}, [value]);\r\n\r\n\tconst onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n\t\tconst fileObj = e.target.files?.[0] as FileWithPath | undefined;\r\n\r\n\t\tif (fileObj !== undefined) {\r\n\t\t\tprocessFile(fileObj);\r\n\t\t}\r\n\r\n\t\tsetFileInput(e.target);\r\n\t};\r\n\r\n\t// Check if props updated\r\n\tif (handedFile !== presetFile) {\r\n\t\tsetHandedFile(presetFile);\r\n\t\tif (presetFile !== null) {\r\n\t\t\tuploadFile(presetFile);\r\n\t\t}\r\n\t}\r\n\r\n\treturn (\r\n\t\t<DropZone processFile={processFile} suppress={suppressDropzone}>\r\n\t\t\t<div className=\"file-input-container\">\r\n\t\t\t\t<div className=\"file-input-actions\">\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\tref={fileInputElement}\r\n\t\t\t\t\t\ttype=\"file\"\r\n\t\t\t\t\t\tonChange={onFileChange}\r\n\t\t\t\t\t\taccept={acceptTypes.join(\", \")}\r\n\t\t\t\t\t\ttabIndex={-1}\r\n\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<Button\r\n\t\t\t\t\t\tfashion=\"primary\"\r\n\t\t\t\t\t\ttext=\"Browse\"\r\n\t\t\t\t\t\tonClick={() => {\r\n\t\t\t\t\t\t\tfileInputElement.current.click();\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"file-input-value\">\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\tclassName=\"file-input-value-input\"\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tdisabled\r\n\t\t\t\t\t\tvalue={path}\r\n\t\t\t\t\t\taria-invalid={isInvalid}\r\n\t\t\t\t\t\t{...{ id }}\r\n\t\t\t\t\t></input>\r\n\t\t\t\t\t{errorMessage && <div className=\"file-input-error\">{errorMessage}</div>}\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"file-input-status\">\r\n\t\t\t\t\t{isUploading ? (\r\n\t\t\t\t\t\t<div className=\"file-input-progress-container\">{uploadProgress}% uploaded</div>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t!errorMessage && <></>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</DropZone>\r\n\t);\r\n};\r\n"]}

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

@@ -1,8 +1,8 @@
 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 FinsembleIconType = "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;
+    icon: FinsembleIconType;
     className?: string;
     onClick?: (e: React.MouseEvent) => void;
 };

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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,cAAc,IAAI,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACxF,OAAO,EAAE,cAAc,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,EAAE,cAAc,IAAI,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AACrG,OAAO,EAAE,cAAc,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,EAAE,cAAc,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC7E,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,cAAc,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,EAAE,cAAc,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,EAAE,cAAc,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,EAAE,cAAc,IAAI,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACxF,OAAO,EAAE,cAAc,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC7E,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC9F,OAAO,EAAE,cAAc,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC7E,OAAO,EAAE,cAAc,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,cAAc,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,cAAc,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC7E,OAAO,EAAE,cAAc,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAsC7E,MAAM,KAAK,GAAmB;IAC7B,KAAK,EAAE,SAAS;IAChB,cAAc,EAAE,WAAW;IAC3B,cAAc,EAAE,eAAe;IAC/B,eAAe,EAAE,gBAAgB;IACjC,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,sBAAsB;IAC5C,eAAe,EAAE,gBAAgB;IACjC,IAAI,EAAE,QAAQ;IACd,MAAM,EAAE,UAAU;IAClB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,SAAS;IAChB,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,WAAW,EAAE,YAAY;IACzB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,QAAQ;IACd,cAAc,EAAE,eAAe;IAC/B,MAAM,EAAE,UAAU;IAClB,IAAI,EAAE,QAAQ;IACd,iBAAiB,EAAE,kBAAkB;IACrC,MAAM,EAAE,UAAU;IAClB,GAAG,EAAE,OAAO;IACZ,KAAK,EAAE,SAAS;IAChB,YAAY,EAAE,aAAa;IAC3B,WAAW,EAAE,YAAY;IACzB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE,UAAU;CAClB,CAAC;AAQF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IAC1D,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAE/B,OAAO,CACN,8BACC,SAAS,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,KAAK,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC9F,IAAI,EAAC,KAAK,gBACE,GAAG,KAAK,CAAC,IAAI,OAAO,EAChC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAEhD,IAAI,IAAI,oBAAC,IAAI,OAAQ,CAChB,CACP,CAAC;AACH,CAAC,CAAC","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 FinsembleIconType =\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 FinsembleIconType]: 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: FinsembleIconType;\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] };
     });
@@ -34,10 +34,7 @@ export const FinsembleSelect = ({ options, updateCallback, selected = [], size,
         setDisplayOptions(mappedOptions
             .filter((optionMap) => optionMap.option.toUpperCase().includes(searchString.toUpperCase()))
             .map((combination) => {
-            return {
-                ...combination,
-                option: combination.option.replace(new RegExp(`(${searchString})`, "i"), `<span class="highlight">$1</span>`),
-            };
+            return Object.assign(Object.assign({}, combination), { option: combination.option.replace(new RegExp(`(${searchString})`, "i"), `<span class="highlight">$1</span>`) });
         }));
     };
     return (React.createElement(React.Fragment, null,
@@ -56,6 +53,6 @@ export const FinsembleSelect = ({ options, updateCallback, selected = [], size,
                                 doSetSelectedOptions(selectedOptions.concat([value]));
                             }
                         } }),
-                    React.createElement("span", { dangerouslySetInnerHTML: { __html: option } })))))))));
+                    (optionComponents === null || optionComponents === void 0 ? void 0 : optionComponents[index]) ? (optionComponents === null || optionComponents === void 0 ? void 0 : 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, { 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/FinsembleToggle.js

@@ -12,8 +12,8 @@ export const FinsembleToggle = ({ checked, onChange, label }) => {
     }, [checked]);
     return (React.createElement("span", { className: ["finsembleToggle", selected ? "finsembleToggle-on" : "finsembleToggle-off"].join(" ") },
         React.createElement(FinsembleIcon, { className: "finsembleToggle-icon", icon: selected ? "toggle-on" : "toggle-off" }),
-        React.createElement("input", { type: "checkbox", tabIndex: -1, onChange: (e) => {
+        React.createElement("input", Object.assign({ type: "checkbox", onChange: (e) => {
                 doSetSelected(e.target.checked);
-            }, checked: selected, ...(label ? { "aria-label": label } : "") })));
+            }, checked: selected }, (label ? { "aria-label": label } : "")))));
 };
 //# sourceMappingURL=FinsembleToggle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleToggle.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAQhD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAwB,EAAE,EAAE;IACrF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAElD,SAAS,aAAa,CAAC,QAAiB;QACvC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,WAAW,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACd,WAAW,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACN,8BAAM,SAAS,EAAE,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACtG,oBAAC,aAAa,IAAC,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,GAAkB;QAC7G,+BACC,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACjC,CAAC,EACD,OAAO,EAAE,QAAQ,KACb,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACzC,CACI,CACP,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useEffect, useState } from \"react\";\r\nimport \"./css/toggle.css\";\r\nimport { FinsembleIcon } from \"./FinsembleIcon\";\r\n\r\nexport interface FinsembleToggleProps {\r\n\tlabel?: string;\r\n\tchecked: boolean;\r\n\tonChange: (selected: boolean) => void;\r\n}\r\n\r\nexport const FinsembleToggle = ({ checked, onChange, label }: FinsembleToggleProps) => {\r\n\tconst [selected, setSelected] = useState(checked);\r\n\r\n\tfunction doSetSelected(newValue: boolean) {\r\n\t\tonChange(newValue);\r\n\t\tsetSelected(newValue);\r\n\t}\r\n\r\n\tuseEffect(() => {\r\n\t\tsetSelected(checked);\r\n\t}, [checked]);\r\n\r\n\treturn (\r\n\t\t<span className={[\"finsembleToggle\", selected ? \"finsembleToggle-on\" : \"finsembleToggle-off\"].join(\" \")}>\r\n\t\t\t<FinsembleIcon className=\"finsembleToggle-icon\" icon={selected ? \"toggle-on\" : \"toggle-off\"}></FinsembleIcon>\r\n\t\t\t<input\r\n\t\t\t\ttype=\"checkbox\"\r\n\t\t\t\ttabIndex={-1}\r\n\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\tdoSetSelected(e.target.checked);\r\n\t\t\t\t}}\r\n\t\t\t\tchecked={selected}\r\n\t\t\t\t{...(label ? { \"aria-label\": label } : \"\")}\r\n\t\t\t/>\r\n\t\t</span>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"FinsembleToggle.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAQhD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAwB,EAAE,EAAE;IACrF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAElD,SAAS,aAAa,CAAC,QAAiB;QACvC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,WAAW,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACd,WAAW,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACN,8BAAM,SAAS,EAAE,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACtG,oBAAC,aAAa,IAAC,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,GAAkB;QAC7G,6CACC,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACjC,CAAC,EACD,OAAO,EAAE,QAAQ,IACb,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACzC,CACI,CACP,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useEffect, useState } from \"react\";\r\nimport \"./css/toggle.css\";\r\nimport { FinsembleIcon } from \"./FinsembleIcon\";\r\n\r\nexport interface FinsembleToggleProps {\r\n\tlabel?: string;\r\n\tchecked: boolean;\r\n\tonChange: (selected: boolean) => void;\r\n}\r\n\r\nexport const FinsembleToggle = ({ checked, onChange, label }: FinsembleToggleProps) => {\r\n\tconst [selected, setSelected] = useState(checked);\r\n\r\n\tfunction doSetSelected(newValue: boolean) {\r\n\t\tonChange(newValue);\r\n\t\tsetSelected(newValue);\r\n\t}\r\n\r\n\tuseEffect(() => {\r\n\t\tsetSelected(checked);\r\n\t}, [checked]);\r\n\r\n\treturn (\r\n\t\t<span className={[\"finsembleToggle\", selected ? \"finsembleToggle-on\" : \"finsembleToggle-off\"].join(\" \")}>\r\n\t\t\t<FinsembleIcon className=\"finsembleToggle-icon\" icon={selected ? \"toggle-on\" : \"toggle-off\"}></FinsembleIcon>\r\n\t\t\t<input\r\n\t\t\t\ttype=\"checkbox\"\r\n\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\tdoSetSelected(e.target.checked);\r\n\t\t\t\t}}\r\n\t\t\t\tchecked={selected}\r\n\t\t\t\t{...(label ? { \"aria-label\": label } : \"\")}\r\n\t\t\t/>\r\n\t\t</span>\r\n\t);\r\n};\r\n"]}

package/react/components/common/FontSizeSelector.js

@@ -34,9 +34,9 @@ const FONT_SIZE_LIST = [
 export const FontSize = ({ id, startSize, updateSize }) => {
     const [size, setSize] = useState(startSize);
     return (React.createElement("div", { className: "font-size-picker" },
-        React.createElement("select", { ...{ id }, value: size, onChange: (e) => {
+        React.createElement("select", Object.assign({}, { id }, { value: size, onChange: (e) => {
                 setSize(e.target.value);
                 updateSize(e.target.value);
-            } }, FONT_SIZE_LIST.map((font_size) => (React.createElement("option", { key: font_size }, font_size))))));
+            } }), FONT_SIZE_LIST.map((font_size) => (React.createElement("option", { key: font_size }, font_size))))));
 };
 //# sourceMappingURL=FontSizeSelector.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FontSizeSelector.js","sourceRoot":"","sources":["../../../src/components/common/FontSizeSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,cAAc,GAAG;IACtB,UAAU;IACV,SAAS;IACT,OAAO;IACP,QAAQ;IACR,OAAO;IACP,SAAS;IACT,UAAU;IACV,WAAW;IACX,SAAS;IACT,QAAQ;IACR,KAAK;IACL,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,KAAK;IACL,MAAM;IACN,MAAM;IACN,MAAM;IACN,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,KAAK;IACL,KAAK;IACL,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,OAAO;CACP,CAAC;AAaF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAiB,EAAE,EAAE;IACxE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAE5C,OAAO,CACN,6BAAK,SAAS,EAAC,kBAAkB;QAChC,mCACK,EAAE,EAAE,EAAE,EACV,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE;gBAC/C,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACxB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC,IAEA,cAAc,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAClC,gCAAQ,GAAG,EAAE,SAAS,IAAG,SAAS,CAAU,CAC5C,CAAC,CACM,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { ChangeEvent, useState } from \"react\";\r\n\r\nconst FONT_SIZE_LIST = [\r\n\t\"xx-small\",\r\n\t\"x-small\",\r\n\t\"small\",\r\n\t\"medium\",\r\n\t\"large\",\r\n\t\"x-large\",\r\n\t\"xx-large\",\r\n\t\"xxx-large\",\r\n\t\"smaller\",\r\n\t\"larger\",\r\n\t\"8px\",\r\n\t\"10px\",\r\n\t\"12px\",\r\n\t\"14px\",\r\n\t\"16px\",\r\n\t\"8pt\",\r\n\t\"10pt\",\r\n\t\"12pt\",\r\n\t\"14pt\",\r\n\t\"0.6em\",\r\n\t\"0.8em\",\r\n\t\"1.2em\",\r\n\t\"1.4em\",\r\n\t\"60%\",\r\n\t\"80%\",\r\n\t\"120%\",\r\n\t\"140%\",\r\n\t\"inherit\",\r\n\t\"initial\",\r\n\t\"unset\",\r\n];\r\n\r\nexport interface FontSizeProps {\r\n\tid?: string;\r\n\tstartSize: string;\r\n\tupdateSize: (newSize: string) => void;\r\n}\r\n\r\n/**\r\n * FontSize component to update theme variables.  Text input that validates against browser.\r\n *\r\n * @param {{ id?: string; startSize: string; updateSize: (newSize: string) => void }} { startSize, updateSize }\r\n */\r\nexport const FontSize = ({ id, startSize, updateSize }: FontSizeProps) => {\r\n\tconst [size, setSize] = useState(startSize);\r\n\r\n\treturn (\r\n\t\t<div className=\"font-size-picker\">\r\n\t\t\t<select\r\n\t\t\t\t{...{ id }}\r\n\t\t\t\tvalue={size}\r\n\t\t\t\tonChange={(e: ChangeEvent<HTMLSelectElement>) => {\r\n\t\t\t\t\tsetSize(e.target.value);\r\n\t\t\t\t\tupdateSize(e.target.value);\r\n\t\t\t\t}}\r\n\t\t\t>\r\n\t\t\t\t{FONT_SIZE_LIST.map((font_size) => (\r\n\t\t\t\t\t<option key={font_size}>{font_size}</option>\r\n\t\t\t\t))}\r\n\t\t\t</select>\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"FontSizeSelector.js","sourceRoot":"","sources":["../../../src/components/common/FontSizeSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,cAAc,GAAG;IACtB,UAAU;IACV,SAAS;IACT,OAAO;IACP,QAAQ;IACR,OAAO;IACP,SAAS;IACT,UAAU;IACV,WAAW;IACX,SAAS;IACT,QAAQ;IACR,KAAK;IACL,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,KAAK;IACL,MAAM;IACN,MAAM;IACN,MAAM;IACN,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,KAAK;IACL,KAAK;IACL,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,OAAO;CACP,CAAC;AAaF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAiB,EAAE,EAAE;IACxE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAE5C,OAAO,CACN,6BAAK,SAAS,EAAC,kBAAkB;QAChC,gDACK,EAAE,EAAE,EAAE,IACV,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE;gBAC/C,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACxB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC,KAEA,cAAc,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAClC,gCAAQ,GAAG,EAAE,SAAS,IAAG,SAAS,CAAU,CAC5C,CAAC,CACM,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { ChangeEvent, useState } from \"react\";\r\n\r\nconst FONT_SIZE_LIST = [\r\n\t\"xx-small\",\r\n\t\"x-small\",\r\n\t\"small\",\r\n\t\"medium\",\r\n\t\"large\",\r\n\t\"x-large\",\r\n\t\"xx-large\",\r\n\t\"xxx-large\",\r\n\t\"smaller\",\r\n\t\"larger\",\r\n\t\"8px\",\r\n\t\"10px\",\r\n\t\"12px\",\r\n\t\"14px\",\r\n\t\"16px\",\r\n\t\"8pt\",\r\n\t\"10pt\",\r\n\t\"12pt\",\r\n\t\"14pt\",\r\n\t\"0.6em\",\r\n\t\"0.8em\",\r\n\t\"1.2em\",\r\n\t\"1.4em\",\r\n\t\"60%\",\r\n\t\"80%\",\r\n\t\"120%\",\r\n\t\"140%\",\r\n\t\"inherit\",\r\n\t\"initial\",\r\n\t\"unset\",\r\n];\r\n\r\nexport interface FontSizeProps {\r\n\tid?: string;\r\n\tstartSize: string;\r\n\tupdateSize: (newSize: string) => void;\r\n}\r\n\r\n/**\r\n * FontSize component to update theme variables.  Text input that validates against browser.\r\n *\r\n * @param {{ id?: string; startSize: string; updateSize: (newSize: string) => void }} { startSize, updateSize }\r\n */\r\nexport const FontSize = ({ id, startSize, updateSize }: FontSizeProps) => {\r\n\tconst [size, setSize] = useState(startSize);\r\n\r\n\treturn (\r\n\t\t<div className=\"font-size-picker\">\r\n\t\t\t<select\r\n\t\t\t\t{...{ id }}\r\n\t\t\t\tvalue={size}\r\n\t\t\t\tonChange={(e: ChangeEvent<HTMLSelectElement>) => {\r\n\t\t\t\t\tsetSize(e.target.value);\r\n\t\t\t\t\tupdateSize(e.target.value);\r\n\t\t\t\t}}\r\n\t\t\t>\r\n\t\t\t\t{FONT_SIZE_LIST.map((font_size) => (\r\n\t\t\t\t\t<option key={font_size}>{font_size}</option>\r\n\t\t\t\t))}\r\n\t\t\t</select>\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}

package/react/components/common/ImagePreview.js

@@ -33,10 +33,10 @@ export const ImagePreview = (props) => {
             setDroppedFile(file);
         } },
         React.createElement("div", { className: ["image-preview-container", `image-preview-size-${previewSize}`].join(" ") },
-            React.createElement(FileInput, { value: imagePath, uploadFunction: props.uploadFunction, onSetValue: (value) => {
+            React.createElement(FileInput, Object.assign({ value: imagePath, uploadFunction: props.uploadFunction, onSetValue: (value) => {
                     setImagePath(value);
                     setCacheIndex(++globalCacheIndex);
-                }, acceptTypes: props.acceptTypes, presetFile: droppedFile, suppressDropzone: true, ...(props.id ? { id: props.id } : {}) }),
+                }, acceptTypes: props.acceptTypes, presetFile: droppedFile, suppressDropzone: true }, (props.id ? { id: props.id } : {}))),
             !imagePath ? (React.createElement("div", { className: "empty-preview" })) : (React.createElement("div", { className: "filled-preview" },
                 React.createElement("img", { src: `${props.baseURL}/${imagePath}?${cacheIndex}` }))))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../../src/components/common/ImagePreview.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAqB,MAAM,aAAa,CAAC;AAC3D,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAgB,MAAM,YAAY,CAAC;AAEpD,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC3B,mCAAe,CAAA;IACf,mCAAe,CAAA;AAChB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B;AAYD,IAAI,gBAAgB,GAAG,CAAC,CAAC;AAEzB,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,OAAe,EAAE,EAAE,CACnD,IAAI;KACF,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;KACtC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC;KACvB,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAEtB,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACxD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,gBAAgB,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,gBAAgB,CAAC,KAAK,CAAC;IAChE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAsB,IAAI,CAAC,CAAC;IAE1E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAElF,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,KAAK,CAAC,UAAU,EAAE;YACrB,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;SAC5B;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,SAAS,CAAC,GAAG,EAAE;QACd,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACN,oBAAC,QAAQ,IACR,WAAW,EAAE,CAAC,IAAU,EAAE,EAAE;YAC3B,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;QAED,6BAAK,SAAS,EAAE,CAAC,yBAAyB,EAAE,sBAAsB,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YACzF,oBAAC,SAAS,IACT,KAAK,EAAE,SAAS,EAChB,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,UAAU,EAAE,CAAC,KAAa,EAAE,EAAE;oBAC7B,YAAY,CAAC,KAAK,CAAC,CAAC;oBACpB,aAAa,CAAC,EAAE,gBAAgB,CAAC,CAAC;gBACnC,CAAC,EACD,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,UAAU,EAAE,WAAW,EACvB,gBAAgB,EAAE,IAAI,KAClB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAC1B;YAEZ,CAAC,SAAS,CAAC,CAAC,CAAC,CACb,6BAAK,SAAS,EAAC,eAAe,GAAO,CACrC,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAC,gBAAgB;gBAC9B,6BAAK,GAAG,EAAE,GAAG,KAAK,CAAC,OAAO,IAAI,SAAS,IAAI,UAAU,EAAE,GAAI,CACtD,CACN,CACI,CACI,CACX,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, useEffect } from \"react\";\r\n\r\nimport { FileInput, FileInputUploadCb } from \"./FileInput\";\r\nimport \"./css/image-preview.css\";\r\nimport { DropZone, FileWithPath } from \"./DropZone\";\r\n\r\nexport enum ImagePreviewSize {\r\n\tSMALL = \"small\",\r\n\tLARGE = \"large\",\r\n}\r\n\r\nexport type ImagePreviewProps = {\r\n\tid?: string;\r\n\tvalue: string;\r\n\tbaseURL: string;\r\n\tonSetValue?: (value: string) => void;\r\n\tuploadFunction: FileInputUploadCb;\r\n\tacceptTypes: string[];\r\n\tpreviewSize?: ImagePreviewSize;\r\n};\r\n\r\nlet globalCacheIndex = 0;\r\n\r\nconst cleanPath = (path: string, baseURL: string) =>\r\n\tpath\r\n\t\t.replace(new RegExp(`^${baseURL}`), \"\")\r\n\t\t.replace(/\\/{1,}/g, \"/\")\r\n\t\t.replace(/^\\//, \"\");\r\n\r\nexport const ImagePreview = (props: ImagePreviewProps) => {\r\n\tconst [cacheIndex, setCacheIndex] = useState(++globalCacheIndex);\r\n\tconst previewSize = props.previewSize || ImagePreviewSize.SMALL;\r\n\tconst [droppedFile, setDroppedFile] = useState<FileWithPath | null>(null);\r\n\r\n\tconst [imagePath, setImagePath] = useState(cleanPath(props.value, props.baseURL));\r\n\r\n\tuseEffect(() => {\r\n\t\tif (props.onSetValue) {\r\n\t\t\tprops.onSetValue(imagePath);\r\n\t\t}\r\n\t}, [imagePath]);\r\n\r\n\tuseEffect(() => {\r\n\t\tsetImagePath(cleanPath(props.value, props.baseURL));\r\n\t}, [props]);\r\n\r\n\treturn (\r\n\t\t<DropZone\r\n\t\t\tprocessFile={(file: File) => {\r\n\t\t\t\tsetDroppedFile(file);\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t<div className={[\"image-preview-container\", `image-preview-size-${previewSize}`].join(\" \")}>\r\n\t\t\t\t<FileInput\r\n\t\t\t\t\tvalue={imagePath}\r\n\t\t\t\t\tuploadFunction={props.uploadFunction}\r\n\t\t\t\t\tonSetValue={(value: string) => {\r\n\t\t\t\t\t\tsetImagePath(value);\r\n\t\t\t\t\t\tsetCacheIndex(++globalCacheIndex);\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tacceptTypes={props.acceptTypes}\r\n\t\t\t\t\tpresetFile={droppedFile}\r\n\t\t\t\t\tsuppressDropzone={true}\r\n\t\t\t\t\t{...(props.id ? { id: props.id } : {})}\r\n\t\t\t\t></FileInput>\r\n\r\n\t\t\t\t{!imagePath ? (\r\n\t\t\t\t\t<div className=\"empty-preview\"></div>\r\n\t\t\t\t) : (\r\n\t\t\t\t\t<div className=\"filled-preview\">\r\n\t\t\t\t\t\t<img src={`${props.baseURL}/${imagePath}?${cacheIndex}`} />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t</div>\r\n\t\t</DropZone>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../../src/components/common/ImagePreview.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAqB,MAAM,aAAa,CAAC;AAC3D,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAgB,MAAM,YAAY,CAAC;AAEpD,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC3B,mCAAe,CAAA;IACf,mCAAe,CAAA;AAChB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B;AAYD,IAAI,gBAAgB,GAAG,CAAC,CAAC;AAEzB,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,OAAe,EAAE,EAAE,CACnD,IAAI;KACF,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;KACtC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC;KACvB,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAEtB,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACxD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,gBAAgB,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,gBAAgB,CAAC,KAAK,CAAC;IAChE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAsB,IAAI,CAAC,CAAC;IAE1E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAElF,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,KAAK,CAAC,UAAU,EAAE;YACrB,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;SAC5B;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,SAAS,CAAC,GAAG,EAAE;QACd,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACN,oBAAC,QAAQ,IACR,WAAW,EAAE,CAAC,IAAU,EAAE,EAAE;YAC3B,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;QAED,6BAAK,SAAS,EAAE,CAAC,yBAAyB,EAAE,sBAAsB,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YACzF,oBAAC,SAAS,kBACT,KAAK,EAAE,SAAS,EAChB,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,UAAU,EAAE,CAAC,KAAa,EAAE,EAAE;oBAC7B,YAAY,CAAC,KAAK,CAAC,CAAC;oBACpB,aAAa,CAAC,EAAE,gBAAgB,CAAC,CAAC;gBACnC,CAAC,EACD,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,UAAU,EAAE,WAAW,EACvB,gBAAgB,EAAE,IAAI,IAClB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC1B;YAEZ,CAAC,SAAS,CAAC,CAAC,CAAC,CACb,6BAAK,SAAS,EAAC,eAAe,GAAO,CACrC,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAC,gBAAgB;gBAC9B,6BAAK,GAAG,EAAE,GAAG,KAAK,CAAC,OAAO,IAAI,SAAS,IAAI,UAAU,EAAE,GAAI,CACtD,CACN,CACI,CACI,CACX,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, useEffect } from \"react\";\r\n\r\nimport { FileInput, FileInputUploadCb } from \"./FileInput\";\r\nimport \"./css/image-preview.css\";\r\nimport { DropZone, FileWithPath } from \"./DropZone\";\r\n\r\nexport enum ImagePreviewSize {\r\n\tSMALL = \"small\",\r\n\tLARGE = \"large\",\r\n}\r\n\r\nexport type ImagePreviewProps = {\r\n\tid?: string;\r\n\tvalue: string;\r\n\tbaseURL: string;\r\n\tonSetValue?: (value: string) => void;\r\n\tuploadFunction: FileInputUploadCb;\r\n\tacceptTypes: string[];\r\n\tpreviewSize?: ImagePreviewSize;\r\n};\r\n\r\nlet globalCacheIndex = 0;\r\n\r\nconst cleanPath = (path: string, baseURL: string) =>\r\n\tpath\r\n\t\t.replace(new RegExp(`^${baseURL}`), \"\")\r\n\t\t.replace(/\\/{1,}/g, \"/\")\r\n\t\t.replace(/^\\//, \"\");\r\n\r\nexport const ImagePreview = (props: ImagePreviewProps) => {\r\n\tconst [cacheIndex, setCacheIndex] = useState(++globalCacheIndex);\r\n\tconst previewSize = props.previewSize || ImagePreviewSize.SMALL;\r\n\tconst [droppedFile, setDroppedFile] = useState<FileWithPath | null>(null);\r\n\r\n\tconst [imagePath, setImagePath] = useState(cleanPath(props.value, props.baseURL));\r\n\r\n\tuseEffect(() => {\r\n\t\tif (props.onSetValue) {\r\n\t\t\tprops.onSetValue(imagePath);\r\n\t\t}\r\n\t}, [imagePath]);\r\n\r\n\tuseEffect(() => {\r\n\t\tsetImagePath(cleanPath(props.value, props.baseURL));\r\n\t}, [props]);\r\n\r\n\treturn (\r\n\t\t<DropZone\r\n\t\t\tprocessFile={(file: File) => {\r\n\t\t\t\tsetDroppedFile(file);\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t<div className={[\"image-preview-container\", `image-preview-size-${previewSize}`].join(\" \")}>\r\n\t\t\t\t<FileInput\r\n\t\t\t\t\tvalue={imagePath}\r\n\t\t\t\t\tuploadFunction={props.uploadFunction}\r\n\t\t\t\t\tonSetValue={(value: string) => {\r\n\t\t\t\t\t\tsetImagePath(value);\r\n\t\t\t\t\t\tsetCacheIndex(++globalCacheIndex);\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tacceptTypes={props.acceptTypes}\r\n\t\t\t\t\tpresetFile={droppedFile}\r\n\t\t\t\t\tsuppressDropzone={true}\r\n\t\t\t\t\t{...(props.id ? { id: props.id } : {})}\r\n\t\t\t\t></FileInput>\r\n\r\n\t\t\t\t{!imagePath ? (\r\n\t\t\t\t\t<div className=\"empty-preview\"></div>\r\n\t\t\t\t) : (\r\n\t\t\t\t\t<div className=\"filled-preview\">\r\n\t\t\t\t\t\t<img src={`${props.baseURL}/${imagePath}?${cacheIndex}`} />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t</div>\r\n\t\t</DropZone>\r\n\t);\r\n};\r\n"]}

package/react/components/common/Tab.js

@@ -8,8 +8,9 @@ export const Tab = ({ children, autofocus }) => {
     const [selectedTab, setSelectedTab] = useState(autofocus || 0);
     const ref = useRef(null);
     useLayoutEffect(() => {
+        var _a;
         if (ref.current !== null) {
-            ref.current.style.height = `${window.innerHeight - (ref.current.getBoundingClientRect()?.top || 0) - 10}px`;
+            ref.current.style.height = `${window.innerHeight - (((_a = ref.current.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.top) || 0) - 10}px`;
         }
     });
     return (React.createElement(React.Fragment, null,

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/common/Tab.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAmC,MAAM,OAAO,CAAC;AAClG,OAAO,eAAe,CAAC;AAOvB,MAAM,CAAC,MAAM,GAAG,GAAgC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IAC3E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC;IAC/D,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,eAAe,CAAC,GAAG,EAAE;QAIpB,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI,EAAE;YACzB,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC;SAC5G;IACF,CAAC,CAAC,CAAC;IAEH,OAAO,CACN;QACC,6BAAK,IAAI,EAAC,SAAS,IACjB,KAAK,CAAC,QAAQ,CAAC,GAAG,CAClB,QAAQ,EACR,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CACZ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAC5B,6BACC,GAAG,EAAE,OAAO,GAAG,EAAE,EACjB,IAAI,EAAC,KAAK,mBACK,WAAW,KAAK,GAAG,mBACnB,YAAY,GAAG,EAAE,EAChC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBACvC,cAAc,CAAC,GAAG,CAAC,CAAC;oBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;iBACnB;YACF,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;gBACb,cAAc,CAAC,GAAG,CAAC,CAAC;YACrB,CAAC,IAEC,GAAoB,CAAC,KAAK,CAAC,YAAY,CAAC,CACrC,CACN,CACF,CACI;QAEN,6BAAK,EAAE,EAAC,mBAAmB,EAAC,GAAG,EAAE,GAAG,IAClC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3C,6BACC,GAAG,EAAE,YAAY,GAAG,EAAE,EACtB,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,YAAY,GAAG,EAAE,EACrB,SAAS,EAAE,WAAW,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAE9C,GAAG,CACC,CACN,CAAC,CACG,CACJ,CACH,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, useLayoutEffect, FunctionComponent, ReactElement } from \"react\";\r\nimport \"./css/tab.css\";\r\n\r\nexport type TabProps = {\r\n\tchildren?: React.ReactNode;\r\n\tautofocus?: number;\r\n};\r\n\r\nexport const Tab: FunctionComponent<TabProps> = ({ children, autofocus }) => {\r\n\tconst [selectedTab, setSelectedTab] = useState(autofocus || 0);\r\n\tconst ref = useRef<HTMLDivElement>(null);\r\n\r\n\tuseLayoutEffect(() => {\r\n\t\t// Allow for the tab panel content to look nice with its own scrollbar,\r\n\t\t// which also keeps the heading/tab group at the top of the page.\r\n\t\t// It feels like css flex should do this, but I could never get it to work.\r\n\t\tif (ref.current !== null) {\r\n\t\t\tref.current.style.height = `${window.innerHeight - (ref.current.getBoundingClientRect()?.top || 0) - 10}px`;\r\n\t\t}\r\n\t});\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<div role=\"tablist\">\r\n\t\t\t\t{React.Children.map(\r\n\t\t\t\t\tchildren,\r\n\t\t\t\t\t(tab, key) =>\r\n\t\t\t\t\t\tReact.isValidElement(tab) && (\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tkey={`tab-${key}`}\r\n\t\t\t\t\t\t\t\trole=\"tab\"\r\n\t\t\t\t\t\t\t\taria-selected={selectedTab === key}\r\n\t\t\t\t\t\t\t\taria-controls={`tabpanel-${key}`}\r\n\t\t\t\t\t\t\t\ttabIndex={0}\r\n\t\t\t\t\t\t\t\tonKeyDown={(e) => {\r\n\t\t\t\t\t\t\t\t\tif (e.key === \" \" || e.key === \"Enter\") {\r\n\t\t\t\t\t\t\t\t\t\tsetSelectedTab(key);\r\n\t\t\t\t\t\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\tonClick={() => {\r\n\t\t\t\t\t\t\t\t\tsetSelectedTab(key);\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{(tab as ReactElement).props[\"data-label\"]}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t)\r\n\t\t\t\t)}\r\n\t\t\t</div>\r\n\r\n\t\t\t<div id=\"tabpanelContainer\" ref={ref}>\r\n\t\t\t\t{React.Children.map(children, (tab, key) => (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tkey={`tabpanel-${key}`}\r\n\t\t\t\t\t\trole=\"tabpanel\"\r\n\t\t\t\t\t\tid={`tabpanel-${key}`}\r\n\t\t\t\t\t\tclassName={selectedTab === key ? \"visible\" : \"\"}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{tab}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t))}\r\n\t\t\t</div>\r\n\t\t</>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/common/Tab.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAmC,MAAM,OAAO,CAAC;AAClG,OAAO,eAAe,CAAC;AAOvB,MAAM,CAAC,MAAM,GAAG,GAAgC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IAC3E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC;IAC/D,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,eAAe,CAAC,GAAG,EAAE;;QAIpB,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI,EAAE;YACzB,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,CAAA,MAAA,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,0CAAE,GAAG,KAAI,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC;SAC5G;IACF,CAAC,CAAC,CAAC;IAEH,OAAO,CACN;QACC,6BAAK,IAAI,EAAC,SAAS,IACjB,KAAK,CAAC,QAAQ,CAAC,GAAG,CAClB,QAAQ,EACR,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CACZ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAC5B,6BACC,GAAG,EAAE,OAAO,GAAG,EAAE,EACjB,IAAI,EAAC,KAAK,mBACK,WAAW,KAAK,GAAG,mBACnB,YAAY,GAAG,EAAE,EAChC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBACvC,cAAc,CAAC,GAAG,CAAC,CAAC;oBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;iBACnB;YACF,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;gBACb,cAAc,CAAC,GAAG,CAAC,CAAC;YACrB,CAAC,IAEC,GAAoB,CAAC,KAAK,CAAC,YAAY,CAAC,CACrC,CACN,CACF,CACI;QAEN,6BAAK,EAAE,EAAC,mBAAmB,EAAC,GAAG,EAAE,GAAG,IAClC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3C,6BACC,GAAG,EAAE,YAAY,GAAG,EAAE,EACtB,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,YAAY,GAAG,EAAE,EACrB,SAAS,EAAE,WAAW,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAE9C,GAAG,CACC,CACN,CAAC,CACG,CACJ,CACH,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, useLayoutEffect, FunctionComponent, ReactElement } from \"react\";\r\nimport \"./css/tab.css\";\r\n\r\nexport type TabProps = {\r\n\tchildren?: React.ReactNode;\r\n\tautofocus?: number;\r\n};\r\n\r\nexport const Tab: FunctionComponent<TabProps> = ({ children, autofocus }) => {\r\n\tconst [selectedTab, setSelectedTab] = useState(autofocus || 0);\r\n\tconst ref = useRef<HTMLDivElement>(null);\r\n\r\n\tuseLayoutEffect(() => {\r\n\t\t// Allow for the tab panel content to look nice with its own scrollbar,\r\n\t\t// which also keeps the heading/tab group at the top of the page.\r\n\t\t// It feels like css flex should do this, but I could never get it to work.\r\n\t\tif (ref.current !== null) {\r\n\t\t\tref.current.style.height = `${window.innerHeight - (ref.current.getBoundingClientRect()?.top || 0) - 10}px`;\r\n\t\t}\r\n\t});\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<div role=\"tablist\">\r\n\t\t\t\t{React.Children.map(\r\n\t\t\t\t\tchildren,\r\n\t\t\t\t\t(tab, key) =>\r\n\t\t\t\t\t\tReact.isValidElement(tab) && (\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tkey={`tab-${key}`}\r\n\t\t\t\t\t\t\t\trole=\"tab\"\r\n\t\t\t\t\t\t\t\taria-selected={selectedTab === key}\r\n\t\t\t\t\t\t\t\taria-controls={`tabpanel-${key}`}\r\n\t\t\t\t\t\t\t\ttabIndex={0}\r\n\t\t\t\t\t\t\t\tonKeyDown={(e) => {\r\n\t\t\t\t\t\t\t\t\tif (e.key === \" \" || e.key === \"Enter\") {\r\n\t\t\t\t\t\t\t\t\t\tsetSelectedTab(key);\r\n\t\t\t\t\t\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\tonClick={() => {\r\n\t\t\t\t\t\t\t\t\tsetSelectedTab(key);\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{(tab as ReactElement).props[\"data-label\"]}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t)\r\n\t\t\t\t)}\r\n\t\t\t</div>\r\n\r\n\t\t\t<div id=\"tabpanelContainer\" ref={ref}>\r\n\t\t\t\t{React.Children.map(children, (tab, key) => (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tkey={`tabpanel-${key}`}\r\n\t\t\t\t\t\trole=\"tabpanel\"\r\n\t\t\t\t\t\tid={`tabpanel-${key}`}\r\n\t\t\t\t\t\tclassName={selectedTab === key ? \"visible\" : \"\"}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{tab}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t))}\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;
+}