@finsemble/finsemble-ui 7.2.1 → 8.0.0-beta.1

package/react/componentTemplateGenerator.js

@@ -1,150 +0,0 @@
-"use strict";
-const fs = require("fs");
-const path = require("path");
-const args = process.argv.slice(2);
-let file = "";
-let name = "MyComponent";
-// Stupid simple args parser
-for (let i = 0; i < args.length; i++) {
-    switch (args[i]) {
-        case "--file": {
-            file = args[++i];
-            break;
-        }
-        case "--name": {
-            name = args[++i];
-            break;
-        }
-        default: {
-            console.log(`Unknown flag: ${args[i]}`);
-        }
-    }
-}
-if (file === "") {
-    console.log("Error: no provided file");
-    return;
-}
-const prepRelativeLink = (from, to) => path
-    .relative(from, to)
-    .replace(/\\/g, "/") // swap the slashes
-    .replace("../", ""); // path.relative adds an extra "../" for some reason, so remove it
-const base_path = path.join("src", "components", file);
-const component_file = `${base_path}.tsx`;
-const story_file = `${base_path}.stories.tsx`;
-const test_file = `${base_path}.spec.tsx`;
-const parsed_component_file = path.parse(component_file);
-const { dir } = parsed_component_file;
-if (!fs.existsSync(dir)) {
-    console.log(`Target directory, ${path.relative(".", dir)}, does not exist`);
-    return;
-}
-const component_template = `
-import React from "react";
-
-export interface ${name}Props {
-    example: string;
-    onClick: () => void;
-};
-
-export const ${name}: React.FunctionComponent<${name}Props> = (props: ${name}Props) => {
-    // Do things
-    return (
-        <div>
-            <button onClick={props.onClick}>{props.example}</button>
-        </div>
-    );
-};
-`;
-const story_template = `
-import React from "react";
-import { ${name}, ${name}Props } from "./${parsed_component_file.name}";
-import { Story } from "@storybook/react/types-6-0";
-import { action } from "@storybook/addon-actions";
-import "${prepRelativeLink(story_file, "./src/assets/css/finsemble.css")}";
-
-export default {
-    title: "${name}",
-    component: ${name}
-};
-
-const Template: Story<${name}Props> = (args: ${name}Props) => <${name} {...args} />;
-
-export const BasicStory = Template.bind({});
-BasicStory.args = {
-    example: "My Example",
-    onClick: action("Clicked")
-};
-`;
-const test_template = `
-import * as React from "react";
-import { mount } from "enzyme";
-import { describe, it, afterEach } from "mocha";
-import { expect } from "chai";
-import { ${name}Props } from "./${path.parse(component_file).name}";
-import { BasicStory } from "./${path.parse(component_file).name}.stories";
-
-// For running accessibility scans
-import { accessibilityAssessor } from "${prepRelativeLink(test_file, "./src/components/sdd/tests/a11y_helper")}";
-
-// For testing user interactions (like click events):
-import sinon from "sinon";
-// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)
-import addons, { mockChannel } from "@storybook/addons";
-addons.setChannel(mockChannel());
-
-describe("<${name}/>", () => {
-    // Used to clear after each interactive test using sinon
-    afterEach(() => {
-        sinon.restore();
-    });
-
-    // Example basic test
-    it("should display text", () => {
-        const wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);
-
-        expect(wrapper.find("button").exists(), "The button exists").to.be.true;
-        expect(wrapper.find("button").text(), "The button's text").to.equal("My Example");
-    });
-
-    // Example interactive test
-    it("should call function when clicked", () => {
-		const buttonSpy = sinon.spy(BasicStory.args as ${name}Props, "onClick");
-		const wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);
-
-        wrapper.find("button").simulate("click");
-        expect(buttonSpy.calledOnce).to.be.true;
-    });
-
-	// Example accessibility scan
-	it("should pass accessibility scans", async () => {
-		const wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);
-
-		expect(await accessibilityAssessor(wrapper)).to.be.true;
-	});
-});
-`;
-fs.writeFile(component_file, component_template, (err) => {
-    if (err) {
-        console.log(`Error writing to file path ${component_file}`, err);
-        return;
-    }
-    console.log(`Component added at ${path.relative(".", component_file)}`);
-});
-fs.writeFile(story_file, story_template, (err) => {
-    if (err) {
-        console.log(`Error writing to file path ${story_file}`, err);
-        return;
-    }
-    console.log(`Story added at path "${path.relative(".", story_file)}".
-To view it, run: yarn storybook`);
-});
-fs.writeFile(test_file, test_template, (err) => {
-    if (err) {
-        console.log(`Error writing to file path ${test_file}`, err);
-        return;
-    }
-    console.log(`Tests added at "${path.relative(".", test_file)}".
-To run this test, run: yarn test-storybook -g ${name}
-To run all tests, run: yarn test`);
-});
-//# sourceMappingURL=componentTemplateGenerator.js.map

package/react/componentTemplateGenerator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"componentTemplateGenerator.js","sourceRoot":"","sources":["../src/componentTemplateGenerator.js"],"names":[],"mappings":"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","sourcesContent":["const fs = require(\"fs\");\nconst path = require(\"path\");\n\nconst args = process.argv.slice(2);\nlet file = \"\";\nlet name = \"MyComponent\";\n\n// Stupid simple args parser\nfor (let i = 0; i < args.length; i++) {\n\tswitch (args[i]) {\n\t\tcase \"--file\": {\n\t\t\tfile = args[++i];\n\t\t\tbreak;\n\t\t}\n\t\tcase \"--name\": {\n\t\t\tname = args[++i];\n\t\t\tbreak;\n\t\t}\n\t\tdefault: {\n\t\t\tconsole.log(`Unknown flag: ${args[i]}`);\n\t\t}\n\t}\n}\n\nif (file === \"\") {\n\tconsole.log(\"Error: no provided file\");\n\treturn;\n}\n\nconst prepRelativeLink = (from, to) =>\n\tpath\n\t\t.relative(from, to)\n\t\t.replace(/\\\\/g, \"/\") // swap the slashes\n\t\t.replace(\"../\", \"\"); // path.relative adds an extra \"../\" for some reason, so remove it\nconst base_path = path.join(\"src\", \"components\", file);\nconst component_file = `${base_path}.tsx`;\nconst story_file = `${base_path}.stories.tsx`;\nconst test_file = `${base_path}.spec.tsx`;\n\nconst parsed_component_file = path.parse(component_file);\nconst { dir } = parsed_component_file;\nif (!fs.existsSync(dir)) {\n\tconsole.log(`Target directory, ${path.relative(\".\", dir)}, does not exist`);\n\treturn;\n}\n\nconst component_template = `\nimport React from \"react\";\n\nexport interface ${name}Props {\n    example: string;\n    onClick: () => void;\n};\n\nexport const ${name}: React.FunctionComponent<${name}Props> = (props: ${name}Props) => {\n    // Do things\n    return (\n        <div>\n            <button onClick={props.onClick}>{props.example}</button>\n        </div>\n    );\n};\n`;\n\nconst story_template = `\nimport React from \"react\";\nimport { ${name}, ${name}Props } from \"./${parsed_component_file.name}\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { action } from \"@storybook/addon-actions\";\nimport \"${prepRelativeLink(story_file, \"./src/assets/css/finsemble.css\")}\";\n\nexport default {\n    title: \"${name}\",\n    component: ${name}\n};\n\nconst Template: Story<${name}Props> = (args: ${name}Props) => <${name} {...args} />;\n\nexport const BasicStory = Template.bind({});\nBasicStory.args = {\n    example: \"My Example\",\n    onClick: action(\"Clicked\")\n};\n`;\n\nconst test_template = `\nimport * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it, afterEach } from \"mocha\";\nimport { expect } from \"chai\";\nimport { ${name}Props } from \"./${path.parse(component_file).name}\";\nimport { BasicStory } from \"./${path.parse(component_file).name}.stories\";\n\n// For running accessibility scans\nimport { accessibilityAssessor } from \"${prepRelativeLink(test_file, \"./src/components/sdd/tests/a11y_helper\")}\";\n\n// For testing user interactions (like click events):\nimport sinon from \"sinon\";\n// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)\nimport addons, { mockChannel } from \"@storybook/addons\";\naddons.setChannel(mockChannel());\n\ndescribe(\"<${name}/>\", () => {\n    // Used to clear after each interactive test using sinon\n    afterEach(() => {\n        sinon.restore();\n    });\n\n    // Example basic test\n    it(\"should display text\", () => {\n        const wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);\n\n        expect(wrapper.find(\"button\").exists(), \"The button exists\").to.be.true;\n        expect(wrapper.find(\"button\").text(), \"The button's text\").to.equal(\"My Example\");\n    });\n\n    // Example interactive test\n    it(\"should call function when clicked\", () => {\n\t\tconst buttonSpy = sinon.spy(BasicStory.args as ${name}Props, \"onClick\");\n\t\tconst wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);\n\n        wrapper.find(\"button\").simulate(\"click\");\n        expect(buttonSpy.calledOnce).to.be.true;\n    });\n\n\t// Example accessibility scan\n\tit(\"should pass accessibility scans\", async () => {\n\t\tconst wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);\n\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t});\n});\n`;\n\nfs.writeFile(component_file, component_template, (err) => {\n\tif (err) {\n\t\tconsole.log(`Error writing to file path ${component_file}`, err);\n\t\treturn;\n\t}\n\tconsole.log(`Component added at ${path.relative(\".\", component_file)}`);\n});\nfs.writeFile(story_file, story_template, (err) => {\n\tif (err) {\n\t\tconsole.log(`Error writing to file path ${story_file}`, err);\n\t\treturn;\n\t}\n\tconsole.log(`Story added at path \"${path.relative(\".\", story_file)}\".\nTo view it, run: yarn storybook`);\n});\nfs.writeFile(test_file, test_template, (err) => {\n\tif (err) {\n\t\tconsole.log(`Error writing to file path ${test_file}`, err);\n\t\treturn;\n\t}\n\tconsole.log(`Tests added at \"${path.relative(\".\", test_file)}\".\nTo run this test, run: yarn test-storybook -g ${name}\nTo run all tests, run: yarn test`);\n});\n"]}

package/react/components/appCatalog/components/Tag.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-interface Props {
-    name: string;
-    removeTag: (tag: string) => void;
-}
-/**
- * A display component for tag name. Contains a stylized label
- * @param {object} props Component props
- * @param {string} props.name The name of the tag
- * @param {func} props.removeTag Parent function to remove a tag from active filters
- */
-declare const Tag: (props: Props) => JSX.Element;
-export default Tag;

package/react/components/appCatalog/components/Tag.js

@@ -1,23 +0,0 @@
-/*!
- * Copyright 2017 by ChartIQ, Inc.
- * All rights reserved.
- */
-import React from "react";
-/**
- * A display component for tag name. Contains a stylized label
- * @param {object} props Component props
- * @param {string} props.name The name of the tag
- * @param {func} props.removeTag Parent function to remove a tag from active filters
- */
-const Tag = (props) => {
-    const remove = () => {
-        props.removeTag(props.name);
-    };
-    return (React.createElement("div", { className: "app-tag" },
-        React.createElement("div", { className: "tag-content" },
-            React.createElement("div", { className: "tag-name" }, props.name),
-            "\u00A0\u00A0",
-            React.createElement("i", { className: "ff-close tag-delete", onClick: remove }))));
-};
-export default Tag;
-//# sourceMappingURL=Tag.js.map

package/react/components/appCatalog/components/Tag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/components/appCatalog/components/Tag.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;GAKG;AACH,MAAM,GAAG,GAAG,CAAC,KAAY,EAAE,EAAE;IAC5B,MAAM,MAAM,GAAG,GAAG,EAAE;QACnB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,SAAS,EAAC,SAAS;QACvB,6BAAK,SAAS,EAAC,aAAa;YAC3B,6BAAK,SAAS,EAAC,UAAU,IAAE,KAAK,CAAC,IAAI,CAAO;;YAC5C,2BAAG,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,MAAM,GAAM,CACnD,CACD,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React from \"react\";\n\ninterface Props {\n\tname: string;\n\tremoveTag: (tag: string) => void;\n}\n\n/**\n * A display component for tag name. Contains a stylized label\n * @param {object} props Component props\n * @param {string} props.name The name of the tag\n * @param {func} props.removeTag Parent function to remove a tag from active filters\n */\nconst Tag = (props: Props) => {\n\tconst remove = () => {\n\t\tprops.removeTag(props.name);\n\t};\n\n\treturn (\n\t\t<div className=\"app-tag\">\n\t\t\t<div className=\"tag-content\">\n\t\t\t\t<div className=\"tag-name\">{props.name}</div>&nbsp;&nbsp;\n\t\t\t\t<i className=\"ff-close tag-delete\" onClick={remove}></i>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default Tag;\n"]}

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

@@ -1,11 +0,0 @@
-import React, { ReactElement } from "react";
-import "./css/accordion.css";
-export interface AccordionProps {
-    id: string;
-    label: string;
-    summary?: ReactElement | string;
-    startOpen?: boolean;
-    className?: string;
-    size?: "normal" | "medium";
-}
-export declare const Accordion: React.FunctionComponent<AccordionProps>;

package/react/components/common/Accordion.js

@@ -1,20 +0,0 @@
-import React, { useState } from "react";
-import "./css/accordion.css";
-import { FinsembleIcon } from "./FinsembleIcon";
-import { CSSTransition } from "react-transition-group";
-export const Accordion = ({ id, label, summary, startOpen = false, className = "", children, size = "small", }) => {
-    const [isOpen, setIsOpen] = useState(startOpen);
-    const toggle = () => {
-        setIsOpen(!isOpen);
-    };
-    const containerClassName = ["accordion", size, className].join(" ");
-    return (React.createElement(CSSTransition, { in: isOpen, timeout: 500, className: containerClassName },
-        React.createElement("div", null,
-            React.createElement("input", { type: "checkbox", id: `accordion-cb-${id}`, checked: isOpen, readOnly: true, "aria-hidden": "true", className: "accordion-cb" }),
-            React.createElement("button", { onClick: toggle, "aria-controls": `content-${id}`, "aria-expanded": isOpen ? "true" : "false", id: `accordion-control-${id}` },
-                React.createElement(FinsembleIcon, { className: "accordion-caret", icon: "caret" }),
-                React.createElement("span", { className: "label" }, label)),
-            summary && (React.createElement("div", { className: "accordion-summary", id: `summary-${id}` }, summary)),
-            React.createElement("div", { id: `content-${id}`, role: "region", "aria-labelledby": `accordion-control-${id}`, "aria-hidden": isOpen ? "false" : "true", "aria-describedby": summary && `summary-${id}`, className: "accordion-content" }, children))));
-};
-//# sourceMappingURL=Accordion.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/components/common/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAWvD,MAAM,CAAC,MAAM,SAAS,GAA4C,CAAC,EAClE,EAAE,EACF,KAAK,EACL,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,GAAG,OAAO,GACd,EAAE,EAAE;IACJ,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,SAAS,CAAC,CAAC;IAEzD,MAAM,MAAM,GAAG,GAAG,EAAE;QACnB,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,WAAW,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACpE,OAAO,CACN,oBAAC,aAAa,IAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,kBAAkB;QACrE;YACC,+BACC,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,gBAAgB,EAAE,EAAE,EACxB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,IAAI,iBACF,MAAM,EAClB,SAAS,EAAC,cAAc,GACvB;YACF,gCACC,OAAO,EAAE,MAAM,mBACA,WAAW,EAAE,EAAE,mBACf,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACxC,EAAE,EAAE,qBAAqB,EAAE,EAAE;gBAE7B,oBAAC,aAAa,IAAC,SAAS,EAAC,iBAAiB,EAAC,IAAI,EAAE,OAAO,GAAI;gBAC5D,8BAAM,SAAS,EAAC,OAAO,IAAE,KAAK,CAAQ,CAC9B;YACR,OAAO,IAAI,CACX,6BAAK,SAAS,EAAC,mBAAmB,EAAC,EAAE,EAAE,WAAW,EAAE,EAAE,IACpD,OAAO,CACH,CACN;YACD,6BACC,EAAE,EAAE,WAAW,EAAE,EAAE,EACnB,IAAI,EAAC,QAAQ,qBACI,qBAAqB,EAAE,EAAE,iBAC7B,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,sBACpB,OAAO,IAAI,WAAW,EAAE,EAAE,EAC5C,SAAS,EAAC,mBAAmB,IAE5B,QAAQ,CACJ,CACD,CACS,CAChB,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { ReactElement, useState } from \"react\";\nimport \"./css/accordion.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport interface AccordionProps {\n\tid: string;\n\tlabel: string;\n\tsummary?: ReactElement | string;\n\tstartOpen?: boolean;\n\tclassName?: string;\n\tsize?: \"normal\" | \"medium\";\n}\n\nexport const Accordion: React.FunctionComponent<AccordionProps> = ({\n\tid,\n\tlabel,\n\tsummary,\n\tstartOpen = false,\n\tclassName = \"\",\n\tchildren,\n\tsize = \"small\",\n}) => {\n\tconst [isOpen, setIsOpen] = useState<boolean>(startOpen);\n\n\tconst toggle = () => {\n\t\tsetIsOpen(!isOpen);\n\t};\n\n\tconst containerClassName = [\"accordion\", size, className].join(\" \");\n\treturn (\n\t\t<CSSTransition in={isOpen} timeout={500} className={containerClassName}>\n\t\t\t<div>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tid={`accordion-cb-${id}`}\n\t\t\t\t\tchecked={isOpen}\n\t\t\t\t\treadOnly={true}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"accordion-cb\"\n\t\t\t\t/>\n\t\t\t\t<button\n\t\t\t\t\tonClick={toggle}\n\t\t\t\t\taria-controls={`content-${id}`}\n\t\t\t\t\taria-expanded={isOpen ? \"true\" : \"false\"}\n\t\t\t\t\tid={`accordion-control-${id}`}\n\t\t\t\t>\n\t\t\t\t\t<FinsembleIcon className=\"accordion-caret\" icon={\"caret\"} />\n\t\t\t\t\t<span className=\"label\">{label}</span>\n\t\t\t\t</button>\n\t\t\t\t{summary && (\n\t\t\t\t\t<div className=\"accordion-summary\" id={`summary-${id}`}>\n\t\t\t\t\t\t{summary}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tid={`content-${id}`}\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-labelledby={`accordion-control-${id}`}\n\t\t\t\t\taria-hidden={isOpen ? \"false\" : \"true\"}\n\t\t\t\t\taria-describedby={summary && `summary-${id}`}\n\t\t\t\t\tclassName=\"accordion-content\"\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</CSSTransition>\n\t);\n};\n"]}

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

@@ -1,4 +0,0 @@
-import React from "react";
-import { AdvancedButtonProps } from "./Button";
-import "./css/button.css";
-export declare const ButtonTile: React.FC<AdvancedButtonProps>;

package/react/components/common/ButtonTile.js

@@ -1,12 +0,0 @@
-import React from "react";
-import { fashion_class_lookup } from "./Button";
-import "./css/button.css";
-import { FinsembleIcon } from "./FinsembleIcon";
-export const ButtonTile = ({ text = "", icon, disabled = false, onClick = () => { }, className = "", }) => {
-    const containerClassName = fashion_class_lookup.tile;
-    return (React.createElement("div", { className: `${containerClassName} ${className}` },
-        React.createElement("button", { onClick: onClick, disabled: disabled },
-            icon && React.createElement(FinsembleIcon, { className: `${fashion_class_lookup.tile}-icon`, icon: icon }),
-            React.createElement("div", null, text))));
-};
-//# sourceMappingURL=ButtonTile.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonTile.js","sourceRoot":"","sources":["../../../src/components/common/ButtonTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,CAAC,MAAM,UAAU,GAAkC,CAAC,EACzD,IAAI,GAAG,EAAE,EACT,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,SAAS,GAAG,EAAE,GACd,EAAE,EAAE;IACJ,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,IAAI,CAAC;IAErD,OAAO,CACN,6BAAK,SAAS,EAAE,GAAG,kBAAkB,IAAI,SAAS,EAAE;QACnD,gCAAQ,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ;YAC1C,IAAI,IAAI,oBAAC,aAAa,IAAC,SAAS,EAAE,GAAG,oBAAoB,CAAC,IAAI,OAAO,EAAE,IAAI,EAAE,IAAI,GAAkB;YAEpG,iCAAM,IAAI,CAAO,CACT,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { AdvancedButtonProps, fashion_class_lookup } from \"./Button\";\nimport \"./css/button.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport const ButtonTile: React.FC<AdvancedButtonProps> = ({\n\ttext = \"\",\n\ticon,\n\tdisabled = false,\n\tonClick = () => {},\n\tclassName = \"\",\n}) => {\n\tconst containerClassName = fashion_class_lookup.tile;\n\n\treturn (\n\t\t<div className={`${containerClassName} ${className}`}>\n\t\t\t<button onClick={onClick} disabled={disabled}>\n\t\t\t\t{icon && <FinsembleIcon className={`${fashion_class_lookup.tile}-icon`} icon={icon}></FinsembleIcon>}\n\n\t\t\t\t<div>{text}</div>\n\t\t\t</button>\n\t\t</div>\n\t);\n};\n"]}

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

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import "./css/color-picker.css";
-export declare enum RGBA_CHANNEL {
-    RED = 0,
-    GREEN = 1,
-    BLUE = 2,
-    ALPHA = 3
-}
-export declare function colorToRGBA(color: string): Uint8ClampedArray;
-export interface ColorPickerProps {
-    startColor: string;
-    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

@@ -1,92 +0,0 @@
-import React, { useState } from "react";
-import "./css/color-picker.css";
-const RE_HEX_COLOR = /^#[0-9a-f]{6}$/i;
-export var RGBA_CHANNEL;
-(function (RGBA_CHANNEL) {
-    RGBA_CHANNEL[RGBA_CHANNEL["RED"] = 0] = "RED";
-    RGBA_CHANNEL[RGBA_CHANNEL["GREEN"] = 1] = "GREEN";
-    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;
-    const ctx = cvs.getContext("2d");
-    ctx.fillStyle = color;
-    ctx.fillRect(0, 0, 1, 1);
-    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;
-    }
-    const rgba = colorToRGBA(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);
-        }
-    };
-    return (React.createElement("div", { className: "color-picker" },
-        React.createElement("input", { className: "theme-color-picker", type: "color", value: color, onChange: onColorChanged, "aria-hidden": "true" }),
-        React.createElement("input", Object.assign({ className: "theme-color-picker-text", type: "text", "aria-invalid": !isValid, value: inputValue !== null && inputValue !== void 0 ? inputValue : color, onChange: onColorChanged }, { id }))));
-};
-//# sourceMappingURL=ColorPicker.js.map

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

@@ -1 +0,0 @@
-{"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

@@ -1,22 +0,0 @@
-import React from "react";
-import "./css/drop-zone.css";
-export declare type FileWithPath = File & {
-    path?: string;
-};
-export declare type DropZoneProps = {
-    children: React.ReactNode;
-    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,65 +0,0 @@
-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);
-    const [singleton, setSingleton] = useState(true);
-    const preventDefaults = (e) => {
-        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); // 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);
-    }
-    const isPotentialStr = potential ? "isPotential" : "";
-    const isDraggingStr = isDragging ? "isDragging" : isPotentialStr;
-    return suppress ? (React.createElement(React.Fragment, null, children)) : (React.createElement("div", { className: `dropZone ${isDraggingStr}`, onDragEnter: (e) => {
-            preventDefaults(e);
-            setIsDragging(true);
-        }, onDragLeave: (e) => {
-            preventDefaults(e);
-            setIsDragging(false);
-        }, onDrop: (e) => {
-            setIsDragging(false);
-            const { files } = e.dataTransfer;
-            for (let i = 0; i < files.length; i++) {
-                if (files[i] === null) {
-                    continue;
-                }
-                processFile(files[i], i);
-            }
-            preventDefaults(e);
-        } }, children));
-};
-//# sourceMappingURL=DropZone.js.map

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

@@ -1 +0,0 @@
-{"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/FileInput.d.ts

@@ -1,30 +0,0 @@
-/*!
- * Copyright 2017 - 2020 by ChartIQ, Inc.
- * All rights reserved.
- */
-/// <reference types="react" />
-import "./css/file-input.css";
-export declare type FileInputUploadCb = (fileObject: File, cb?: (progress: number) => void) => Promise<{
-    err: string | null;
-    path: string;
-}>;
-export declare type FileInputProps = {
-    acceptTypes: string[];
-    value: string;
-    id?: string;
-    shouldUpload?: boolean;
-    onSetValue?: (value: string) => void;
-    uploadFunction?: FileInputUploadCb;
-    presetFile?: null | File;
-    suppressDropzone?: boolean;
-    disabled?: boolean;
-    allowClearing?: boolean;
-    textEditable?: boolean;
-};
-/**
- * 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;