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

package/react/components/common/Checkbox.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { FinsembleIcon } from "./FinsembleIcon";
 import "./css/checkbox.css";
-export const Checkbox = ({ checked = false, disabled = false, label = "", onClick = () => { }, }) => {
+export const Checkbox = ({ checked = false, disabled = false, label = "", showLabel = true, onClick = () => { }, }) => {
     let checkboxClasses = "complex-menu-checkbox";
     if (checked) {
         checkboxClasses = `${checkboxClasses} checked`;
@@ -19,6 +19,6 @@ export const Checkbox = ({ checked = false, disabled = false, label = "", onClic
             }
         } },
         React.createElement("div", { className: checkboxClasses }, checked && React.createElement(FinsembleIcon, { icon: "check" })),
-        React.createElement("div", { className: "complex-menu-checkbox-label" }, label)));
+        showLabel && React.createElement("div", { className: "complex-menu-checkbox-label" }, label)));
 };
 //# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/common/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,oBAAoB,CAAC;AAS5B,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EACjD,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GAClB,EAAE,EAAE;IACJ,IAAI,eAAe,GAAG,uBAAuB,CAAC;IAC9C,IAAI,OAAO,EAAE;QACZ,eAAe,GAAG,GAAG,eAAe,UAAU,CAAC;KAC/C;IACD,IAAI,KAAK,GAAG,EAAE,CAAC;IACf,IAAI,QAAQ,EAAE;QACb,KAAK,GAAG;YACP,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,IAAI;SACb,CAAC;KACF;IACD,OAAO,CACN,6BACC,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,UAAU,kBACD,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,OAAO,EACtC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gBACvC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;aACxB;QACF,CAAC;QAED,6BAAK,SAAS,EAAE,eAAe,IAAG,OAAO,IAAI,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,GAAG,CAAO;QAClF,6BAAK,SAAS,EAAC,6BAA6B,IAAE,KAAK,CAAO,CACrD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\nimport \"./css/checkbox.css\";\n\nexport interface CheckboxProps {\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\tlabel?: string;\n\tonClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n\tchecked = false,\n\tdisabled = false,\n\tlabel = \"\",\n\tonClick = () => {},\n}) => {\n\tlet checkboxClasses = \"complex-menu-checkbox\";\n\tif (checked) {\n\t\tcheckboxClasses = `${checkboxClasses} checked`;\n\t}\n\tlet style = {};\n\tif (disabled) {\n\t\tstyle = {\n\t\t\tcursor: \"default\",\n\t\t\topacity: \".3\",\n\t\t};\n\t}\n\treturn (\n\t\t<div\n\t\t\tstyle={style}\n\t\t\tclassName=\"complex-menu-checkbox-wrapper\"\n\t\t\trole=\"checkbox\"\n\t\t\taria-checked={checked}\n\t\t\taria-label={label}\n\t\t\ttabIndex={0}\n\t\t\tonClick={disabled ? () => {} : onClick}\n\t\t\tonKeyDown={(e) => {\n\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\t\t!disabled && onClick(e);\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<div className={checkboxClasses}>{checked && <FinsembleIcon icon=\"check\" />}</div>\n\t\t\t<div className=\"complex-menu-checkbox-label\">{label}</div>\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/common/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,oBAAoB,CAAC;AAU5B,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EACjD,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,IAAI,EAChB,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GAClB,EAAE,EAAE;IACJ,IAAI,eAAe,GAAG,uBAAuB,CAAC;IAC9C,IAAI,OAAO,EAAE;QACZ,eAAe,GAAG,GAAG,eAAe,UAAU,CAAC;KAC/C;IACD,IAAI,KAAK,GAAG,EAAE,CAAC;IACf,IAAI,QAAQ,EAAE;QACb,KAAK,GAAG;YACP,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,IAAI;SACb,CAAC;KACF;IACD,OAAO,CACN,6BACC,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,UAAU,kBACD,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,OAAO,EACtC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gBACvC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;aACxB;QACF,CAAC;QAED,6BAAK,SAAS,EAAE,eAAe,IAAG,OAAO,IAAI,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,GAAG,CAAO;QACjF,SAAS,IAAI,6BAAK,SAAS,EAAC,6BAA6B,IAAE,KAAK,CAAO,CACnE,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\nimport \"./css/checkbox.css\";\n\nexport interface CheckboxProps {\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\tlabel?: string;\n\tshowLabel?: boolean;\n\tonClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n\tchecked = false,\n\tdisabled = false,\n\tlabel = \"\",\n\tshowLabel = true,\n\tonClick = () => {},\n}) => {\n\tlet checkboxClasses = \"complex-menu-checkbox\";\n\tif (checked) {\n\t\tcheckboxClasses = `${checkboxClasses} checked`;\n\t}\n\tlet style = {};\n\tif (disabled) {\n\t\tstyle = {\n\t\t\tcursor: \"default\",\n\t\t\topacity: \".3\",\n\t\t};\n\t}\n\treturn (\n\t\t<div\n\t\t\tstyle={style}\n\t\t\tclassName=\"complex-menu-checkbox-wrapper\"\n\t\t\trole=\"checkbox\"\n\t\t\taria-checked={checked}\n\t\t\taria-label={label}\n\t\t\ttabIndex={0}\n\t\t\tonClick={disabled ? () => {} : onClick}\n\t\t\tonKeyDown={(e) => {\n\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\t\t!disabled && onClick(e);\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<div className={checkboxClasses}>{checked && <FinsembleIcon icon=\"check\" />}</div>\n\t\t\t{showLabel && <div className=\"complex-menu-checkbox-label\">{label}</div>}\n\t\t</div>\n\t);\n};\n"]}

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

@@ -12,4 +12,9 @@ export interface ColorPickerProps {
     updateColor: (newColor: string) => void;
     id?: string;
 }
+/**
+ * ColorPicker component to update theme variables.  Displays a browser color input alongside a text version for hex color values.
+ *
+ * @param {{ [id]: string, startColor: string; updateColor: function }} { id, startColor, callback }
+ */
 export declare const ColorPicker: ({ id, startColor, updateColor }: ColorPickerProps) => JSX.Element;

package/react/components/common/ColorPicker.js

@@ -8,7 +8,14 @@ export var RGBA_CHANNEL;
     RGBA_CHANNEL[RGBA_CHANNEL["BLUE"] = 2] = "BLUE";
     RGBA_CHANNEL[RGBA_CHANNEL["ALPHA"] = 3] = "ALPHA";
 })(RGBA_CHANNEL || (RGBA_CHANNEL = {}));
+// From https://stackoverflow.com/a/24390910
 export function colorToRGBA(color) {
+    // Returns the color as an array of [r, g, b, a] -- all range from 0 - 255
+    // color must be a valid canvas fillStyle. This will cover most anything
+    // you'd want to use.
+    // Examples:
+    // colorToRGBA('red')  # [255, 0, 0, 255]
+    // colorToRGBA('#f00') # [255, 0, 0, 255]
     const cvs = document.createElement("canvas");
     cvs.height = 1;
     cvs.width = 1;
@@ -18,9 +25,15 @@ export function colorToRGBA(color) {
     return ctx.getImageData(0, 0, 1, 1).data;
 }
 function byteToHex(num) {
+    // Turns a number (0-255) into a 2-character hex number (00-ff)
     return `0${num.toString(16)}`.slice(-2);
 }
 function colorToHex(color) {
+    // Convert any CSS color to a hex representation
+    // Examples:
+    // colorToHex('red')            # '#ff0000'
+    // colorToHex('rgb(255, 0, 0)') # '#ff0000'
+    // colorToHex('#ff0000') # '#ff0000'
     if (color.match(RE_HEX_COLOR) !== null) {
         return color;
     }
@@ -28,18 +41,45 @@ function colorToHex(color) {
     const hex = [0, 1, 2].map((idx) => byteToHex(rgba[idx])).join("");
     return `#${hex}`;
 }
+/**
+ * ColorPicker component to update theme variables.  Displays a browser color input alongside a text version for hex color values.
+ *
+ * @param {{ [id]: string, startColor: string; updateColor: function }} { id, startColor, callback }
+ */
 export const ColorPicker = ({ id, startColor, updateColor }) => {
+    /**
+     * There is a delicate ballet here between the color picket and the input box. This is because this color picker
+     * has state (when the end user is in the midst of picking a color by editing the input field) and also
+     * receives state (via props). When prop startColor is received, it overrides the input box. But when the user is editing,
+     * the input box overrides the prop.
+     */
     const [priorColor, setPriorColor] = useState(startColor);
+    /**
+     * inputValue state is set _whenever the user is editing the input box_. Only at this time, the value in the input
+     * box reflects the user's editing. If at any point the editing yields a valid color then it is immediately
+     * passed up as an action, which updates the screen and resets the startColor prop. Whenever an invalid color has
+     * been entered, the value is flagged invalid which causes the input box to be underlined red.
+     */
     const [inputValue, setInputValue] = useState(null);
+    /**
+     * If the value of the startColor prop changes then we reset the input to the new color. This occurs for instance
+     * when the user presses the light or dark themes on the theme page. At that point, the parent sends new values
+     * down to all color pickers as a new prop.
+     */
     if (priorColor !== startColor) {
         setPriorColor(startColor);
         setInputValue(null);
     }
+    // If the value in the input box isn't valid then give UI feedback
     const isValid = inputValue === null || inputValue.match(RE_HEX_COLOR) !== null;
+    // The swatch always displays the current color from prop. This won't change
+    // until a valid alternative color is picked.
     const color = colorToHex(startColor);
     const onColorChanged = ({ target }) => {
         const maybeNewColor = target.value;
+        // Update the value in the input box
         setInputValue(maybeNewColor);
+        // If the color is valid then send an update
         const isNewValueValid = maybeNewColor.match(RE_HEX_COLOR) !== null;
         if (isNewValueValid) {
             updateColor(maybeNewColor);

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

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

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

@@ -8,4 +8,15 @@ export declare type DropZoneProps = {
     processFile: (fileObj: FileWithPath, index: number) => void;
     suppress?: boolean;
 };
+/***
+ * Component that serves as a drop zone. It also keeps track of visual concerns and event handlers for
+ * drag-and-drop.
+ *
+ * The DropZone component is intended to be a container element for other elements, such as text, lists,
+ * images, input elements, etc.
+ *
+ * @callback processFile - This function will be called for each file that is dropped in the dropzone.
+ * @param {ReactNode} children - React will fill this in.
+ * @param {boolean} suppress=false - If the dropzone-ness should be suppressed, which would turn this container into just a div
+ */
 export declare const DropZone: ({ processFile, children, suppress }: DropZoneProps) => JSX.Element;

package/react/components/common/DropZone.js

@@ -1,5 +1,16 @@
 import React, { useState } from "react";
 import "./css/drop-zone.css";
+/***
+ * Component that serves as a drop zone. It also keeps track of visual concerns and event handlers for
+ * drag-and-drop.
+ *
+ * The DropZone component is intended to be a container element for other elements, such as text, lists,
+ * images, input elements, etc.
+ *
+ * @callback processFile - This function will be called for each file that is dropped in the dropzone.
+ * @param {ReactNode} children - React will fill this in.
+ * @param {boolean} suppress=false - If the dropzone-ness should be suppressed, which would turn this container into just a div
+ */
 export const DropZone = ({ processFile, children, suppress = false }) => {
     const [isDragging, setIsDragging] = useState(false);
     const [potential, setPotential] = useState(false);
@@ -8,17 +19,26 @@ export const DropZone = ({ processFile, children, suppress = false }) => {
         e.preventDefault();
         e.stopPropagation();
     };
+    // Check if something is being dragged somewhere on the page
+    // If dragging is happening on the page, there will be a visual indication for potential drop zone
     if (singleton) {
+        // "dragenter" and "dragleave" events are fired off of every single child element, and counting them isn't reliable
+        // so, when "dragover" events are fired, we know dragging is happening.
+        // we will wait 100ms after the last "dragover" event is fired, and then turn off the potential zone.
         let timeout = null;
         document.addEventListener("dragover", (e) => {
             preventDefaults(e);
             setPotential(true);
+            // If timeout was previously set, clear it
             if (timeout !== null) {
                 clearTimeout(timeout);
             }
+            // Set a new timeout, now that we've gotten a new dragover event
             timeout = setTimeout(() => {
+                // If it's been 100ms and no dragover event has been fired, assume the user isn't dragging anymore.
                 setPotential(false);
-            }, 100);
+            }, 100); // 100ms was chosen by trial and error.
+            // 10ms was too little time, and caused flicker. 100ms doesn't have a flicker, and turns off potential without a noticeable delay
         });
         setSingleton(false);
     }

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,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,MAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACtD,MAAM,aAAa,GAAG,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC;IAEjE,OAAO,QAAQ,CAAC,CAAC,CAAC,CACjB,0CAAG,QAAQ,CAAI,CACf,CAAC,CAAC,CAAC,CACH,6BACC,SAAS,EAAE,YAAY,aAAa,EAAE,EACtC,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\";\nimport \"./css/drop-zone.css\";\n\n// Electron adds File.path\nexport type FileWithPath = File & { path?: string };\n\nexport type DropZoneProps = {\n\tchildren: React.ReactNode;\n\tprocessFile: (fileObj: FileWithPath, index: number) => void;\n\tsuppress?: boolean;\n};\n\n/***\n * Component that serves as a drop zone. It also keeps track of visual concerns and event handlers for\n * drag-and-drop.\n *\n * The DropZone component is intended to be a container element for other elements, such as text, lists,\n * images, input elements, etc.\n *\n * @callback processFile - This function will be called for each file that is dropped in the dropzone.\n * @param {ReactNode} children - React will fill this in.\n * @param {boolean} suppress=false - If the dropzone-ness should be suppressed, which would turn this container into just a div\n */\nexport const DropZone = ({ processFile, children, suppress = false }: DropZoneProps) => {\n\tconst [isDragging, setIsDragging] = useState(false);\n\tconst [potential, setPotential] = useState(false);\n\tconst [singleton, setSingleton] = useState(true);\n\n\tconst preventDefaults = (e: { preventDefault: Function; stopPropagation: Function }) => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t};\n\n\t// Check if something is being dragged somewhere on the page\n\t// If dragging is happening on the page, there will be a visual indication for potential drop zone\n\tif (singleton) {\n\t\t// \"dragenter\" and \"dragleave\" events are fired off of every single child element, and counting them isn't reliable\n\t\t// so, when \"dragover\" events are fired, we know dragging is happening.\n\t\t// we will wait 100ms after the last \"dragover\" event is fired, and then turn off the potential zone.\n\t\tlet timeout: NodeJS.Timeout | null = null;\n\t\tdocument.addEventListener(\"dragover\", (e) => {\n\t\t\tpreventDefaults(e);\n\t\t\tsetPotential(true);\n\n\t\t\t// If timeout was previously set, clear it\n\t\t\tif (timeout !== null) {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t}\n\n\t\t\t// Set a new timeout, now that we've gotten a new dragover event\n\t\t\ttimeout = setTimeout(() => {\n\t\t\t\t// If it's been 100ms and no dragover event has been fired, assume the user isn't dragging anymore.\n\t\t\t\tsetPotential(false);\n\t\t\t}, 100); // 100ms was chosen by trial and error.\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\n\t\t});\n\t\tsetSingleton(false);\n\t}\n\n\tconst isPotentialStr = potential ? \"isPotential\" : \"\";\n\tconst isDraggingStr = isDragging ? \"isDragging\" : isPotentialStr;\n\n\treturn suppress ? (\n\t\t<>{children}</>\n\t) : (\n\t\t<div\n\t\t\tclassName={`dropZone ${isDraggingStr}`}\n\t\t\tonDragEnter={(e) => {\n\t\t\t\tpreventDefaults(e);\n\t\t\t\tsetIsDragging(true);\n\t\t\t}}\n\t\t\tonDragLeave={(e) => {\n\t\t\t\tpreventDefaults(e);\n\t\t\t\tsetIsDragging(false);\n\t\t\t}}\n\t\t\tonDrop={(e) => {\n\t\t\t\tsetIsDragging(false);\n\n\t\t\t\tconst { files } = e.dataTransfer;\n\t\t\t\tfor (let i = 0; i < files.length; i++) {\n\t\t\t\t\tif (files[i] === null) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t\tprocessFile(files[i], i);\n\t\t\t\t}\n\n\t\t\t\tpreventDefaults(e);\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\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;AAW7B;;;;;;;;;;GAUG;AACH,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;IAEF,4DAA4D;IAC5D,kGAAkG;IAClG,IAAI,SAAS,EAAE;QACd,mHAAmH;QACnH,uEAAuE;QACvE,qGAAqG;QACrG,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;YAEnB,0CAA0C;YAC1C,IAAI,OAAO,KAAK,IAAI,EAAE;gBACrB,YAAY,CAAC,OAAO,CAAC,CAAC;aACtB;YAED,gEAAgE;YAChE,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACzB,mGAAmG;gBACnG,YAAY,CAAC,KAAK,CAAC,CAAC;YACrB,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,uCAAuC;YAChD,iIAAiI;QAClI,CAAC,CAAC,CAAC;QACH,YAAY,CAAC,KAAK,CAAC,CAAC;KACpB;IAED,MAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACtD,MAAM,aAAa,GAAG,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC;IAEjE,OAAO,QAAQ,CAAC,CAAC,CAAC,CACjB,0CAAG,QAAQ,CAAI,CACf,CAAC,CAAC,CAAC,CACH,6BACC,SAAS,EAAE,YAAY,aAAa,EAAE,EACtC,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\";\nimport \"./css/drop-zone.css\";\n\n// Electron adds File.path\nexport type FileWithPath = File & { path?: string };\n\nexport type DropZoneProps = {\n\tchildren: React.ReactNode;\n\tprocessFile: (fileObj: FileWithPath, index: number) => void;\n\tsuppress?: boolean;\n};\n\n/***\n * Component that serves as a drop zone. It also keeps track of visual concerns and event handlers for\n * drag-and-drop.\n *\n * The DropZone component is intended to be a container element for other elements, such as text, lists,\n * images, input elements, etc.\n *\n * @callback processFile - This function will be called for each file that is dropped in the dropzone.\n * @param {ReactNode} children - React will fill this in.\n * @param {boolean} suppress=false - If the dropzone-ness should be suppressed, which would turn this container into just a div\n */\nexport const DropZone = ({ processFile, children, suppress = false }: DropZoneProps) => {\n\tconst [isDragging, setIsDragging] = useState(false);\n\tconst [potential, setPotential] = useState(false);\n\tconst [singleton, setSingleton] = useState(true);\n\n\tconst preventDefaults = (e: { preventDefault: Function; stopPropagation: Function }) => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t};\n\n\t// Check if something is being dragged somewhere on the page\n\t// If dragging is happening on the page, there will be a visual indication for potential drop zone\n\tif (singleton) {\n\t\t// \"dragenter\" and \"dragleave\" events are fired off of every single child element, and counting them isn't reliable\n\t\t// so, when \"dragover\" events are fired, we know dragging is happening.\n\t\t// we will wait 100ms after the last \"dragover\" event is fired, and then turn off the potential zone.\n\t\tlet timeout: NodeJS.Timeout | null = null;\n\t\tdocument.addEventListener(\"dragover\", (e) => {\n\t\t\tpreventDefaults(e);\n\t\t\tsetPotential(true);\n\n\t\t\t// If timeout was previously set, clear it\n\t\t\tif (timeout !== null) {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t}\n\n\t\t\t// Set a new timeout, now that we've gotten a new dragover event\n\t\t\ttimeout = setTimeout(() => {\n\t\t\t\t// If it's been 100ms and no dragover event has been fired, assume the user isn't dragging anymore.\n\t\t\t\tsetPotential(false);\n\t\t\t}, 100); // 100ms was chosen by trial and error.\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\n\t\t});\n\t\tsetSingleton(false);\n\t}\n\n\tconst isPotentialStr = potential ? \"isPotential\" : \"\";\n\tconst isDraggingStr = isDragging ? \"isDragging\" : isPotentialStr;\n\n\treturn suppress ? (\n\t\t<>{children}</>\n\t) : (\n\t\t<div\n\t\t\tclassName={`dropZone ${isDraggingStr}`}\n\t\t\tonDragEnter={(e) => {\n\t\t\t\tpreventDefaults(e);\n\t\t\t\tsetIsDragging(true);\n\t\t\t}}\n\t\t\tonDragLeave={(e) => {\n\t\t\t\tpreventDefaults(e);\n\t\t\t\tsetIsDragging(false);\n\t\t\t}}\n\t\t\tonDrop={(e) => {\n\t\t\t\tsetIsDragging(false);\n\n\t\t\t\tconst { files } = e.dataTransfer;\n\t\t\t\tfor (let i = 0; i < files.length; i++) {\n\t\t\t\t\tif (files[i] === null) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t\tprocessFile(files[i], i);\n\t\t\t\t}\n\n\t\t\t\tpreventDefaults(e);\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"]}

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

@@ -6,5 +6,9 @@ export interface IFinsembleDropdownActionButtonProps {
     buttonOptions: Array<IFinsembleButtonProps>;
     mainAction: Function;
 }
+/**
+ * @TODO: Consolidate this and DefaultDropDownButton and change all usages to use DefaultDropDownButton.
+ * @deprecated Use DefaultDropDownButton instead.
+ */
 declare const DropdownButton: React.FunctionComponent<IFinsembleDropdownActionButtonProps>;
 export default DropdownButton;

package/react/components/common/DropdownButton.js

@@ -1,6 +1,10 @@
 import React, { useState, useRef } from "react";
 import "../../assets/css/button.css";
 import { useOutsideClickDetector } from "../../hooks/useOutsideClickDetector";
+/**
+ * @TODO: Consolidate this and DefaultDropDownButton and change all usages to use DefaultDropDownButton.
+ * @deprecated Use DefaultDropDownButton instead.
+ */
 const DropdownButton = ({ buttonLabel = "Label", buttonOptions = [], mainAction, }) => {
     const wrapperRef = useRef(null);
     const [expanded, setExpanded] = useState(false);

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;AAa9E,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\";\nimport \"../../assets/css/button.css\";\nimport { useOutsideClickDetector } from \"../../hooks/useOutsideClickDetector\";\nimport { IFinsembleButtonProps } from \"../shared/Button\";\n\nexport interface IFinsembleDropdownActionButtonProps {\n\tbuttonLabel: string;\n\tbuttonOptions: Array<IFinsembleButtonProps>;\n\tmainAction: Function;\n}\n\n/**\n * @TODO: Consolidate this and DefaultDropDownButton and change all usages to use DefaultDropDownButton.\n * @deprecated Use DefaultDropDownButton instead.\n */\nconst DropdownButton: React.FunctionComponent<IFinsembleDropdownActionButtonProps> = ({\n\tbuttonLabel = \"Label\",\n\tbuttonOptions = [],\n\tmainAction,\n}: IFinsembleDropdownActionButtonProps) => {\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\tconst [expanded, setExpanded] = useState(false);\n\n\tuseOutsideClickDetector(wrapperRef, () => setExpanded(false));\n\n\tconst options = buttonOptions.map((option, index) => (\n\t\t<div\n\t\t\tkey={index}\n\t\t\tclassName=\"finsemble-dropdown-action__btn-option\"\n\t\t\tonClick={() => {\n\t\t\t\toption.clickHandler();\n\t\t\t\tsetExpanded(false);\n\t\t\t}}\n\t\t>\n\t\t\t{option.buttonLabel}\n\t\t</div>\n\t));\n\n\tconst buttonAction = () => {\n\t\tif (expanded) {\n\t\t\tsetExpanded(false);\n\t\t\treturn;\n\t\t}\n\n\t\tif (mainAction) {\n\t\t\tmainAction();\n\t\t} else {\n\t\t\t() => setExpanded(!expanded);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div ref={wrapperRef} className=\"finsemble-dropdown-action__btn-container\">\n\t\t\t<div className=\"finsemble-dropdown-action__btn\">\n\t\t\t\t<span className=\"btn-label\" onClick={buttonAction}>\n\t\t\t\t\t{buttonLabel}\n\t\t\t\t</span>\n\t\t\t\t<span className=\"separator\"></span>\n\t\t\t\t<div className=\"expand-options\" onClick={() => setExpanded(!expanded)}>\n\t\t\t\t\t<span className=\"caret\"></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{expanded ? <div className=\"finsemble-dropdown-action__btn-options\">{options}</div> : null}\n\t\t</div>\n\t);\n};\n\nexport default DropdownButton;\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;;;GAGG;AACH,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\";\nimport \"../../assets/css/button.css\";\nimport { useOutsideClickDetector } from \"../../hooks/useOutsideClickDetector\";\nimport { IFinsembleButtonProps } from \"../shared/Button\";\n\nexport interface IFinsembleDropdownActionButtonProps {\n\tbuttonLabel: string;\n\tbuttonOptions: Array<IFinsembleButtonProps>;\n\tmainAction: Function;\n}\n\n/**\n * @TODO: Consolidate this and DefaultDropDownButton and change all usages to use DefaultDropDownButton.\n * @deprecated Use DefaultDropDownButton instead.\n */\nconst DropdownButton: React.FunctionComponent<IFinsembleDropdownActionButtonProps> = ({\n\tbuttonLabel = \"Label\",\n\tbuttonOptions = [],\n\tmainAction,\n}: IFinsembleDropdownActionButtonProps) => {\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\tconst [expanded, setExpanded] = useState(false);\n\n\tuseOutsideClickDetector(wrapperRef, () => setExpanded(false));\n\n\tconst options = buttonOptions.map((option, index) => (\n\t\t<div\n\t\t\tkey={index}\n\t\t\tclassName=\"finsemble-dropdown-action__btn-option\"\n\t\t\tonClick={() => {\n\t\t\t\toption.clickHandler();\n\t\t\t\tsetExpanded(false);\n\t\t\t}}\n\t\t>\n\t\t\t{option.buttonLabel}\n\t\t</div>\n\t));\n\n\tconst buttonAction = () => {\n\t\tif (expanded) {\n\t\t\tsetExpanded(false);\n\t\t\treturn;\n\t\t}\n\n\t\tif (mainAction) {\n\t\t\tmainAction();\n\t\t} else {\n\t\t\t() => setExpanded(!expanded);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div ref={wrapperRef} className=\"finsemble-dropdown-action__btn-container\">\n\t\t\t<div className=\"finsemble-dropdown-action__btn\">\n\t\t\t\t<span className=\"btn-label\" onClick={buttonAction}>\n\t\t\t\t\t{buttonLabel}\n\t\t\t\t</span>\n\t\t\t\t<span className=\"separator\"></span>\n\t\t\t\t<div className=\"expand-options\" onClick={() => setExpanded(!expanded)}>\n\t\t\t\t\t<span className=\"caret\"></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{expanded ? <div className=\"finsemble-dropdown-action__btn-options\">{options}</div> : null}\n\t\t</div>\n\t);\n};\n\nexport default DropdownButton;\n"]}

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

@@ -5,6 +5,24 @@ declare type ErrorBoundaryProps = {
 declare type ErrorBoundaryState = {
     hasError: boolean;
 };
+/**
+ * Something like a try catch in React component form with some exceptions. Catches Errors and logs them to the central
+ * logger. Prevents uncaught exceptions on the render of child components from unintentionally breaking the entire UI.
+ * Has the added benefit of sending the errors to the Central Logger
+ *
+ * Note: The exceptions are that it not catch errors in Event handlers and Asynchronous code.
+ * Note: This does not catch errors in the current component directly, only child components. See below for example
+ *
+ * Eg: WON'T WORK
+ *
+ * const ContainerComponent = ({test}:any) => <ErrorBoundary><div>{test.undefined.length}</div></ErrorBoundary>
+ *
+ * WILL WORK:
+ * const BrokenComponent = ({test}:any) => <div>{test.undefined.length}</div>
+ * const ContainerComponent = ({test}:any) => <ErrorBoundary><BrokenComponent test={test}/></ErrorBoundary>
+ *
+ * @see https://reactjs.org/docs/error-boundaries.html for more information on Error Boundaries
+ */
 export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
     constructor(props: ErrorBoundaryProps);
     static getDerivedStateFromError(error: Error): {

package/react/components/common/ErrorBoundary.js

@@ -1,19 +1,40 @@
 import React from "react";
+/**
+ * Something like a try catch in React component form with some exceptions. Catches Errors and logs them to the central
+ * logger. Prevents uncaught exceptions on the render of child components from unintentionally breaking the entire UI.
+ * Has the added benefit of sending the errors to the Central Logger
+ *
+ * Note: The exceptions are that it not catch errors in Event handlers and Asynchronous code.
+ * Note: This does not catch errors in the current component directly, only child components. See below for example
+ *
+ * Eg: WON'T WORK
+ *
+ * const ContainerComponent = ({test}:any) => <ErrorBoundary><div>{test.undefined.length}</div></ErrorBoundary>
+ *
+ * WILL WORK:
+ * const BrokenComponent = ({test}:any) => <div>{test.undefined.length}</div>
+ * const ContainerComponent = ({test}:any) => <ErrorBoundary><BrokenComponent test={test}/></ErrorBoundary>
+ *
+ * @see https://reactjs.org/docs/error-boundaries.html for more information on Error Boundaries
+ */
 export class ErrorBoundary extends React.Component {
     constructor(props) {
         super(props);
         this.state = { hasError: false };
     }
     static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
         return { hasError: true };
     }
     componentDidCatch(error, errorInfo) {
+        // Log the error to the dev tools where developers will expect it but also send it to the central logger
         console.error(error, errorInfo);
         FSBL.Clients.Logger.system.error(error, errorInfo);
     }
     render() {
         var _a;
         if (this.state.hasError) {
+            // Render custom fallback UI or default to nothing
             return (_a = this.props.fallBackUI) !== null && _a !== void 0 ? _a : React.createElement(React.Fragment, null);
         }
         return this.props.children;

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

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

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

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

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

@@ -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"]}
+{"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

@@ -7,4 +7,14 @@ export declare type FinsembleIconProps = {
     onClick?: (e: React.MouseEvent) => void;
     label?: string;
 };
+/**
+ * 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

@@ -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,7 +28,7 @@ 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";
@@ -37,9 +39,46 @@ import { ReactComponent as ToggleOffIcon } from "../../assets/icons/toggle-off.s
 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,
@@ -82,6 +121,16 @@ const icons = {
     upload: UploadIcon,
     window: WindowIcon,
 };
+/**
+ * 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