npm - @finsemble/finsemble-ui - Versions diffs - 6.6.1 → 7.0.0-beta-X - Mend

@finsemble/finsemble-ui 6.6.1 → 7.0.0-beta-X

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (902) hide show

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

@@ -19,5 +19,12 @@ export declare type FileInputProps = {
     suppressDropzone?: boolean;
     disabled?: boolean;
     allowClearing?: boolean;
+    textEditable?: boolean;
 };
-export declare const FileInput: ({ acceptTypes, value, onSetValue, id, shouldUpload, uploadFunction, presetFile, suppressDropzone, disabled, allowClearing, }: FileInputProps) => JSX.Element;
+/**
+ * A Browse button with a hidden file input to allow for a file select dialog and extraction of a path
+ *
+ * @param {FileInputProps} { acceptTypes, value, onSetValue, shouldUpload=true, uploadFunction = defaultUploadFunction}
+ * @return {*}
+ */
+export declare const FileInput: ({ acceptTypes, value, onSetValue, id, shouldUpload, uploadFunction, presetFile, suppressDropzone, disabled, allowClearing, textEditable, }: FileInputProps) => JSX.Element;

package/react/components/common/FileInput.js CHANGED Viewed

@@ -17,12 +17,18 @@ const INVALID_FILE_TYPE_ERROR = {
 const defaultUploadFunction = async () => {
     return { err: null, path: "" };
 };
-export const FileInput = ({ acceptTypes, value, onSetValue, id, shouldUpload = true, uploadFunction = defaultUploadFunction, presetFile = null, suppressDropzone = false, disabled = false, allowClearing = true, }) => {
+/**
+ * A Browse button with a hidden file input to allow for a file select dialog and extraction of a path
+ *
+ * @param {FileInputProps} { acceptTypes, value, onSetValue, shouldUpload=true, uploadFunction = defaultUploadFunction}
+ * @return {*}
+ */
+export const FileInput = ({ acceptTypes, value, onSetValue, id, shouldUpload = true, uploadFunction = defaultUploadFunction, presetFile = null, suppressDropzone = false, disabled = false, allowClearing = true, textEditable = false, }) => {
     const dispatch = useDispatch();
     const fileInputElement = useRef({});
     const [isUploading, setIsUploading] = useState(false);
     const [uploadProgress, setUploadProgress] = useState(0);
-    const [fileInput, setFileInput] = useState({});
+    const [fileInput, setFileInput] = useState({}); // cast to correct type so typescript doesn't complain
     const [path, setPath] = useState(value || "");
     const [errorMessage, setErrorMessage] = useState(null);
     const [handedFile, setHandedFile] = useState(presetFile);
@@ -45,6 +51,7 @@ export const FileInput = ({ acceptTypes, value, onSetValue, id, shouldUpload = t
         setErrorMessage(err);
     };
     const uploadFile = (fileObj) => {
+        // If it's not a file, we can't do anything with it
         if (!(fileObj instanceof File)) {
             return;
         }
@@ -61,6 +68,7 @@ export const FileInput = ({ acceptTypes, value, onSetValue, id, shouldUpload = t
             uploadFile(fileObj);
         }
         else if (fileObj === null || fileObj === void 0 ? void 0 : fileObj.path) {
+            // If the consumer doesn't want the file actually uploaded, just return the file name
             uploadSuccess({
                 err: null,
                 path: fileObj.path,
@@ -81,6 +89,7 @@ export const FileInput = ({ acceptTypes, value, onSetValue, id, shouldUpload = t
         }
         setFileInput(e.target);
     };
+    // Check if props updated
     if (handedFile !== presetFile) {
         setHandedFile(presetFile);
         if (presetFile !== null) {
@@ -94,13 +103,19 @@ export const FileInput = ({ acceptTypes, value, onSetValue, id, shouldUpload = t
                 React.createElement(Button, { fashion: "primary", text: "Select file", disabled: disabled, onClick: () => {
                         fileInputElement.current.click();
                     } })),
-            React.createElement("div", { className: "file-input-value" },
+            textEditable ? (React.createElement("div", { className: "file-input-field" },
+                React.createElement("input", { type: "text", onChange: (e) => {
+                        if (onSetValue) {
+                            onSetValue === null || onSetValue === void 0 ? void 0 : onSetValue(e.target.value);
+                        }
+                        setPath(e.target.value);
+                    }, "aria-label": "File name", value: path }))) : (React.createElement("div", { className: "file-input-value" },
                 React.createElement("span", Object.assign({ className: `file-input-value-input ${isInvalid && "invalid"}` }, { id }), path),
                 allowClearing && path !== "" && (React.createElement(ButtonIcon, { text: "Cancel", icon: "times", onClick: () => {
                         setPath("");
                         onSetValue === null || onSetValue === void 0 ? void 0 : onSetValue("");
                     } })),
-                errorMessage && React.createElement("div", { className: "file-input-error" }, errorMessage)),
+                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,
                 "% uploaded")) : (!errorMessage && React.createElement(React.Fragment, null))))));

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

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

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

@@ -1,9 +1,20 @@
 import React from "react";
 import "./css/icon.css";
-export declare type FinsembleIconType = "alwaysOnTop" | "caret" | "check-square" | "check" | "chevron-left" | "chevron-right" | "close" | "code-block" | "copy" | "documentation" | "exclamation-circle" | "external-link" | "flag" | "folder" | "font" | "globe" | "hdd" | "key" | "life-ring" | "linker" | "lock" | "magic" | "maximize" | "minimize" | "moon" | "paint-roller" | "pencil" | "plus" | "question-circle" | "search" | "sun" | "times" | "toggle-off" | "toggle-on" | "toolbar" | "tools" | "trash" | "upload" | "window";
+export declare type FinsembleIconType = "alwaysOnTop" | "caret" | "check-square" | "check" | "chevron-left" | "chevron-right" | "close" | "code-block" | "copy" | "documentation" | "exclamation-circle" | "external-link" | "flag" | "folder" | "font" | "globe" | "hdd" | "key" | "life-ring" | "linker" | "lock" | "magic" | "maximize" | "minimize" | "moon" | "paint-roller" | "pencil" | "plus" | "question-circle" | "search" | "server" | "sun" | "times" | "toggle-off" | "toggle-on" | "toolbar" | "tools" | "trash" | "upload" | "window";
 export declare type FinsembleIconProps = {
     icon: FinsembleIconType;
     className?: string;
     onClick?: (e: React.MouseEvent) => void;
+    label?: string;
 };
-export declare const FinsembleIcon: (props: FinsembleIconProps) => JSX.Element;
+/**
+ * Wrapper for the SVG-based icons. The wrapper ensures that icons are handled consistently.
+ *
+ * @param param
+ * @param param.icon - The name of the icon to display
+ * @param [param.onClick] - The click action for this icon
+ * @param [param.className] - Any other classes you want to apply to the icon
+ * @param [param.label] - (Accessibility) The label you want to apply for screen reader users. Always include a label UNLESS the icon is decorative.
+ * @returns Wrapped icon component
+ */
+export declare const FinsembleIcon: ({ icon, onClick, className, label }: FinsembleIconProps) => JSX.Element;

package/react/components/common/FinsembleIcon.js CHANGED Viewed

@@ -1,5 +1,7 @@
 import React from "react";
+import uuidv4 from "uuid-random";
 import "./css/icon.css";
+// Import all of the SVG icons
 import { ReactComponent as AlwaysOnTopIcon } from "../../assets/icons/always-on-top.svg";
 import { ReactComponent as Caret } from "../../assets/icons/caret.svg";
 import { ReactComponent as CheckIcon } from "../../assets/icons/check.svg";
@@ -26,19 +28,57 @@ import { ReactComponent as MaximizeIcon } from "../../assets/icons/maximize.svg"
 import { ReactComponent as MinimizeIcon } from "../../assets/icons/minimize.svg";
 import { ReactComponent as MoonIcon } from "../../assets/icons/moon.svg";
 import { ReactComponent as PaintRollerIcon } from "../../assets/icons/paint-roller.svg";
-import { ReactComponent as PencilIcon } from "../../assets/icons/pencil.svg";
+// import { ReactComponent as PencilIcon } from "../../assets/icons/pencil.svg";
 import { ReactComponent as PlusIcon } from "../../assets/icons/plus.svg";
 import { ReactComponent as QuestionCircleIcon } from "../../assets/icons/question-circle.svg";
 import { ReactComponent as SearchIcon } from "../../assets/icons/search.svg";
+import { ReactComponent as ServerIcon } from "../../assets/icons/server.svg";
 import { ReactComponent as SunIcon } from "../../assets/icons/sun.svg";
 import { ReactComponent as TimesIcon } from "../../assets/icons/times.svg";
 import { ReactComponent as ToggleOffIcon } from "../../assets/icons/toggle-off.svg";
 import { ReactComponent as ToggleOnIcon } from "../../assets/icons/toggle-on.svg";
 import { ReactComponent as ToolbarIcon } from "../../assets/icons/toolbar.svg";
 import { ReactComponent as ToolsIcon } from "../../assets/icons/tools.svg";
-import { ReactComponent as TrashIcon } from "../../assets/icons/trash.svg";
+// import { ReactComponent as TrashIcon } from "../../assets/icons/trash.svg";
 import { ReactComponent as UploadIcon } from "../../assets/icons/upload.svg";
 import { ReactComponent as WindowIcon } from "../../assets/icons/window.svg";
+const TrashIcon = () => {
+    /**
+     * The clip path is used to generate a mask, which allows us to drive color changes to the SVG with CSS.
+     * The SVG is referencing clip paths using an ID. If there are multiple instances of the same SVG,
+     * and they were all using the same ID, you have a potential conflict between the clip paths.
+     * For a specific example if all the ID's were the same:, if we have 2 trash icons on a page, and the
+     * first icon is hidden, the second trash icon would also disappear.
+     *
+     * In order to protect against this, we generate a unique ID for each clip path.
+     */
+    const id = `clip${uuidv4()}`;
+    return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("g", { clipPath: `url(#${id})` },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.08098 5.15763C0.492918 5.15763 0 4.69615 0 4.11318V3.12112C0 2.5493 0.481455 2.07667 1.08098 2.07667H14.9331C15.5453 2.07667 16.0347 2.56825 15.9981 3.12112V4.11318C15.9981 4.68501 15.5166 5.15763 14.9159 5.15763H14.525L13.3524 14.2032C13.2354 15.2331 12.3321 16 11.2592 16H4.73889C3.67969 16 2.78785 15.2309 2.64571 14.2121L1.47302 5.15763H1.08098ZM1.14632 4.04296H2.48408L3.78286 14.0672C3.84706 14.5309 4.25629 14.8843 4.73889 14.8843H11.2592C11.7521 14.8843 12.1613 14.5387 12.2141 14.0717L13.514 4.04184H14.8517V3.19023H1.14632V4.04296Z" }),
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.8397 12.4197C6.8397 12.744 6.56917 13.0049 6.22985 13.0049C5.89169 13.0049 5.62001 12.744 5.62001 12.4197V6.73039C5.62001 6.4049 5.89169 6.14407 6.22985 6.14407C6.56917 6.14407 6.8397 6.4049 6.8397 6.73039V12.4197ZM10.4128 12.4197C10.4128 12.744 10.1422 13.0049 9.80294 13.0049C9.46477 13.0049 9.1931 12.744 9.1931 12.4197V6.73039C9.1931 6.4049 9.46477 6.14407 9.80294 6.14407C10.1422 6.14407 10.4128 6.4049 10.4128 6.73039V12.4197ZM10.3108 0.488226C10.3108 0.211788 10.0735 0 9.80294 0H6.21381C5.92723 0 5.70599 0.227393 5.70599 0.488226V1.64191H10.3291V0.487112H10.3119L10.3108 0.488226Z" })),
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: id },
+                React.createElement("rect", { width: "16", height: "16", fill: "white" })))));
+};
+const PencilIcon = () => {
+    /**
+     * The clip path is used to generate a mask, which allows us to drive color changes to the SVG with CSS.
+     * The SVG is referencing clip paths using an ID. If there are multiple instances of the same SVG,
+     * and they were all using the same ID, you have a potential conflict between the clip paths.
+     * For a specific example if all the ID's were the same:, if we have 2 pencil icons on a page, and the
+     * first icon is hidden, the second pencil icon would also disappear.
+     *
+     * In order to protect against this, we generate a unique ID for each clip path.
+     */
+    const id = `clip${uuidv4()}`;
+    return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("g", { clipPath: `url(#${id})` },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.1331 0.865749C16.2897 2.02008 16.2897 3.90016 15.1331 5.05563L5.70073 14.4754C5.64359 14.5737 5.54987 14.6469 5.43672 14.6777L0.548523 15.9852C0.398802 16.0252 0.237654 15.9829 0.127935 15.8721C0.0170738 15.7623 -0.0252147 15.6023 0.0147869 15.4515L1.29941 10.6627C1.3017 10.5541 1.34513 10.4467 1.42627 10.3656L10.9375 0.865749C12.0941 -0.288583 13.9765 -0.288583 15.1331 0.865749ZM2.1623 11.8536L1.43542 14.5646L2.02744 14.4069L4.33039 13.7897L2.1623 11.8536ZM11.7455 1.67492L2.74061 10.6661L5.44358 13.1165L14.3251 4.24646C15.0348 3.53786 15.0348 2.38352 14.3251 1.67492C13.6153 0.965181 12.4564 0.965181 11.7455 1.67492Z" })),
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: id },
+                React.createElement("rect", { width: "16", height: "16", fill: "white" })))));
+};
 const icons = {
     alwaysOnTop: AlwaysOnTopIcon,
     caret: Caret,
@@ -70,6 +110,7 @@ const icons = {
     plus: PlusIcon,
     "question-circle": QuestionCircleIcon,
     search: SearchIcon,
+    server: ServerIcon,
     sun: SunIcon,
     times: TimesIcon,
     "toggle-off": ToggleOffIcon,
@@ -80,8 +121,23 @@ const icons = {
     upload: UploadIcon,
     window: WindowIcon,
 };
-export const FinsembleIcon = (props) => {
-    const Icon = icons[props.icon];
-    return (React.createElement("span", { className: ["finsemble-icon", `finsemble-icon-${props.icon}`, props.className || ""].join(" "), role: "img", "aria-label": `${props.icon} icon`, onClick: (e) => props.onClick && props.onClick(e) }, Icon && React.createElement(Icon, null)));
+/**
+ * Wrapper for the SVG-based icons. The wrapper ensures that icons are handled consistently.
+ *
+ * @param param
+ * @param param.icon - The name of the icon to display
+ * @param [param.onClick] - The click action for this icon
+ * @param [param.className] - Any other classes you want to apply to the icon
+ * @param [param.label] - (Accessibility) The label you want to apply for screen reader users. Always include a label UNLESS the icon is decorative.
+ * @returns Wrapped icon component
+ */
+export const FinsembleIcon = ({ icon, onClick = () => { }, className = "", label = "" }) => {
+    const Icon = icons[icon];
+    return (React.createElement("span", Object.assign({ className: ["finsemble-icon", `finsemble-icon-${icon}`, className].join(" ") }, (label
+        ? {
+            role: "img",
+            "aria-label": label,
+        }
+        : {}), { onClick: onClick }), Icon && React.createElement(Icon, null)));
 };
 //# sourceMappingURL=FinsembleIcon.js.map

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

	@@ -1 +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\";\nimport \"./css/icon.css\";\nimport { ReactComponent as AlwaysOnTopIcon } from \"../../assets/icons/always-on-top.svg\";\nimport { ReactComponent as Caret } from \"../../assets/icons/caret.svg\";\nimport { ReactComponent as CheckIcon } from \"../../assets/icons/check.svg\";\nimport { ReactComponent as CheckSquare } from \"../../assets/icons/check-square.svg\";\nimport { ReactComponent as ChevronLeftIcon } from \"../../assets/icons/chevron-left.svg\";\nimport { ReactComponent as ChevronRightIcon } from \"../../assets/icons/chevron-right.svg\";\nimport { ReactComponent as CloseIcon } from \"../../assets/icons/close.svg\";\nimport { ReactComponent as CodeBlockIcon } from \"../../assets/icons/code-block.svg\";\nimport { ReactComponent as CopyIcon } from \"../../assets/icons/copy.svg\";\nimport { ReactComponent as DocumentationIcon } from \"../../assets/icons/documentation.svg\";\nimport { ReactComponent as ExclaimationCircleIcon } from \"../../assets/icons/exclamation-circle.svg\";\nimport { ReactComponent as ExternalLinkIcon } from \"../../assets/icons/external-link.svg\";\nimport { ReactComponent as FlagIcon } from \"../../assets/icons/flag.svg\";\nimport { ReactComponent as FolderIcon } from \"../../assets/icons/folder.svg\";\nimport { ReactComponent as FontIcon } from \"../../assets/icons/font.svg\";\nimport { ReactComponent as GlobeIcon } from \"../../assets/icons/globe.svg\";\nimport { ReactComponent as HDDIcon } from \"../../assets/icons/hdd.svg\";\nimport { ReactComponent as KeyIcon } from \"../../assets/icons/key.svg\";\nimport { ReactComponent as LifeRingIcon } from \"../../assets/icons/life-ring.svg\";\nimport { ReactComponent as LinkerIcon } from \"../../assets/icons/linker.svg\";\nimport { ReactComponent as LockIcon } from \"../../assets/icons/lock.svg\";\nimport { ReactComponent as MagicIcon } from \"../../assets/icons/magic.svg\";\nimport { ReactComponent as MaximizeIcon } from \"../../assets/icons/maximize.svg\";\nimport { ReactComponent as MinimizeIcon } from \"../../assets/icons/minimize.svg\";\nimport { ReactComponent as MoonIcon } from \"../../assets/icons/moon.svg\";\nimport { ReactComponent as PaintRollerIcon } from \"../../assets/icons/paint-roller.svg\";\nimport { ReactComponent as PencilIcon } from \"../../assets/icons/pencil.svg\";\nimport { ReactComponent as PlusIcon } from \"../../assets/icons/plus.svg\";\nimport { ReactComponent as QuestionCircleIcon } from \"../../assets/icons/question-circle.svg\";\nimport { ReactComponent as SearchIcon } from \"../../assets/icons/search.svg\";\nimport { ReactComponent as SunIcon } from \"../../assets/icons/sun.svg\";\nimport { ReactComponent as TimesIcon } from \"../../assets/icons/times.svg\";\nimport { ReactComponent as ToggleOffIcon } from \"../../assets/icons/toggle-off.svg\";\nimport { ReactComponent as ToggleOnIcon } from \"../../assets/icons/toggle-on.svg\";\nimport { ReactComponent as ToolbarIcon } from \"../../assets/icons/toolbar.svg\";\nimport { ReactComponent as ToolsIcon } from \"../../assets/icons/tools.svg\";\nimport { ReactComponent as TrashIcon } from \"../../assets/icons/trash.svg\";\nimport { ReactComponent as UploadIcon } from \"../../assets/icons/upload.svg\";\nimport { ReactComponent as WindowIcon } from \"../../assets/icons/window.svg\";\n\nexport type FinsembleIconType =\n\t\| \"alwaysOnTop\"\n\t\| \"caret\"\n\t\| \"check-square\"\n\t\| \"check\"\n\t\| \"chevron-left\"\n\t\| \"chevron-right\"\n\t\| \"close\"\n\t\| \"code-block\"\n\t\| \"copy\"\n\t\| \"documentation\"\n\t\| \"exclamation-circle\"\n\t\| \"external-link\"\n\t\| \"flag\"\n\t\| \"folder\"\n\t\| \"font\"\n\t\| \"globe\"\n\t\| \"hdd\"\n\t\| \"key\"\n\t\| \"life-ring\"\n\t\| \"linker\"\n\t\| \"lock\"\n\t\| \"magic\"\n\t\| \"maximize\"\n\t\| \"minimize\"\n\t\| \"moon\"\n\t\| \"paint-roller\"\n\t\| \"pencil\"\n\t\| \"plus\"\n\t\| \"question-circle\"\n\t\| \"search\"\n\t\| \"sun\"\n\t\| \"times\"\n\t\| \"toggle-off\"\n\t\| \"toggle-on\"\n\t\| \"toolbar\"\n\t\| \"tools\"\n\t\| \"trash\"\n\t\| \"upload\"\n\t\| \"window\";\n\ntype IconComponents = {\n\t[key in FinsembleIconType]: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;\n};\n\nconst icons: IconComponents = {\n\talwaysOnTop: AlwaysOnTopIcon,\n\tcaret: Caret,\n\tcheck: CheckIcon,\n\t\"check-square\": CheckSquare,\n\t\"chevron-left\": ChevronLeftIcon,\n\t\"chevron-right\": ChevronRightIcon,\n\tclose: CloseIcon,\n\t\"code-block\": CodeBlockIcon,\n\tcopy: CopyIcon,\n\tdocumentation: DocumentationIcon,\n\t\"exclamation-circle\": ExclaimationCircleIcon,\n\t\"external-link\": ExternalLinkIcon,\n\tflag: FlagIcon,\n\tfolder: FolderIcon,\n\tfont: FontIcon,\n\tglobe: GlobeIcon,\n\thdd: HDDIcon,\n\tkey: KeyIcon,\n\t\"life-ring\": LifeRingIcon,\n\tlinker: LinkerIcon,\n\tlock: LockIcon,\n\tmagic: MagicIcon,\n\tmaximize: MaximizeIcon,\n\tminimize: MinimizeIcon,\n\tmoon: MoonIcon,\n\t\"paint-roller\": PaintRollerIcon,\n\tpencil: PencilIcon,\n\tplus: PlusIcon,\n\t\"question-circle\": QuestionCircleIcon,\n\tsearch: SearchIcon,\n\tsun: SunIcon,\n\ttimes: TimesIcon,\n\t\"toggle-off\": ToggleOffIcon,\n\t\"toggle-on\": ToggleOnIcon,\n\ttoolbar: ToolbarIcon,\n\ttools: ToolsIcon,\n\ttrash: TrashIcon,\n\tupload: UploadIcon,\n\twindow: WindowIcon,\n};\n\nexport type FinsembleIconProps = {\n\ticon: FinsembleIconType;\n\tclassName?: string;\n\tonClick?: (e: React.MouseEvent) => void;\n};\n\nexport const FinsembleIcon = (props: FinsembleIconProps) => {\n\tconst Icon = icons[props.icon];\n\n\treturn (\n\t\t<span\n\t\t\tclassName={[\"finsemble-icon\", `finsemble-icon-${props.icon}`, props.className \|\| \"\"].join(\" \")}\n\t\t\trole=\"img\"\n\t\t\taria-label={`${props.icon} icon`}\n\t\t\tonClick={(e) => props.onClick && props.onClick(e)}\n\t\t>\n\t\t\t{Icon && <Icon></Icon>}\n\t\t</span>\n\t);\n};\n"]}
1	+ {"version":3,"file":"FinsembleIcon.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport uuidv4 from \"uuid-random\";\n\nimport \"./css/icon.css\";\n\n// Import all of the SVG icons\nimport { ReactComponent as AlwaysOnTopIcon } from \"../../assets/icons/always-on-top.svg\";\nimport { ReactComponent as Caret } from \"../../assets/icons/caret.svg\";\nimport { ReactComponent as CheckIcon } from \"../../assets/icons/check.svg\";\nimport { ReactComponent as CheckSquare } from \"../../assets/icons/check-square.svg\";\nimport { ReactComponent as ChevronLeftIcon } from \"../../assets/icons/chevron-left.svg\";\nimport { ReactComponent as ChevronRightIcon } from \"../../assets/icons/chevron-right.svg\";\nimport { ReactComponent as CloseIcon } from \"../../assets/icons/close.svg\";\nimport { ReactComponent as CodeBlockIcon } from \"../../assets/icons/code-block.svg\";\nimport { ReactComponent as CopyIcon } from \"../../assets/icons/copy.svg\";\nimport { ReactComponent as DocumentationIcon } from \"../../assets/icons/documentation.svg\";\nimport { ReactComponent as ExclaimationCircleIcon } from \"../../assets/icons/exclamation-circle.svg\";\nimport { ReactComponent as ExternalLinkIcon } from \"../../assets/icons/external-link.svg\";\nimport { ReactComponent as FlagIcon } from \"../../assets/icons/flag.svg\";\nimport { ReactComponent as FolderIcon } from \"../../assets/icons/folder.svg\";\nimport { ReactComponent as FontIcon } from \"../../assets/icons/font.svg\";\nimport { ReactComponent as GlobeIcon } from \"../../assets/icons/globe.svg\";\nimport { ReactComponent as HDDIcon } from \"../../assets/icons/hdd.svg\";\nimport { ReactComponent as KeyIcon } from \"../../assets/icons/key.svg\";\nimport { ReactComponent as LifeRingIcon } from \"../../assets/icons/life-ring.svg\";\nimport { ReactComponent as LinkerIcon } from \"../../assets/icons/linker.svg\";\nimport { ReactComponent as LockIcon } from \"../../assets/icons/lock.svg\";\nimport { ReactComponent as MagicIcon } from \"../../assets/icons/magic.svg\";\nimport { ReactComponent as MaximizeIcon } from \"../../assets/icons/maximize.svg\";\nimport { ReactComponent as MinimizeIcon } from \"../../assets/icons/minimize.svg\";\nimport { ReactComponent as MoonIcon } from \"../../assets/icons/moon.svg\";\nimport { ReactComponent as PaintRollerIcon } from \"../../assets/icons/paint-roller.svg\";\n// import { ReactComponent as PencilIcon } from \"../../assets/icons/pencil.svg\";\nimport { ReactComponent as PlusIcon } from \"../../assets/icons/plus.svg\";\nimport { ReactComponent as QuestionCircleIcon } from \"../../assets/icons/question-circle.svg\";\nimport { ReactComponent as SearchIcon } from \"../../assets/icons/search.svg\";\nimport { ReactComponent as ServerIcon } from \"../../assets/icons/server.svg\";\nimport { ReactComponent as SunIcon } from \"../../assets/icons/sun.svg\";\nimport { ReactComponent as TimesIcon } from \"../../assets/icons/times.svg\";\nimport { ReactComponent as ToggleOffIcon } from \"../../assets/icons/toggle-off.svg\";\nimport { ReactComponent as ToggleOnIcon } from \"../../assets/icons/toggle-on.svg\";\nimport { ReactComponent as ToolbarIcon } from \"../../assets/icons/toolbar.svg\";\nimport { ReactComponent as ToolsIcon } from \"../../assets/icons/tools.svg\";\n// import { ReactComponent as TrashIcon } from \"../../assets/icons/trash.svg\";\nimport { ReactComponent as UploadIcon } from \"../../assets/icons/upload.svg\";\nimport { ReactComponent as WindowIcon } from \"../../assets/icons/window.svg\";\n\nconst TrashIcon = () => {\n\t/*\n\t The clip path is used to generate a mask, which allows us to drive color changes to the SVG with CSS.\n\t * The SVG is referencing clip paths using an ID. If there are multiple instances of the same SVG,\n\t * and they were all using the same ID, you have a potential conflict between the clip paths.\n\t * For a specific example if all the ID's were the same:, if we have 2 trash icons on a page, and the\n\t * first icon is hidden, the second trash icon would also disappear.\n\t \n\t In order to protect against this, we generate a unique ID for each clip path.\n\t /\n\tconst id = `clip${uuidv4()}`;\n\n\treturn (\n\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<g clipPath={`url(#${id})`}>\n\t\t\t\t<path\n\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\td=\"M1.08098 5.15763C0.492918 5.15763 0 4.69615 0 4.11318V3.12112C0 2.5493 0.481455 2.07667 1.08098 2.07667H14.9331C15.5453 2.07667 16.0347 2.56825 15.9981 3.12112V4.11318C15.9981 4.68501 15.5166 5.15763 14.9159 5.15763H14.525L13.3524 14.2032C13.2354 15.2331 12.3321 16 11.2592 16H4.73889C3.67969 16 2.78785 15.2309 2.64571 14.2121L1.47302 5.15763H1.08098ZM1.14632 4.04296H2.48408L3.78286 14.0672C3.84706 14.5309 4.25629 14.8843 4.73889 14.8843H11.2592C11.7521 14.8843 12.1613 14.5387 12.2141 14.0717L13.514 4.04184H14.8517V3.19023H1.14632V4.04296Z\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\td=\"M6.8397 12.4197C6.8397 12.744 6.56917 13.0049 6.22985 13.0049C5.89169 13.0049 5.62001 12.744 5.62001 12.4197V6.73039C5.62001 6.4049 5.89169 6.14407 6.22985 6.14407C6.56917 6.14407 6.8397 6.4049 6.8397 6.73039V12.4197ZM10.4128 12.4197C10.4128 12.744 10.1422 13.0049 9.80294 13.0049C9.46477 13.0049 9.1931 12.744 9.1931 12.4197V6.73039C9.1931 6.4049 9.46477 6.14407 9.80294 6.14407C10.1422 6.14407 10.4128 6.4049 10.4128 6.73039V12.4197ZM10.3108 0.488226C10.3108 0.211788 10.0735 0 9.80294 0H6.21381C5.92723 0 5.70599 0.227393 5.70599 0.488226V1.64191H10.3291V0.487112H10.3119L10.3108 0.488226Z\"\n\t\t\t\t/>\n\t\t\t</g>\n\t\t\t<defs>\n\t\t\t\t<clipPath id={id}>\n\t\t\t\t\t<rect width=\"16\" height=\"16\" fill=\"white\" />\n\t\t\t\t</clipPath>\n\t\t\t</defs>\n\t\t</svg>\n\t);\n};\n\nconst PencilIcon = () => {\n\t/\n\t The clip path is used to generate a mask, which allows us to drive color changes to the SVG with CSS.\n\t * The SVG is referencing clip paths using an ID. If there are multiple instances of the same SVG,\n\t * and they were all using the same ID, you have a potential conflict between the clip paths.\n\t * For a specific example if all the ID's were the same:, if we have 2 pencil icons on a page, and the\n\t * first icon is hidden, the second pencil icon would also disappear.\n\t \n\t In order to protect against this, we generate a unique ID for each clip path.\n\t /\n\tconst id = `clip${uuidv4()}`;\n\n\treturn (\n\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<g clipPath={`url(#${id})`}>\n\t\t\t\t<path\n\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\td=\"M15.1331 0.865749C16.2897 2.02008 16.2897 3.90016 15.1331 5.05563L5.70073 14.4754C5.64359 14.5737 5.54987 14.6469 5.43672 14.6777L0.548523 15.9852C0.398802 16.0252 0.237654 15.9829 0.127935 15.8721C0.0170738 15.7623 -0.0252147 15.6023 0.0147869 15.4515L1.29941 10.6627C1.3017 10.5541 1.34513 10.4467 1.42627 10.3656L10.9375 0.865749C12.0941 -0.288583 13.9765 -0.288583 15.1331 0.865749ZM2.1623 11.8536L1.43542 14.5646L2.02744 14.4069L4.33039 13.7897L2.1623 11.8536ZM11.7455 1.67492L2.74061 10.6661L5.44358 13.1165L14.3251 4.24646C15.0348 3.53786 15.0348 2.38352 14.3251 1.67492C13.6153 0.965181 12.4564 0.965181 11.7455 1.67492Z\"\n\t\t\t\t/>\n\t\t\t</g>\n\t\t\t<defs>\n\t\t\t\t<clipPath id={id}>\n\t\t\t\t\t<rect width=\"16\" height=\"16\" fill=\"white\" />\n\t\t\t\t</clipPath>\n\t\t\t</defs>\n\t\t</svg>\n\t);\n};\n\nexport type FinsembleIconType =\n\t\| \"alwaysOnTop\"\n\t\| \"caret\"\n\t\| \"check-square\"\n\t\| \"check\"\n\t\| \"chevron-left\"\n\t\| \"chevron-right\"\n\t\| \"close\"\n\t\| \"code-block\"\n\t\| \"copy\"\n\t\| \"documentation\"\n\t\| \"exclamation-circle\"\n\t\| \"external-link\"\n\t\| \"flag\"\n\t\| \"folder\"\n\t\| \"font\"\n\t\| \"globe\"\n\t\| \"hdd\"\n\t\| \"key\"\n\t\| \"life-ring\"\n\t\| \"linker\"\n\t\| \"lock\"\n\t\| \"magic\"\n\t\| \"maximize\"\n\t\| \"minimize\"\n\t\| \"moon\"\n\t\| \"paint-roller\"\n\t\| \"pencil\"\n\t\| \"plus\"\n\t\| \"question-circle\"\n\t\| \"search\"\n\t\| \"server\"\n\t\| \"sun\"\n\t\| \"times\"\n\t\| \"toggle-off\"\n\t\| \"toggle-on\"\n\t\| \"toolbar\"\n\t\| \"tools\"\n\t\| \"trash\"\n\t\| \"upload\"\n\t\| \"window\";\n\ntype IconComponents = {\n\t[key in FinsembleIconType]: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;\n};\n\nconst icons: IconComponents = {\n\talwaysOnTop: AlwaysOnTopIcon,\n\tcaret: Caret,\n\tcheck: CheckIcon,\n\t\"check-square\": CheckSquare,\n\t\"chevron-left\": ChevronLeftIcon,\n\t\"chevron-right\": ChevronRightIcon,\n\tclose: CloseIcon,\n\t\"code-block\": CodeBlockIcon,\n\tcopy: CopyIcon,\n\tdocumentation: DocumentationIcon,\n\t\"exclamation-circle\": ExclaimationCircleIcon,\n\t\"external-link\": ExternalLinkIcon,\n\tflag: FlagIcon,\n\tfolder: FolderIcon,\n\tfont: FontIcon,\n\tglobe: GlobeIcon,\n\thdd: HDDIcon,\n\tkey: KeyIcon,\n\t\"life-ring\": LifeRingIcon,\n\tlinker: LinkerIcon,\n\tlock: LockIcon,\n\tmagic: MagicIcon,\n\tmaximize: MaximizeIcon,\n\tminimize: MinimizeIcon,\n\tmoon: MoonIcon,\n\t\"paint-roller\": PaintRollerIcon,\n\tpencil: PencilIcon,\n\tplus: PlusIcon,\n\t\"question-circle\": QuestionCircleIcon,\n\tsearch: SearchIcon,\n\tserver: ServerIcon,\n\tsun: SunIcon,\n\ttimes: TimesIcon,\n\t\"toggle-off\": ToggleOffIcon,\n\t\"toggle-on\": ToggleOnIcon,\n\ttoolbar: ToolbarIcon,\n\ttools: ToolsIcon,\n\ttrash: TrashIcon,\n\tupload: UploadIcon,\n\twindow: WindowIcon,\n};\n\nexport type FinsembleIconProps = {\n\ticon: FinsembleIconType;\n\tclassName?: string;\n\tonClick?: (e: React.MouseEvent) => void;\n\tlabel?: string;\n};\n\n/\n Wrapper for the SVG-based icons. The wrapper ensures that icons are handled consistently.\n \n @param param\n * @param param.icon - The name of the icon to display\n * @param [param.onClick] - The click action for this icon\n * @param [param.className] - Any other classes you want to apply to the icon\n * @param [param.label] - (Accessibility) The label you want to apply for screen reader users. Always include a label UNLESS the icon is decorative.\n * @returns Wrapped icon component\n */\nexport const FinsembleIcon = ({ icon, onClick = () => {}, className = \"\", label = \"\" }: FinsembleIconProps) => {\n\tconst Icon = icons[icon];\n\n\treturn (\n\t\t<span\n\t\t\tclassName={[\"finsemble-icon\", `finsemble-icon-${icon}`, className].join(\" \")}\n\t\t\t{...(label\n\t\t\t\t? {\n\t\t\t\t\t\trole: \"img\",\n\t\t\t\t\t\t\"aria-label\": label,\n\t\t\t\t }\n\t\t\t\t: {})}\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t{Icon && <Icon></Icon>}\n\t\t</span>\n\t);\n};\n"]}

package/react/components/common/FinsembleLink.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import React from "react";
+export interface FinsembleLinkProps {
+    url: string;
+    text: string;
+}
+export declare const FinsembleLink: React.FC<FinsembleLinkProps>;

package/react/components/common/FinsembleLink.js ADDED Viewed

@@ -0,0 +1,12 @@
+import React from "react";
+const openLink = (url) => {
+    FSBL.Clients.LauncherClient.spawn("", {
+        url,
+        addToWorkspace: false,
+    }, () => { });
+};
+export const FinsembleLink = ({ url, text }) => (React.createElement("a", { href: "", onClick: (e) => {
+        e.preventDefault();
+        openLink(url);
+    } }, text));
+//# sourceMappingURL=FinsembleLink.js.map

package/react/components/common/FinsembleLink.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FinsembleLink.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,EAAE;IAChC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,CAChC,EAAE,EACF;QACC,GAAG;QACH,cAAc,EAAE,KAAK;KACrB,EACD,GAAG,EAAE,GAAE,CAAC,CACR,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAC7E,2BACC,IAAI,EAAC,EAAE,EACP,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;QACd,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,QAAQ,CAAC,GAAG,CAAC,CAAC;IACf,CAAC,IAEA,IAAI,CACF,CACJ,CAAC","sourcesContent":["import React from \"react\";\n\nexport interface FinsembleLinkProps {\n\turl: string;\n\ttext: string;\n}\n\nconst openLink = (url: string) => {\n\tFSBL.Clients.LauncherClient.spawn(\n\t\t\"\",\n\t\t{\n\t\t\turl,\n\t\t\taddToWorkspace: false,\n\t\t},\n\t\t() => {}\n\t);\n};\n\nexport const FinsembleLink: React.FC<FinsembleLinkProps> = ({ url, text }) => (\n\t<a\n\t\thref=\"\"\n\t\tonClick={(e) => {\n\t\t\te.preventDefault();\n\t\t\topenLink(url);\n\t\t}}\n\t>\n\t\t{text}\n\t</a>\n);\n"]}

package/react/components/common/FinsembleSelect.js CHANGED Viewed

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import "./css/selector.css";
 import { FinsembleIcon } from "./FinsembleIcon";
 import { FinsembleToggle } from "./FinsembleToggle";
-const heightMultiplier = 40;
+const heightMultiplier = 40; // It works in storybook, but we will probably want a better way of detecting this soon.
 const removeItem = (startingArray, removableItem) => {
     const removableIndex = startingArray.indexOf(removableItem);
     if (removableIndex < 0) {
@@ -16,7 +16,9 @@ export const FinsembleSelect = ({ options, optionComponents, updateCallback, sel
     });
     const [selectedOptions, setSelectedOptions] = useState(selected);
     const [displayOptions, setDisplayOptions] = useState(mappedOptions);
+    // Magic numbers
     const height = size ? heightMultiplier * size : "";
+    // Updating consumer
     const doSetSelectedOptions = (opts) => {
         if (opts.length > limit) {
             opts = opts.slice(limit * -1);
@@ -26,10 +28,12 @@ export const FinsembleSelect = ({ options, optionComponents, updateCallback, sel
         }
         setSelectedOptions(opts);
     };
+    // Event handlers
     const changeHandler = (e) => {
         doSetSelectedOptions(Array.from(e.target.selectedOptions).map((option) => option.value));
     };
     const updateSearch = (e) => {
+        // TS doesn't complain if I use .currentTarget, but then I can't use Enzyme to test it, so here we are
         const searchString = e.target.value;
         setDisplayOptions(mappedOptions
             .filter((optionMap) => optionMap.option.toUpperCase().includes(searchString.toUpperCase()))

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FinsembleSelect.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AACnD,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,EAAE,CAAC;~~AAE5B~~,MAAM,UAAU,GAAG,CAAC,aAAuB,EAAE,aAAqB,EAAE,EAAE;IACrE,MAAM,cAAc,GAAG,aAAa,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5D,IAAI,cAAc,GAAG,CAAC,EAAE;QACvB,OAAO,aAAa,CAAC;KACrB;IACD,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC;AAC/F,CAAC,CAAC;AAaF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC/B,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,QAAQ,GAAG,EAAE,EACb,IAAI,EACJ,MAAM,GAAG,OAAO,EAChB,UAAU,GAAG,KAAK,EAClB,KAAK,GAAG,QAAQ,GACM,EAAE,EAAE;IAC1B,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;QACnD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,QAAQ,CAAC,CAAC;IAC3E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;~~IAGpE~~,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;~~IAGnD~~,MAAM,oBAAoB,GAAG,CAAC,IAAc,EAAE,EAAE;QAC/C,IAAI,IAAI,CAAC,MAAM,GAAG,KAAK,EAAE;YACxB,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;SAC9B;QAED,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,EAAE;YAC7D,cAAc,CAAC,IAAI,CAAC,CAAC;SACrB;QACD,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC;~~IAGF~~,MAAM,aAAa,GAAG,CAAC,CAAM,EAAE,EAAE;QAChC,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/F,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,CAAwC,EAAE,EAAE;~~QAEjE~~,MAAM,YAAY,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QAC1D,iBAAiB,CAChB,aAAa;aACX,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,CAAC;aAC1F,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;YACpB,uCACI,WAAW,KACd,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,OAAO,CACjC,IAAI,MAAM,CAAC,IAAI,YAAY,GAAG,EAAE,GAAG,CAAC,EACpC,mCAAmC,CACnC,IACA;QACH,CAAC,CAAC,CACH,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACN;QACC,6BAAK,SAAS,EAAC,wBAAwB;YACrC,UAAU,IAAI,CACd;gBACC,oBAAC,aAAa,IAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,QAAQ,GAAiB;gBACpE,+BAAO,IAAI,EAAC,MAAM,EAAC,WAAW,EAAC,QAAQ,gBAAY,QAAQ,EAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAY,GAAI,CACtG,CACH;YACD,+CAAoB,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,QAAQ,QAAC,QAAQ,EAAE,aAAa,IAClF,cAAc,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,KAAa,EAAE,EAAE,CAAC,CACzD,gCAAQ,GAAG,EAAE,iBAAiB,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,IACjD,MAAM,CACC,CACT,CAAC,CACM;YACT,6BAAK,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,IACnE,cAAc,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,KAAa,EAAE,EAAE,CAAC,CACzD,6BAAK,SAAS,EAAC,eAAe,EAAC,GAAG,EAAE,kBAAkB,KAAK,EAAE;gBAC5D;oBACC,oBAAC,eAAe,IACf,OAAO,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpE,QAAQ,EAAE,GAAG,EAAE;4BACd,IAAI,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;gCAChE,oBAAoB,CAAC,UAAU,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC;6BACzD;iCAAM;gCACN,oBAAoB,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;6BACtD;wBACF,CAAC,GACiB;oBAClB,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,KAAK,CAAC,EAAC,CAAC,CAAC,CAC5B,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,KAAK,CAAC,CACzB,CAAC,CAAC,CAAC,CACH,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAS,CAC1D,CACM,CACH,CACN,CAAC,CACG,CACD,CACJ,CACH,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useState, ReactNode } from \"react\";\nimport \"./css/selector.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\nimport { FinsembleToggle } from \"./FinsembleToggle\";\n\nconst heightMultiplier = 40; // It works in storybook, but we will probably want a better way of detecting this soon.\n\nconst removeItem = (startingArray: string[], removableItem: string) => {\n\tconst removableIndex = startingArray.indexOf(removableItem);\n\tif (removableIndex < 0) {\n\t\treturn startingArray;\n\t}\n\treturn startingArray.slice(0, removableIndex).concat(startingArray.slice(removableIndex + 1));\n};\n\nexport interface FinsembleSelectProps {\n\toptions: string[];\n\toptionComponents?: ReactNode[];\n\tvalues?: string[];\n\tselected?: string[];\n\tsize?: number;\n\tupdateCallback: (selectedValues: string[]) => void;\n\tshowSearch?: boolean;\n\tlimit?: number;\n}\n\nexport const FinsembleSelect = ({\n\toptions,\n\toptionComponents,\n\tupdateCallback,\n\tselected = [],\n\tsize,\n\tvalues = options,\n\tshowSearch = false,\n\tlimit = Infinity,\n}: FinsembleSelectProps) => {\n\tconst mappedOptions = options.map((option, index) => {\n\t\treturn { option, value: values[index] };\n\t});\n\tconst [selectedOptions, setSelectedOptions] = useState<string[]>(selected);\n\tconst [displayOptions, setDisplayOptions] = useState(mappedOptions);\n\n\t// Magic numbers\n\tconst height = size ? heightMultiplier * size : \"\";\n\n\t// Updating consumer\n\tconst doSetSelectedOptions = (opts: string[]) => {\n\t\tif (opts.length > limit) {\n\t\t\topts = opts.slice(limit * -1);\n\t\t}\n\n\t\tif (JSON.stringify(opts) !== JSON.stringify(selectedOptions)) {\n\t\t\tupdateCallback(opts);\n\t\t}\n\t\tsetSelectedOptions(opts);\n\t};\n\n\t// Event handlers\n\tconst changeHandler = (e: any) => {\n\t\tdoSetSelectedOptions(Array.from(e.target.selectedOptions).map((option: any) => option.value));\n\t};\n\n\tconst updateSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {\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\n\t\tconst searchString = (e.target as HTMLInputElement).value;\n\t\tsetDisplayOptions(\n\t\t\tmappedOptions\n\t\t\t\t.filter((optionMap) => optionMap.option.toUpperCase().includes(searchString.toUpperCase()))\n\t\t\t\t.map((combination) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...combination,\n\t\t\t\t\t\toption: combination.option.replace(\n\t\t\t\t\t\t\tnew RegExp(`(${searchString})`, \"i\"),\n\t\t\t\t\t\t\t`<span class=\"highlight\">$1</span>`\n\t\t\t\t\t\t),\n\t\t\t\t\t};\n\t\t\t\t})\n\t\t);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"emperorSelectContainer\">\n\t\t\t\t{showSearch && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<FinsembleIcon className=\"searchIcon\" icon=\"search\"></FinsembleIcon>\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"Search\" aria-label=\"search\" className=\"search\" onInput={updateSearch} />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t<select aria-hidden=\"true\" className=\"shogunSelect\" multiple onChange={changeHandler}>\n\t\t\t\t\t{displayOptions.map(({ option, value }, index: number) => (\n\t\t\t\t\t\t<option key={`shogun-option-${index}`} value={value}>\n\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t))}\n\t\t\t\t</select>\n\t\t\t\t<div className=\"emperorSelect\" style={height === \"\" ? {} : { height }}>\n\t\t\t\t\t{displayOptions.map(({ option, value }, index: number) => (\n\t\t\t\t\t\t<div className=\"emperorOption\" key={`emperor-option-${index}`}>\n\t\t\t\t\t\t\t<label>\n\t\t\t\t\t\t\t\t<FinsembleToggle\n\t\t\t\t\t\t\t\t\tchecked={selectedOptions.includes(value) \|\| selected.includes(value)}\n\t\t\t\t\t\t\t\t\tonChange={() => {\n\t\t\t\t\t\t\t\t\t\tif (selectedOptions.includes(value) \|\| selected.includes(value)) {\n\t\t\t\t\t\t\t\t\t\t\tdoSetSelectedOptions(removeItem(selectedOptions, value));\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tdoSetSelectedOptions(selectedOptions.concat([value]));\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t></FinsembleToggle>\n\t\t\t\t\t\t\t\t{optionComponents?.[index] ? (\n\t\t\t\t\t\t\t\t\toptionComponents?.[index]\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<span dangerouslySetInnerHTML={{ __html: option }}></span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n"]}
1	+ {"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\";\nimport \"./css/selector.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\nimport { FinsembleToggle } from \"./FinsembleToggle\";\n\nconst heightMultiplier = 40; // It works in storybook, but we will probably want a better way of detecting this soon.\n\nconst removeItem = (startingArray: string[], removableItem: string) => {\n\tconst removableIndex = startingArray.indexOf(removableItem);\n\tif (removableIndex < 0) {\n\t\treturn startingArray;\n\t}\n\treturn startingArray.slice(0, removableIndex).concat(startingArray.slice(removableIndex + 1));\n};\n\nexport interface FinsembleSelectProps {\n\toptions: string[];\n\toptionComponents?: ReactNode[];\n\tvalues?: string[];\n\tselected?: string[];\n\tsize?: number;\n\tupdateCallback: (selectedValues: string[]) => void;\n\tshowSearch?: boolean;\n\tlimit?: number;\n}\n\nexport const FinsembleSelect = ({\n\toptions,\n\toptionComponents,\n\tupdateCallback,\n\tselected = [],\n\tsize,\n\tvalues = options,\n\tshowSearch = false,\n\tlimit = Infinity,\n}: FinsembleSelectProps) => {\n\tconst mappedOptions = options.map((option, index) => {\n\t\treturn { option, value: values[index] };\n\t});\n\tconst [selectedOptions, setSelectedOptions] = useState<string[]>(selected);\n\tconst [displayOptions, setDisplayOptions] = useState(mappedOptions);\n\n\t// Magic numbers\n\tconst height = size ? heightMultiplier * size : \"\";\n\n\t// Updating consumer\n\tconst doSetSelectedOptions = (opts: string[]) => {\n\t\tif (opts.length > limit) {\n\t\t\topts = opts.slice(limit * -1);\n\t\t}\n\n\t\tif (JSON.stringify(opts) !== JSON.stringify(selectedOptions)) {\n\t\t\tupdateCallback(opts);\n\t\t}\n\t\tsetSelectedOptions(opts);\n\t};\n\n\t// Event handlers\n\tconst changeHandler = (e: any) => {\n\t\tdoSetSelectedOptions(Array.from(e.target.selectedOptions).map((option: any) => option.value));\n\t};\n\n\tconst updateSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {\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\n\t\tconst searchString = (e.target as HTMLInputElement).value;\n\t\tsetDisplayOptions(\n\t\t\tmappedOptions\n\t\t\t\t.filter((optionMap) => optionMap.option.toUpperCase().includes(searchString.toUpperCase()))\n\t\t\t\t.map((combination) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...combination,\n\t\t\t\t\t\toption: combination.option.replace(\n\t\t\t\t\t\t\tnew RegExp(`(${searchString})`, \"i\"),\n\t\t\t\t\t\t\t`<span class=\"highlight\">$1</span>`\n\t\t\t\t\t\t),\n\t\t\t\t\t};\n\t\t\t\t})\n\t\t);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"emperorSelectContainer\">\n\t\t\t\t{showSearch && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<FinsembleIcon className=\"searchIcon\" icon=\"search\"></FinsembleIcon>\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"Search\" aria-label=\"search\" className=\"search\" onInput={updateSearch} />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t<select aria-hidden=\"true\" className=\"shogunSelect\" multiple onChange={changeHandler}>\n\t\t\t\t\t{displayOptions.map(({ option, value }, index: number) => (\n\t\t\t\t\t\t<option key={`shogun-option-${index}`} value={value}>\n\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t))}\n\t\t\t\t</select>\n\t\t\t\t<div className=\"emperorSelect\" style={height === \"\" ? {} : { height }}>\n\t\t\t\t\t{displayOptions.map(({ option, value }, index: number) => (\n\t\t\t\t\t\t<div className=\"emperorOption\" key={`emperor-option-${index}`}>\n\t\t\t\t\t\t\t<label>\n\t\t\t\t\t\t\t\t<FinsembleToggle\n\t\t\t\t\t\t\t\t\tchecked={selectedOptions.includes(value) \|\| selected.includes(value)}\n\t\t\t\t\t\t\t\t\tonChange={() => {\n\t\t\t\t\t\t\t\t\t\tif (selectedOptions.includes(value) \|\| selected.includes(value)) {\n\t\t\t\t\t\t\t\t\t\t\tdoSetSelectedOptions(removeItem(selectedOptions, value));\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tdoSetSelectedOptions(selectedOptions.concat([value]));\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t></FinsembleToggle>\n\t\t\t\t\t\t\t\t{optionComponents?.[index] ? (\n\t\t\t\t\t\t\t\t\toptionComponents?.[index]\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<span dangerouslySetInnerHTML={{ __html: option }}></span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n"]}

package/react/components/common/FinsembleToggle.d.ts CHANGED Viewed

@@ -3,8 +3,7 @@ import "./css/toggle.css";
 export interface FinsembleToggleProps {
     label?: string;
     checked: boolean;
-    textToggle?: [onLabel: string, offLabel: string];
     onChange: (selected: boolean) => void;
     enabled?: boolean;
 }
-export declare const FinsembleToggle: ({ checked, onChange, label, enabled, textToggle }: FinsembleToggleProps) => JSX.Element;
+export declare const FinsembleToggle: ({ checked, onChange, label, enabled }: FinsembleToggleProps) => JSX.Element;

package/react/components/common/FinsembleToggle.js CHANGED Viewed

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from "react";
 import "./css/toggle.css";
 import { FinsembleIcon } from "./FinsembleIcon";
-export const FinsembleToggle = ({ checked, onChange, label, enabled = true, textToggle }) => {
+export const FinsembleToggle = ({ checked, onChange, label, enabled = true }) => {
     const [selected, setSelected] = useState(checked);
     function doSetSelected(newValue) {
         onChange(newValue);
         setSelected(newValue);
     }
-    const [yesLabel, noLabel] = textToggle !== null && textToggle !== void 0 ? textToggle : [];
     useEffect(() => {
         setSelected(checked);
     }, [checked]);
@@ -16,10 +15,7 @@ export const FinsembleToggle = ({ checked, onChange, label, enabled = true, text
             selected ? "finsembleToggle-on" : "finsembleToggle-off",
             !enabled ? "disabled" : "",
         ].join(" ") },
-        !textToggle && React.createElement(FinsembleIcon, { className: "finsembleToggle-icon", icon: selected ? "toggle-on" : "toggle-off" }),
-        textToggle && (React.createElement("span", { className: "toggle-text-label-wrapper" },
-            React.createElement("span", { className: "toggle-text-label toggle-text-label_on" }, yesLabel),
-            React.createElement("span", { className: "toggle-text-label toggle-text-label_off" }, noLabel))),
+        React.createElement(FinsembleIcon, { className: "finsembleToggle-icon", icon: selected ? "toggle-on" : "toggle-off" }),
         React.createElement("input", Object.assign({ type: "checkbox", onChange: (e) => {
                 doSetSelected(e.target.checked);
             }, checked: selected, disabled: !enabled }, (label ? { "aria-label": label } : "")))));

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

	@@ -1 +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;~~AAUhD~~,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,~~EAAE,UAAU,~~EAAwB,EAAE,EAAE;~~IACjH~~,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;~~IACD~~,~~MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,EAAE,CAAC;IAE7C,~~SAAS,CAAC,GAAG,EAAE;QACd,WAAW,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACN,8BACC,SAAS,EAAE;YACV,iBAAiB;YACjB,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB;YACvD,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAC1B,CAAC,IAAI,CAAC,GAAG,CAAC;~~QAEV~~,~~CAAC,UAAU,IAAI,~~oBAAC,aAAa,IAAC,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,GAAI;~~QAC9G~~,~~UAAU,IAAI,CACd,8BAAM,SAAS,EAAC,2BAA2B;YAC1C,8BAAM,SAAS,EAAE,wCAAwC,IAAG,QAAQ,CAAQ;YAC5E,8BAAM,SAAS,EAAE,yCAAyC,IAAG,OAAO,CAAQ,CACtE,CACP;QACD,~~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,EACjB,QAAQ,EAAE,CAAC,OAAO,IACd,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\";\nimport \"./css/toggle.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport interface FinsembleToggleProps {\n\tlabel?: string;\n\tchecked: boolean;\n\~~ttextToggle?: [onLabel: string, offLabel: string];\n\~~tonChange: (selected: boolean) => void;\n\tenabled?: boolean;\n}\n\nexport const FinsembleToggle = ({ checked, onChange, label, enabled = true, ~~textToggle~~ }: FinsembleToggleProps) => {\n\tconst [selected, setSelected] = useState(checked);\n\n\tfunction doSetSelected(newValue: boolean) {\n\t\tonChange(newValue);\n\t\tsetSelected(newValue);\n\t}\n\~~tconst [yesLabel, noLabel] = textToggle ?? [];\~~n\n\tuseEffect(() => {\n\t\tsetSelected(checked);\n\t}, [checked]);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={[\n\t\t\t\t\"finsembleToggle\",\n\t\t\t\tselected ? \"finsembleToggle-on\" : \"finsembleToggle-off\",\n\t\t\t\t!enabled ? \"disabled\" : \"\",\n\t\t\t].join(\" \")}\n\t\t>\n\t\t\t~~{!textToggle &&~~ <FinsembleIcon className=\"finsembleToggle-icon\" icon={selected ? \"toggle-on\" : \"toggle-off\"} ~~/>}\~~n\t\t\t~~{textToggle && (\n\t\t\t\t~~<span className=\"toggle-text-label-wrapper\">\n\t\t\t\t\t<span className={\"toggle-text-label toggle-text-label_on\"}>{yesLabel}</span>\n\t\t\t\t\t<span className={\"toggle-text-label toggle-text-label_off\"}>{noLabel}</span>\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tonChange={(e) => {\n\t\t\t\t\tdoSetSelected(e.target.checked);\n\t\t\t\t}}\n\t\t\t\tchecked={selected}\n\t\t\t\tdisabled={!enabled}\n\t\t\t\t{...(label ? { \"aria-label\": label } : \"\")}\n\t\t\t/>\n\t\t</span>\n\t);\n};\n"]}
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;AAShD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,EAAwB,EAAE,EAAE;IACrG,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,8BACC,SAAS,EAAE;YACV,iBAAiB;YACjB,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB;YACvD,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAC1B,CAAC,IAAI,CAAC,GAAG,CAAC;QAEX,oBAAC,aAAa,IAAC,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,GAAI;QAC/F,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,EACjB,QAAQ,EAAE,CAAC,OAAO,IACd,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\";\nimport \"./css/toggle.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport interface FinsembleToggleProps {\n\tlabel?: string;\n\tchecked: boolean;\n\tonChange: (selected: boolean) => void;\n\tenabled?: boolean;\n}\n\nexport const FinsembleToggle = ({ checked, onChange, label, enabled = true }: FinsembleToggleProps) => {\n\tconst [selected, setSelected] = useState(checked);\n\n\tfunction doSetSelected(newValue: boolean) {\n\t\tonChange(newValue);\n\t\tsetSelected(newValue);\n\t}\n\n\tuseEffect(() => {\n\t\tsetSelected(checked);\n\t}, [checked]);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={[\n\t\t\t\t\"finsembleToggle\",\n\t\t\t\tselected ? \"finsembleToggle-on\" : \"finsembleToggle-off\",\n\t\t\t\t!enabled ? \"disabled\" : \"\",\n\t\t\t].join(\" \")}\n\t\t>\n\t\t\t<FinsembleIcon className=\"finsembleToggle-icon\" icon={selected ? \"toggle-on\" : \"toggle-off\"} />\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tonChange={(e) => {\n\t\t\t\t\tdoSetSelected(e.target.checked);\n\t\t\t\t}}\n\t\t\t\tchecked={selected}\n\t\t\t\tdisabled={!enabled}\n\t\t\t\t{...(label ? { \"aria-label\": label } : \"\")}\n\t\t\t/>\n\t\t</span>\n\t);\n};\n"]}

package/react/components/common/FinsembleToggleButtonBar.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import React from "react";
+import "./css/FinsembleToggle.css";
+export interface FinsembleToggleButtonBarProps {
+    label?: string;
+    selected: any;
+    options: {
+        label: string | React.ReactChild;
+        value: any;
+    }[];
+    onChange: (newSelected: any) => void;
+    enabled?: boolean;
+}
+export declare const FinsembleToggleButtonBar: ({ selected, options, onChange, enabled, }: FinsembleToggleButtonBarProps) => JSX.Element;

package/react/components/common/FinsembleToggleButtonBar.js ADDED Viewed

@@ -0,0 +1,44 @@
+import React, { useRef } from "react";
+import "./css/FinsembleToggle.css";
+export const FinsembleToggleButtonBar = ({ selected, options, onChange, enabled = true, }) => {
+    const buttonList = useRef(null);
+    const changeButton = (fromKey, direction) => {
+        var _a, _b;
+        const buttons = (_a = buttonList.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[role='radio']");
+        if (buttons === undefined) {
+            return;
+        }
+        if (fromKey === buttons.length) {
+            return;
+        }
+        let newKey = fromKey + direction;
+        if (newKey < 0) {
+            newKey = buttons.length - 1;
+        }
+        else if (newKey >= buttons.length) {
+            newKey = 0;
+        }
+        (_b = buttons[fromKey + direction]) === null || _b === void 0 ? void 0 : _b.focus();
+    };
+    return (React.createElement("span", { className: "finsembleToggle" },
+        React.createElement("span", { className: "toggle-text-label-wrapper", role: "radiogroup", ref: buttonList }, options.map((option, key) => (React.createElement("span", { key: key, className: `toggle-text-label ${enabled ? "" : "disabled"} toggle-${key}`, role: "radio", "aria-checked": selected === option.value, tabIndex: selected === option.value && enabled ? 0 : -1, onClick: () => {
+                enabled && onChange(option.value);
+            }, onKeyDown: (e) => {
+                switch (e.key) {
+                    case "ArrowLeft": {
+                        changeButton(key, -1);
+                        break;
+                    }
+                    case "ArrowRight": {
+                        changeButton(key, 1);
+                        break;
+                    }
+                    case "Enter": {
+                        enabled && onChange(option.value);
+                    }
+                    default: {
+                    }
+                }
+            } }, option.label))))));
+};
+//# sourceMappingURL=FinsembleToggleButtonBar.js.map

package/react/components/common/FinsembleToggleButtonBar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FinsembleToggleButtonBar.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleToggleButtonBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,2BAA2B,CAAC;AAanC,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACxC,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,GAAG,IAAI,GACiB,EAAE,EAAE;IACnC,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,YAAY,GAAG,CAAC,OAAe,EAAE,SAAiB,EAAE,EAAE;;QAC3D,MAAM,OAAO,GAAG,MAAA,UAAU,CAAC,OAAO,0CAAE,gBAAgB,CAAC,gBAAgB,CAAwC,CAAC;QAC9G,IAAI,OAAO,KAAK,SAAS,EAAE;YAC1B,OAAO;SACP;QAED,IAAI,OAAO,KAAK,OAAO,CAAC,MAAM,EAAE;YAC/B,OAAO;SACP;QAED,IAAI,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;QACjC,IAAI,MAAM,GAAG,CAAC,EAAE;YACf,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;SAC5B;aAAM,IAAI,MAAM,IAAI,OAAO,CAAC,MAAM,EAAE;YACpC,MAAM,GAAG,CAAC,CAAC;SACX;QAED,MAAA,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC,0CAAE,KAAK,EAAE,CAAC;IACvC,CAAC,CAAC;IAEF,OAAO,CACN,8BAAM,SAAS,EAAC,iBAAiB;QAChC,8BAAM,SAAS,EAAC,2BAA2B,EAAC,IAAI,EAAC,YAAY,EAAC,GAAG,EAAE,UAAU,IAC3E,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7B,8BACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,qBAAqB,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,WAAW,GAAG,EAAE,EACzE,IAAI,EAAC,OAAO,kBACE,QAAQ,KAAK,MAAM,CAAC,KAAK,EACvC,QAAQ,EAAE,QAAQ,KAAK,MAAM,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACvD,OAAO,EAAE,GAAG,EAAE;gBACb,OAAO,IAAI,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,QAAQ,CAAC,CAAC,GAAG,EAAE;oBACd,KAAK,WAAW,CAAC,CAAC;wBACjB,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;wBACtB,MAAM;qBACN;oBACD,KAAK,YAAY,CAAC,CAAC;wBAClB,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;wBACrB,MAAM;qBACN;oBACD,KAAK,OAAO,CAAC,CAAC;wBACb,OAAO,IAAI,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;qBAClC;oBACD,OAAO,CAAC,CAAC;qBACR;iBACD;YACF,CAAC,IAEA,MAAM,CAAC,KAAK,CACP,CACP,CAAC,CACI,CACD,CACP,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useRef } from \"react\";\nimport \"./css/FinsembleToggle.css\";\n\nexport interface FinsembleToggleButtonBarProps {\n\tlabel?: string;\n\tselected: any; // <T>\n\toptions: {\n\t\tlabel: string | React.ReactChild;\n\t\tvalue: any; // <T>\n\t}[];\n\tonChange: (newSelected: any /* <T> */) => void;\n\tenabled?: boolean;\n}\n\nexport const FinsembleToggleButtonBar = ({\n\tselected,\n\toptions,\n\tonChange,\n\tenabled = true,\n}: FinsembleToggleButtonBarProps) => {\n\tconst buttonList = useRef<HTMLDivElement>(null);\n\n\tconst changeButton = (fromKey: number, direction: 1 | -1) => {\n\t\tconst buttons = buttonList.current?.querySelectorAll(\"[role='radio']\") as NodeListOf<HTMLElement> | undefined;\n\t\tif (buttons === undefined) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (fromKey === buttons.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet newKey = fromKey + direction;\n\t\tif (newKey < 0) {\n\t\t\tnewKey = buttons.length - 1;\n\t\t} else if (newKey >= buttons.length) {\n\t\t\tnewKey = 0;\n\t\t}\n\n\t\tbuttons[fromKey + direction]?.focus();\n\t};\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{options.map((option, key) => (\n\t\t\t\t\t<span\n\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\tclassName={`toggle-text-label ${enabled ? \"\" : \"disabled\"} toggle-${key}`}\n\t\t\t\t\t\trole=\"radio\"\n\t\t\t\t\t\taria-checked={selected === option.value}\n\t\t\t\t\t\ttabIndex={selected === option.value && enabled ? 0 : -1}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tenabled && onChange(option.value);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\tswitch (e.key) {\n\t\t\t\t\t\t\t\tcase \"ArrowLeft\": {\n\t\t\t\t\t\t\t\t\tchangeButton(key, -1);\n\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tcase \"ArrowRight\": {\n\t\t\t\t\t\t\t\t\tchangeButton(key, 1);\n\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tcase \"Enter\": {\n\t\t\t\t\t\t\t\t\tenabled && onChange(option.value);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tdefault: {\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\n\t\t\t\t))}\n\t\t\t\n\t\t\n\t);\n};\n"]}

package/react/components/common/InputTable.d.ts CHANGED Viewed

@@ -5,7 +5,14 @@
 /// <reference types="react" />
 export declare type InputTableProps = {
     tableHeaders: (string | JSX.Element)[];
-    onUpdate: (data: string[][]) => void;
-    startingData?: (string | undefined)[][];
+    setData: (data: string[][]) => void;
+    data: string[][];
 };
-export declare const InputTable: ({ tableHeaders, onUpdate, startingData }: InputTableProps) => JSX.Element;
+/***
+ * A table full on input fields. It auto-grows as users use it, and it provides "Remove row" functionality.
+ * The number of columns in the table is determined by the number of table headers provided, which are required.
+ * @param {string|JSX} tableHeaders The headers at the top of each column
+ * @param {Function} onUpdate Callback providing the data in the table. This is called onInput for any input element in the table.
+ * @param {string[][]} [data] Initial data for the table
+ */
+export declare const InputTable: ({ tableHeaders, setData, data }: InputTableProps) => JSX.Element;