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

package/react/components/common/ErrorBoundary.js

@@ -0,0 +1,22 @@
+import React from "react";
+export class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error(error, errorInfo);
+        FSBL.Clients.Logger.system.error(error, errorInfo);
+    }
+    render() {
+        var _a;
+        if (this.state.hasError) {
+            return (_a = this.props.fallBackUI) !== null && _a !== void 0 ? _a : React.createElement(React.Fragment, null);
+        }
+        return this.props.children;
+    }
+}
+//# sourceMappingURL=ErrorBoundary.js.map

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

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

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

@@ -1,9 +1,10 @@
 import React from "react";
 import "./css/icon.css";
-export declare type FinsembleIconType = "alwaysOnTop" | "caret" | "check-square" | "check" | "chevron-left" | "chevron-right" | "close" | "code-block" | "copy" | "documentation" | "exclamation-circle" | "external-link" | "flag" | "folder" | "font" | "globe" | "hdd" | "key" | "life-ring" | "linker" | "lock" | "magic" | "maximize" | "minimize" | "moon" | "paint-roller" | "pencil" | "plus" | "question-circle" | "search" | "sun" | "times" | "toggle-off" | "toggle-on" | "toolbar" | "tools" | "trash" | "upload" | "window";
+export declare type FinsembleIconType = "alwaysOnTop" | "caret" | "check-square" | "check" | "chevron-left" | "chevron-right" | "close" | "code-block" | "copy" | "documentation" | "exclamation-circle" | "external-link" | "flag" | "folder" | "font" | "globe" | "hdd" | "key" | "life-ring" | "linker" | "lock" | "magic" | "maximize" | "minimize" | "moon" | "paint-roller" | "pencil" | "plus" | "question-circle" | "search" | "server" | "sun" | "times" | "toggle-off" | "toggle-on" | "toolbar" | "tools" | "trash" | "upload" | "window";
 export declare type FinsembleIconProps = {
     icon: FinsembleIconType;
     className?: string;
     onClick?: (e: React.MouseEvent) => void;
+    label?: string;
 };
-export declare const FinsembleIcon: (props: FinsembleIconProps) => JSX.Element;
+export declare const FinsembleIcon: ({ icon, onClick, className, label }: FinsembleIconProps) => JSX.Element;

package/react/components/common/FinsembleIcon.js

@@ -30,6 +30,7 @@ import { ReactComponent as PencilIcon } from "../../assets/icons/pencil.svg";
 import { ReactComponent as PlusIcon } from "../../assets/icons/plus.svg";
 import { ReactComponent as QuestionCircleIcon } from "../../assets/icons/question-circle.svg";
 import { ReactComponent as SearchIcon } from "../../assets/icons/search.svg";
+import { ReactComponent as ServerIcon } from "../../assets/icons/server.svg";
 import { ReactComponent as SunIcon } from "../../assets/icons/sun.svg";
 import { ReactComponent as TimesIcon } from "../../assets/icons/times.svg";
 import { ReactComponent as ToggleOffIcon } from "../../assets/icons/toggle-off.svg";
@@ -70,6 +71,7 @@ const icons = {
     plus: PlusIcon,
     "question-circle": QuestionCircleIcon,
     search: SearchIcon,
+    server: ServerIcon,
     sun: SunIcon,
     times: TimesIcon,
     "toggle-off": ToggleOffIcon,
@@ -80,8 +82,13 @@ const icons = {
     upload: UploadIcon,
     window: WindowIcon,
 };
-export const FinsembleIcon = (props) => {
-    const Icon = icons[props.icon];
-    return (React.createElement("span", { className: ["finsemble-icon", `finsemble-icon-${props.icon}`, props.className || ""].join(" "), role: "img", "aria-label": `${props.icon} icon`, onClick: (e) => props.onClick && props.onClick(e) }, Icon && React.createElement(Icon, null)));
+export const FinsembleIcon = ({ icon, onClick = () => { }, className = "", label = "" }) => {
+    const Icon = icons[icon];
+    return (React.createElement("span", Object.assign({ className: ["finsemble-icon", `finsemble-icon-${icon}`, className].join(" ") }, (label
+        ? {
+            role: "img",
+            "aria-label": label,
+        }
+        : {}), { onClick: onClick }), Icon && React.createElement(Icon, null)));
 };
 //# sourceMappingURL=FinsembleIcon.js.map

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

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

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

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

package/react/components/common/FinsembleLink.js

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

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

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

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

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

package/react/components/common/FinsembleToggle.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"FinsembleToggle.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAUhD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,UAAU,EAAwB,EAAE,EAAE;IACjH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAElD,SAAS,aAAa,CAAC,QAAiB;QACvC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,WAAW,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC;IACD,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,EAAE,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACd,WAAW,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACN,8BACC,SAAS,EAAE;YACV,iBAAiB;YACjB,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB;YACvD,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAC1B,CAAC,IAAI,CAAC,GAAG,CAAC;QAEV,CAAC,UAAU,IAAI,oBAAC,aAAa,IAAC,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,GAAI;QAC9G,UAAU,IAAI,CACd,8BAAM,SAAS,EAAC,2BAA2B;YAC1C,8BAAM,SAAS,EAAE,wCAAwC,IAAG,QAAQ,CAAQ;YAC5E,8BAAM,SAAS,EAAE,yCAAyC,IAAG,OAAO,CAAQ,CACtE,CACP;QACD,6CACC,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACjC,CAAC,EACD,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,CAAC,OAAO,IACd,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACzC,CACI,CACP,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./css/toggle.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport interface FinsembleToggleProps {\n\tlabel?: string;\n\tchecked: boolean;\n\ttextToggle?: [onLabel: string, offLabel: string];\n\tonChange: (selected: boolean) => void;\n\tenabled?: boolean;\n}\n\nexport const FinsembleToggle = ({ checked, onChange, label, enabled = true, textToggle }: FinsembleToggleProps) => {\n\tconst [selected, setSelected] = useState(checked);\n\n\tfunction doSetSelected(newValue: boolean) {\n\t\tonChange(newValue);\n\t\tsetSelected(newValue);\n\t}\n\tconst [yesLabel, noLabel] = textToggle ?? [];\n\n\tuseEffect(() => {\n\t\tsetSelected(checked);\n\t}, [checked]);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={[\n\t\t\t\t\"finsembleToggle\",\n\t\t\t\tselected ? \"finsembleToggle-on\" : \"finsembleToggle-off\",\n\t\t\t\t!enabled ? \"disabled\" : \"\",\n\t\t\t].join(\" \")}\n\t\t>\n\t\t\t{!textToggle && <FinsembleIcon className=\"finsembleToggle-icon\" icon={selected ? \"toggle-on\" : \"toggle-off\"} />}\n\t\t\t{textToggle && (\n\t\t\t\t<span className=\"toggle-text-label-wrapper\">\n\t\t\t\t\t<span className={\"toggle-text-label toggle-text-label_on\"}>{yesLabel}</span>\n\t\t\t\t\t<span className={\"toggle-text-label toggle-text-label_off\"}>{noLabel}</span>\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tonChange={(e) => {\n\t\t\t\t\tdoSetSelected(e.target.checked);\n\t\t\t\t}}\n\t\t\t\tchecked={selected}\n\t\t\t\tdisabled={!enabled}\n\t\t\t\t{...(label ? { \"aria-label\": label } : \"\")}\n\t\t\t/>\n\t\t</span>\n\t);\n};\n"]}
+{"version":3,"file":"FinsembleToggle.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAShD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,EAAwB,EAAE,EAAE;IACrG,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAElD,SAAS,aAAa,CAAC,QAAiB;QACvC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,WAAW,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACd,WAAW,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACN,8BACC,SAAS,EAAE;YACV,iBAAiB;YACjB,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB;YACvD,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAC1B,CAAC,IAAI,CAAC,GAAG,CAAC;QAEX,oBAAC,aAAa,IAAC,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,GAAI;QAC/F,6CACC,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACjC,CAAC,EACD,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,CAAC,OAAO,IACd,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACzC,CACI,CACP,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./css/toggle.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport interface FinsembleToggleProps {\n\tlabel?: string;\n\tchecked: boolean;\n\tonChange: (selected: boolean) => void;\n\tenabled?: boolean;\n}\n\nexport const FinsembleToggle = ({ checked, onChange, label, enabled = true }: FinsembleToggleProps) => {\n\tconst [selected, setSelected] = useState(checked);\n\n\tfunction doSetSelected(newValue: boolean) {\n\t\tonChange(newValue);\n\t\tsetSelected(newValue);\n\t}\n\n\tuseEffect(() => {\n\t\tsetSelected(checked);\n\t}, [checked]);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={[\n\t\t\t\t\"finsembleToggle\",\n\t\t\t\tselected ? \"finsembleToggle-on\" : \"finsembleToggle-off\",\n\t\t\t\t!enabled ? \"disabled\" : \"\",\n\t\t\t].join(\" \")}\n\t\t>\n\t\t\t<FinsembleIcon className=\"finsembleToggle-icon\" icon={selected ? \"toggle-on\" : \"toggle-off\"} />\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tonChange={(e) => {\n\t\t\t\t\tdoSetSelected(e.target.checked);\n\t\t\t\t}}\n\t\t\t\tchecked={selected}\n\t\t\t\tdisabled={!enabled}\n\t\t\t\t{...(label ? { \"aria-label\": label } : \"\")}\n\t\t\t/>\n\t\t</span>\n\t);\n};\n"]}

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

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

package/react/components/common/FinsembleToggleButtonBar.js

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

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

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

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

@@ -5,7 +5,7 @@
 /// <reference types="react" />
 export declare type InputTableProps = {
     tableHeaders: (string | JSX.Element)[];
-    onUpdate: (data: string[][]) => void;
-    startingData?: (string | undefined)[][];
+    setData: (data: string[][]) => void;
+    data: string[][];
 };
-export declare const InputTable: ({ tableHeaders, onUpdate, startingData }: InputTableProps) => JSX.Element;
+export declare const InputTable: ({ tableHeaders, setData, data }: InputTableProps) => JSX.Element;

package/react/components/common/InputTable.js

@@ -2,7 +2,7 @@
  * Copyright 2017 - 2020 by ChartIQ, Inc.
  * All rights reserved.
  */
-import React, { useState } from "react";
+import React, { useEffect } from "react";
 import { ButtonIcon } from "./ButtonIcon";
 const isLastRowEmpty = (arr) => {
     const lastRow = arr[arr.length - 1];
@@ -14,24 +14,24 @@ const isLastRowEmpty = (arr) => {
 };
 const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));
 const emptyRow = (colCount) => Array(colCount).fill("").slice(0);
-export const InputTable = ({ tableHeaders, onUpdate, startingData }) => {
-    const [data, setData] = useState(startingData !== null && startingData !== void 0 ? startingData : [emptyRow(tableHeaders.length)]);
+export const InputTable = ({ tableHeaders, setData, data }) => {
     const rowCount = data.length;
-    const doSetData = (newData) => {
-        setData(newData);
-        onUpdate(newData);
-    };
     const addRow = () => {
-        doSetData(data.concat([emptyRow(tableHeaders.length)]));
+        setData(data.concat([emptyRow(tableHeaders.length)]));
     };
     const deleteRow = (rowIndex) => {
         const newData = data.splice(0);
         newData.splice(rowIndex, 1);
-        doSetData(newData);
+        setData(newData);
     };
-    if (rowCount === 0 || !isLastRowEmpty(data)) {
-        addRow();
-    }
+    useEffect(() => {
+        if (data.length === 0) {
+            setData([emptyRow(tableHeaders.length)]);
+        }
+        if (!isLastRowEmpty(data)) {
+            addRow();
+        }
+    }, [data]);
     return (React.createElement("table", { className: "inputTable" },
         React.createElement("thead", null,
             React.createElement("tr", null, tableHeaders.map((th, index) => (React.createElement("th", { scope: "col", key: `th-${index}` }, th))))),
@@ -40,7 +40,7 @@ export const InputTable = ({ tableHeaders, onUpdate, startingData }) => {
                 React.createElement("input", { type: "text", id: `input-${rowNumber}-${colNumber}`, value: td, onChange: (e) => {
                         const newData = deepCopy(data);
                         newData[rowNumber][colNumber] = e.target.value;
-                        doSetData(newData);
+                        setData(newData);
                     } })))),
             rowNumber < rowCount - 1 && (React.createElement("td", null,
                 React.createElement(ButtonIcon, { icon: "times", text: "Remove row", onClick: () => {

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

@@ -1 +1 @@
-{"version":3,"file":"InputTable.js","sourceRoot":"","sources":["../../../src/components/common/InputTable.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState } from \"react\";\nimport { ButtonIcon } from \"./ButtonIcon\";\n\nexport type InputTableProps = {\n\ttableHeaders: (string | JSX.Element)[];\n\tonUpdate: (data: string[][]) => void;\n\tstartingData?: (string | undefined)[][];\n};\n\nconst isLastRowEmpty = (arr: String[][]) => {\n\tconst lastRow = arr[arr.length - 1];\n\tif (!Array.isArray(lastRow)) {\n\t\treturn true;\n\t}\n\n\tconst nonEmptyCells = lastRow.filter((str) => str.length > 0);\n\treturn nonEmptyCells.length === 0;\n};\n\nconst deepCopy = (obj: any) => JSON.parse(JSON.stringify(obj));\nconst emptyRow = (colCount: number) => Array(colCount).fill(\"\").slice(0);\n\n/***\n * A table full on input fields. It auto-grows as users use it, and it provides \"Remove row\" functionality.\n * The number of columns in the table is determined by the number of table headers provided, which are required.\n * @param {string|JSX} tableHeaders The headers at the top of each column\n * @param {Function} onUpdate Callback providing the data in the table. This is called onInput for any input element in the table.\n * @param {string[][]} [startingData] Initial data for the table\n */\nexport const InputTable = ({ tableHeaders, onUpdate, startingData }: InputTableProps) => {\n\tconst [data, setData] = useState<string[][]>(startingData ?? [emptyRow(tableHeaders.length)]);\n\tconst rowCount = data.length;\n\n\tconst doSetData = (newData: string[][]) => {\n\t\tsetData(newData);\n\t\tonUpdate(newData);\n\t};\n\n\tconst addRow = () => {\n\t\tdoSetData(data.concat([emptyRow(tableHeaders.length)]));\n\t};\n\n\tconst deleteRow = (rowIndex: number) => {\n\t\tconst newData = data.splice(0);\n\t\tnewData.splice(rowIndex, 1);\n\t\tdoSetData(newData);\n\t};\n\n\tif (rowCount === 0 || !isLastRowEmpty(data)) {\n\t\taddRow();\n\t}\n\n\treturn (\n\t\t<table className=\"inputTable\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t{tableHeaders.map((th, index) => (\n\t\t\t\t\t\t<th scope=\"col\" key={`th-${index}`}>\n\t\t\t\t\t\t\t{th}\n\t\t\t\t\t\t</th>\n\t\t\t\t\t))}\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t{data.map((row, rowNumber) =>\n\t\t\t\t\tArray.isArray(row) ? (\n\t\t\t\t\t\t<tr key={`tr-${rowNumber}`}>\n\t\t\t\t\t\t\t{row.map((td, colNumber) => (\n\t\t\t\t\t\t\t\t<td key={`td-${rowNumber}-${colNumber}`}>\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\tid={`input-${rowNumber}-${colNumber}`}\n\t\t\t\t\t\t\t\t\t\tvalue={td}\n\t\t\t\t\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tconst newData = deepCopy(data);\n\t\t\t\t\t\t\t\t\t\t\tnewData[rowNumber][colNumber] = e.target.value;\n\t\t\t\t\t\t\t\t\t\t\tdoSetData(newData);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t{rowNumber < rowCount - 1 && (\n\t\t\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t\t\t<ButtonIcon\n\t\t\t\t\t\t\t\t\t\ticon=\"times\"\n\t\t\t\t\t\t\t\t\t\ttext=\"Remove row\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tdeleteRow(rowNumber);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t) : null\n\t\t\t\t)}\n\t\t\t</tbody>\n\t\t</table>\n\t);\n};\n"]}
+{"version":3,"file":"InputTable.js","sourceRoot":"","sources":["../../../src/components/common/InputTable.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useEffect } from \"react\";\nimport { ButtonIcon } from \"./ButtonIcon\";\n\nexport type InputTableProps = {\n\ttableHeaders: (string | JSX.Element)[];\n\tsetData: (data: string[][]) => void;\n\tdata: string[][];\n};\n\nconst isLastRowEmpty = (arr: String[][]) => {\n\tconst lastRow = arr[arr.length - 1];\n\tif (!Array.isArray(lastRow)) {\n\t\treturn true;\n\t}\n\n\tconst nonEmptyCells = lastRow.filter((str) => str.length > 0);\n\treturn nonEmptyCells.length === 0;\n};\n\nconst deepCopy = (obj: any) => JSON.parse(JSON.stringify(obj));\nconst emptyRow = (colCount: number) => Array(colCount).fill(\"\").slice(0);\n\n/***\n * A table full on input fields. It auto-grows as users use it, and it provides \"Remove row\" functionality.\n * The number of columns in the table is determined by the number of table headers provided, which are required.\n * @param {string|JSX} tableHeaders The headers at the top of each column\n * @param {Function} onUpdate Callback providing the data in the table. This is called onInput for any input element in the table.\n * @param {string[][]} [data] Initial data for the table\n */\nexport const InputTable = ({ tableHeaders, setData, data }: InputTableProps) => {\n\tconst rowCount = data.length;\n\n\tconst addRow = () => {\n\t\tsetData(data.concat([emptyRow(tableHeaders.length)]));\n\t};\n\n\tconst deleteRow = (rowIndex: number) => {\n\t\tconst newData = data.splice(0);\n\t\tnewData.splice(rowIndex, 1);\n\t\tsetData(newData);\n\t};\n\n\tuseEffect(() => {\n\t\tif (data.length === 0) {\n\t\t\tsetData([emptyRow(tableHeaders.length)]);\n\t\t}\n\t\tif (!isLastRowEmpty(data)) {\n\t\t\taddRow();\n\t\t}\n\t}, [data]);\n\n\treturn (\n\t\t<table className=\"inputTable\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t{tableHeaders.map((th, index) => (\n\t\t\t\t\t\t<th scope=\"col\" key={`th-${index}`}>\n\t\t\t\t\t\t\t{th}\n\t\t\t\t\t\t</th>\n\t\t\t\t\t))}\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t{data.map((row, rowNumber) =>\n\t\t\t\t\tArray.isArray(row) ? (\n\t\t\t\t\t\t<tr key={`tr-${rowNumber}`}>\n\t\t\t\t\t\t\t{row.map((td, colNumber) => (\n\t\t\t\t\t\t\t\t<td key={`td-${rowNumber}-${colNumber}`}>\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\tid={`input-${rowNumber}-${colNumber}`}\n\t\t\t\t\t\t\t\t\t\tvalue={td}\n\t\t\t\t\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tconst newData = deepCopy(data);\n\t\t\t\t\t\t\t\t\t\t\tnewData[rowNumber][colNumber] = e.target.value;\n\t\t\t\t\t\t\t\t\t\t\tsetData(newData);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t{rowNumber < rowCount - 1 && (\n\t\t\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t\t\t<ButtonIcon\n\t\t\t\t\t\t\t\t\t\ticon=\"times\"\n\t\t\t\t\t\t\t\t\t\ttext=\"Remove row\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tdeleteRow(rowNumber);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t) : null\n\t\t\t\t)}\n\t\t\t</tbody>\n\t\t</table>\n\t);\n};\n"]}

package/react/components/common/Tab.js

@@ -7,21 +7,49 @@ import "./css/tab.css";
 export const Tab = ({ children, autofocus }) => {
     const [selectedTab, setSelectedTab] = useState(autofocus || 0);
     const ref = useRef(null);
+    const tabList = useRef(null);
     useLayoutEffect(() => {
         var _a;
         if (ref.current !== null) {
             ref.current.style.height = `${window.innerHeight - (((_a = ref.current.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.top) || 0) - 10}px`;
         }
     });
+    const changeTab = (fromKey, direction) => {
+        var _a, _b;
+        const tabReferences = (_a = tabList.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[role='tab']");
+        if (tabReferences === undefined) {
+            return;
+        }
+        if (fromKey === tabReferences.length) {
+            return;
+        }
+        (_b = tabReferences[fromKey + direction]) === null || _b === void 0 ? void 0 : _b.focus();
+    };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { role: "tablist" }, React.Children.map(children, (tab, key) => React.isValidElement(tab) && (React.createElement("div", { key: `tab-${key}`, role: "tab", "aria-selected": selectedTab === key, "aria-controls": `tabpanel-${key}`, tabIndex: 0, onKeyDown: (e) => {
-                if (e.key === " " || e.key === "Enter") {
-                    setSelectedTab(key);
-                    e.preventDefault();
+        React.createElement("div", { className: "horizontal-tabs", role: "tablist", ref: tabList }, React.Children.map(children, (tab, key) => React.isValidElement(tab) && (React.createElement("div", { key: `tab-${key}`, role: "tab", "aria-selected": selectedTab === key, "aria-controls": `tabpanel-${key}`, tabIndex: selectedTab === key ? 0 : -1, onKeyDown: (e) => {
+                switch (e.key) {
+                    case "Enter":
+                    case " ": {
+                        setSelectedTab(key);
+                        e.preventDefault();
+                        break;
+                    }
+                    case "ArrowRight": {
+                        changeTab(key, 1);
+                        e.preventDefault();
+                        break;
+                    }
+                    case "ArrowLeft": {
+                        changeTab(key, -1);
+                        e.preventDefault();
+                        break;
+                    }
+                    default: {
+                    }
                 }
             }, onClick: () => {
                 setSelectedTab(key);
             } }, tab.props["data-label"])))),
-        React.createElement("div", { id: "tabpanelContainer", ref: ref }, React.Children.map(children, (tab, key) => (React.createElement("div", { key: `tabpanel-${key}`, role: "tabpanel", id: `tabpanel-${key}`, className: selectedTab === key ? "visible" : "" }, tab))))));
+        React.createElement("div", { className: "horizontal-tabs", id: "tabpanelContainer", ref: ref }, React.Children.map(children, (tab, key) => (React.createElement("div", { key: `tabpanel-${key}`, role: "tabpanel", id: `tabpanel-${key}`, className: selectedTab === key ? "visible" : "" }, tab))))));
 };
 //# sourceMappingURL=Tab.js.map

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

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

package/react/components/common/css/FinsembleToggle.css

@@ -0,0 +1,22 @@
+.finsembleToggle {
+	background-color: var(--core-primary);
+	padding: 4px;
+	border-radius: 5px;
+}
+
+.finsembleToggle .toggle-text-label.disabled {
+	opacity: 0.5;
+}
+
+.finsembleToggle .toggle-text-label {
+	border-radius: 5px;
+}
+
+.finsembleToggle .toggle-text-label[aria-checked="true"] {
+	background-color: var(--accent-primary-1);
+}
+
+.finsembleToggle .toggle-text-label[aria-checked="false"]:focus,
+.finsembleToggle .toggle-text-label[aria-checked="false"]:hover {
+	background-color: var(--core-primary-3);
+}

package/react/components/common/css/application-edit-page.css

@@ -8,15 +8,23 @@
 	height: 100%;
 }
 
-.app-edit-actions {
+.app-edit-actions,
+.app-edit-actions-right {
 	display: flex;
-	justify-content: space-between;
 	margin-top: 0.65em;
 	margin-bottom: 0.65em;
 	margin-left: 22px;
 	margin-right: 3em;
 }
 
+.app-edit-actions {
+	justify-content: space-between;
+}
+
+.app-edit-actions-right {
+	justify-content: flex-end;
+}
+
 .app-actions-right-wrapper {
 	width: 125px;
 	display: flex;

package/react/components/common/css/tab.css

@@ -3,18 +3,18 @@
 	flex-direction: column;
 }
 
-[role="tab"]:hover,
-[role="tab"]:focus:not([aria-selected="true"]) {
+.horizontal-tabs [role="tab"]:hover,
+.horizontal-tabs [role="tab"]:focus:not([aria-selected="true"]) {
 	border-bottom: solid 3px #36788b;
 	margin-bottom: -3px;
 }
 
-[role="tablist"] {
+.horizontal-tabs[role="tablist"] {
 	width: 100px;
 	padding-bottom: 20px;
 }
 
-[role="tab"] {
+.horizontal-tabs [role="tab"] {
 	display: inline;
 	width: fit-content;
 	height: 22px;
@@ -30,16 +30,16 @@
 	transition: border-bottom 0.2s ease-in;
 }
 
-[role="tab"][aria-selected="true"] {
+.horizontal-tabs [role="tab"][aria-selected="true"] {
 	border-bottom: solid 3px #902e57;
 	margin-bottom: -3px;
 }
 
-[role="tab"]:first-child {
+.horizontal-tabs [role="tab"]:first-child {
 	margin-top: 0px;
 }
 
-[role="tabpanel"] {
+.horizontal-tabs [role="tabpanel"] {
 	padding-left: 5px;
 	overflow-y: scroll;
 	overflow-x: hidden;
@@ -49,7 +49,7 @@
 	transition: visibility 0s, opacity 0.5s linear;
 }
 
-.visible {
+.horizontal-tabs [role="tabpanel"].visible {
 	visibility: visible;
 	opacity: 1;
 	height: 100%;

package/react/components/common/css/time-select.css

@@ -4,5 +4,5 @@
 }
 
 .disabled-time-select {
-	color: var(--content-nav-highlighter) !important;
+	color: var(--core-primary-5) !important;
 }

package/react/components/common/css/toggle.css

@@ -31,19 +31,11 @@
 	border-radius: 2px;
 }
 
-.finsembleToggle-on .toggle-text-label_on {
+.finsembleToggle .toggle-text-label[aria-selected="true"] {
 	background-color: #0a8cf4;
 }
 
-.finsembleToggle-off .toggle-text-label_off {
-	background-color: #0a8cf4;
-}
-
-.finsembleToggle-on:hover .toggle-text-label_off {
-	background-color: #3d4455;
-}
-
-.finsembleToggle-off:hover .toggle-text-label_on {
+.finsembleToggle .toggle-text-label[aria-selected="false"]:hover {
 	background-color: #3d4455;
 }
 

package/react/components/common/helpers.js

@@ -24,8 +24,13 @@ export const initFSBL = (windowObject) => {
         addEventListener: (name, callback) => {
             callback();
         },
+        getFSBLInfo: () => new Promise((resolve) => {
+            resolve({
+                FSBLVersion: "1.0.0",
+            });
+        }),
         Clients: {
-            SmartDesktopClient: {
+            TmpSmartDesktopClient: {
                 checkValidURL(url) {
                     if (url.length === 0) {
                         return true;