@babylonjs/shared-ui-components 5.31.1 → 5.32.0

package/components/Button.d.ts

@@ -4,7 +4,8 @@ export declare type ButtonProps = {
     active?: boolean;
     onClick?: () => void;
     color: "light" | "dark";
-    size: "default" | "small" | "wide";
+    size: "default" | "small" | "wide" | "smaller";
     title?: string;
+    backgroundColor?: string;
 };
 export declare const Button: React.FC<ButtonProps>;

package/components/Button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from "./Button.modules.scss";
 import { ClassNames } from "./classNames.js";
-export const Button = ({ disabled, active, onClick, children, color, size, title }) => {
-    return (_jsx("button", { className: ClassNames({ button: true, active, wide: size === "wide", small: size === "small", light: color === "light", dark: color === "dark" }, styles), disabled: disabled, onClick: onClick, title: title, children: children }));
+export const Button = ({ disabled, active, onClick, children, color, size, title, backgroundColor }) => {
+    return (_jsx("button", { className: ClassNames({ button: true, active, wide: size === "wide", small: size === "small", smaller: size === "smaller", light: color === "light", dark: color === "dark" }, styles), disabled: disabled, onClick: onClick, title: title, style: { backgroundColor }, children: children }));
 };
 //# sourceMappingURL=Button.js.map

package/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAW1C,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IACzG,OAAO,CACH,iBACI,SAAS,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,KAAK,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,IAAI,EAAE,KAAK,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,EACzJ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,YAEX,QAAQ,GACJ,CACZ,CAAC;AACN,CAAC,CAAC","sourcesContent":["import styles from \"./Button.modules.scss\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nexport type ButtonProps = {\r\n    disabled?: boolean;\r\n    active?: boolean;\r\n    onClick?: () => void;\r\n    color: \"light\" | \"dark\";\r\n    size: \"default\" | \"small\" | \"wide\";\r\n    title?: string;\r\n};\r\n\r\nexport const Button: React.FC<ButtonProps> = ({ disabled, active, onClick, children, color, size, title }) => {\r\n    return (\r\n        <button\r\n            className={ClassNames({ button: true, active, wide: size === \"wide\", small: size === \"small\", light: color === \"light\", dark: color === \"dark\" }, styles)}\r\n            disabled={disabled}\r\n            onClick={onClick}\r\n            title={title}\r\n        >\r\n            {children}\r\n        </button>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAY1C,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE;IAC1H,OAAO,CACH,iBACI,SAAS,EAAE,UAAU,CACjB,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,KAAK,OAAO,EAAE,OAAO,EAAE,IAAI,KAAK,SAAS,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,IAAI,EAAE,KAAK,KAAK,MAAM,EAAE,EACvJ,MAAM,CACT,EACD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAE,eAAe,EAAE,YAEzB,QAAQ,GACJ,CACZ,CAAC;AACN,CAAC,CAAC","sourcesContent":["import styles from \"./Button.modules.scss\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nexport type ButtonProps = {\r\n    disabled?: boolean;\r\n    active?: boolean;\r\n    onClick?: () => void;\r\n    color: \"light\" | \"dark\";\r\n    size: \"default\" | \"small\" | \"wide\" | \"smaller\";\r\n    title?: string;\r\n    backgroundColor?: string;\r\n};\r\n\r\nexport const Button: React.FC<ButtonProps> = ({ disabled, active, onClick, children, color, size, title, backgroundColor }) => {\r\n    return (\r\n        <button\r\n            className={ClassNames(\r\n                { button: true, active, wide: size === \"wide\", small: size === \"small\", smaller: size === \"smaller\", light: color === \"light\", dark: color === \"dark\" },\r\n                styles\r\n            )}\r\n            disabled={disabled}\r\n            onClick={onClick}\r\n            title={title}\r\n            style={{ backgroundColor }}\r\n        >\r\n            {children}\r\n        </button>\r\n    );\r\n};\r\n"]}

package/components/Button.modules.scss

@@ -7,6 +7,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    padding: 0 0;
     &.wide {
         width: 120px;
         height: 45px;
@@ -16,6 +17,10 @@
         width: 30px;
         height: 30px;
     }
+    &.smaller {
+        width: 25px;
+        height: 25px;
+    }
     &.light {
         background-color: light-background;
         color: dark-color;

package/components/Icon.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ClassNames } from "./classNames.js";
 import styles from "./Icon.modules.scss";
 export const Icon = ({ color = "dark", icon }) => {
-    return _jsx("img", { src: icon, style: { width: "30px", height: "30px" }, className: ClassNames({ light: color === "light" }, styles) });
+    return _jsx("img", { src: icon, style: { width: "100%", height: "100%" }, className: ClassNames({ light: color === "light" }, styles) });
 };
 //# sourceMappingURL=Icon.js.map

package/components/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAOzC,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,OAAO,cAAK,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,EAAE,MAAM,CAAC,GAAI,CAAC;AACrI,CAAC,CAAC","sourcesContent":["import { ClassNames } from \"./classNames\";\r\nimport styles from \"./Icon.modules.scss\";\r\n\r\nexport type IconProps = {\r\n    color?: \"dark\" | \"light\";\r\n    icon: string;\r\n};\r\n\r\nexport const Icon: React.FC<IconProps> = ({ color = \"dark\", icon }) => {\r\n    return <img src={icon} style={{ width: \"30px\", height: \"30px\" }} className={ClassNames({ light: color === \"light\" }, styles)} />;\r\n};\r\n"]}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAOzC,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,OAAO,cAAK,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,EAAE,MAAM,CAAC,GAAI,CAAC;AACrI,CAAC,CAAC","sourcesContent":["import { ClassNames } from \"./classNames\";\r\nimport styles from \"./Icon.modules.scss\";\r\n\r\nexport type IconProps = {\r\n    color?: \"dark\" | \"light\";\r\n    icon: string;\r\n};\r\n\r\nexport const Icon: React.FC<IconProps> = ({ color = \"dark\", icon }) => {\r\n    return <img src={icon} style={{ width: \"100%\", height: \"100%\" }} className={ClassNames({ light: color === \"light\" }, styles)} />;\r\n};\r\n"]}

package/components/TextInputWithSubmit.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface ITextInputProps {
+    label?: string;
+    placeholder?: string;
+    submitValue: (newValue: string) => void;
+    validateValue?: (value: string) => boolean;
+    cancelSubmit?: () => void;
+}
+/**
+ * This component represents a text input that can be submitted or cancelled on buttons
+ */
+export declare const TextInputWithSubmit: (props: ITextInputProps) => JSX.Element;

package/components/TextInputWithSubmit.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+import style from "./TextInputWithSubmit.modules.scss";
+import submitIcon from "../imgs/confirmGridElementDark.svg";
+import cancelIcon from "../imgs/deleteGridElementDark.svg";
+import { ClassNames } from "./classNames.js";
+/**
+ * This component represents a text input that can be submitted or cancelled on buttons
+ */
+export const TextInputWithSubmit = (props) => {
+    const [value, setValue] = useState("");
+    const [valid, setValid] = useState(props.validateValue ? props.validateValue(value) : true);
+    useEffect(() => {
+        setValid(props.validateValue ? props.validateValue(value) : true);
+    }, [value]);
+    const onChange = (event) => {
+        setValue(event.target.value);
+    };
+    const onClickSubmit = () => {
+        props.submitValue(value);
+    };
+    const onClickCancel = () => {
+        var _a;
+        (_a = props.cancelSubmit) === null || _a === void 0 ? void 0 : _a.call(props);
+        setValue("");
+    };
+    return (_jsxs("div", { className: ClassNames({ line: true, valid, invalid: !valid }, style), children: [props.label && _jsx("label", { children: props.label }), _jsx("input", { className: style.input, type: "text", placeholder: props.placeholder, value: value, onChange: onChange }), _jsxs("div", { children: [_jsx(Button, { color: "light", size: "smaller", backgroundColor: "inherit", onClick: onClickSubmit, disabled: !valid, children: _jsx(Icon, { icon: submitIcon, color: "dark" }) }), _jsx(Button, { color: "light", size: "smaller", backgroundColor: "inherit", onClick: onClickCancel, children: _jsx(Icon, { icon: cancelIcon, color: "dark" }) })] })] }));
+};
+//# sourceMappingURL=TextInputWithSubmit.js.map

package/components/TextInputWithSubmit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputWithSubmit.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/TextInputWithSubmit.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,MAAM,oCAAoC,CAAC;AAEvD,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE5F,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,QAAQ,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC5D,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;;QACvB,MAAA,KAAK,CAAC,YAAY,qDAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,aACpE,KAAK,CAAC,KAAK,IAAI,0BAAQ,KAAK,CAAC,KAAK,GAAS,EAC5C,gBAAO,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC/G,0BACI,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,KAAK,YACnG,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GACvC,EACT,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,YACjF,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GACvC,IACP,IACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from \"react\";\r\nimport { Button } from \"./Button\";\r\nimport { Icon } from \"./Icon\";\r\nimport style from \"./TextInputWithSubmit.modules.scss\";\r\n\r\nimport submitIcon from \"../imgs/confirmGridElementDark.svg\";\r\nimport cancelIcon from \"../imgs/deleteGridElementDark.svg\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nexport interface ITextInputProps {\r\n    label?: string;\r\n    placeholder?: string;\r\n    submitValue: (newValue: string) => void; // Function to call when the value is updated\r\n    validateValue?: (value: string) => boolean; // Function to call to validate the value\r\n    cancelSubmit?: () => void; // Function to call when the user cancels the submit\r\n}\r\n\r\n/**\r\n * This component represents a text input that can be submitted or cancelled on buttons\r\n */\r\nexport const TextInputWithSubmit = (props: ITextInputProps) => {\r\n    const [value, setValue] = useState(\"\");\r\n    const [valid, setValid] = useState(props.validateValue ? props.validateValue(value) : true);\r\n\r\n    useEffect(() => {\r\n        setValid(props.validateValue ? props.validateValue(value) : true);\r\n    }, [value]);\r\n\r\n    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n        setValue(event.target.value);\r\n    };\r\n\r\n    const onClickSubmit = () => {\r\n        props.submitValue(value);\r\n    };\r\n\r\n    const onClickCancel = () => {\r\n        props.cancelSubmit?.();\r\n        setValue(\"\");\r\n    };\r\n\r\n    return (\r\n        <div className={ClassNames({ line: true, valid, invalid: !valid }, style)}>\r\n            {props.label && <label>{props.label}</label>}\r\n            <input className={style.input} type=\"text\" placeholder={props.placeholder} value={value} onChange={onChange} />\r\n            <div>\r\n                <Button color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickSubmit} disabled={!valid}>\r\n                    <Icon icon={submitIcon} color=\"dark\"></Icon>\r\n                </Button>\r\n                <Button color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickCancel}>\r\n                    <Icon icon={cancelIcon} color=\"dark\"></Icon>\r\n                </Button>\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/TextInputWithSubmit.modules.scss

@@ -0,0 +1,22 @@
+.line {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.input {
+    border: unset;
+    background-color: inherit;
+    flex-grow: 1;
+    width: 100px;
+}
+
+.valid {
+    background-color: white;
+}
+
+.invalid {
+    background-color: rgba(255, 204, 204, 0.8);
+}

package/components/lines/OptionsLineComponent.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+/**
+ * This components represents an options menu with optional
+ * customizable properties. Option IDs should be unique.
+ */
+export interface IOption {
+    label: string;
+    value: string;
+    id: string;
+}
+export interface IOptionsLineComponentProps {
+    options: IOption[];
+    addOptionPlaceholder?: string;
+    onOptionAdded?: (newOption: IOption) => void;
+    onOptionSelected: (selectedOptionValue: string) => void;
+    selectedOptionValue: string;
+    validateNewOptionValue?: (newOptionValue: string) => boolean;
+    addOptionText?: string;
+}
+export declare const OptionsLineComponent: (props: IOptionsLineComponentProps) => JSX.Element;

package/components/lines/OptionsLineComponent.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { TextInputWithSubmit } from "../TextInputWithSubmit.js";
+import style from "./OptionsLineComponent.modules.scss";
+/**
+ * We have two possible states. The user starts in the Default option, and can choose to
+ * add a new option.
+ */
+var OptionStates;
+(function (OptionStates) {
+    OptionStates[OptionStates["Default"] = 0] = "Default";
+    OptionStates[OptionStates["Adding"] = 1] = "Adding";
+})(OptionStates || (OptionStates = {}));
+const _OptionAddKey = "addCustomOption";
+export const OptionsLineComponent = (props) => {
+    var _a;
+    const [optionState, setOptionState] = useState(OptionStates.Default); // State of the component
+    const onOptionChange = (evt) => {
+        if (evt.target.value === _OptionAddKey) {
+            setOptionState(OptionStates.Adding);
+        }
+        else {
+            props.onOptionSelected(evt.target.value);
+        }
+    };
+    const onOptionAdd = (value) => {
+        var _a;
+        const newOptionText = value;
+        const newOption = { label: newOptionText, value: newOptionText, id: Date.now().toString() };
+        (_a = props.onOptionAdded) === null || _a === void 0 ? void 0 : _a.call(props, newOption);
+        props.onOptionSelected(newOption.value);
+        setOptionState(OptionStates.Default);
+    };
+    const onCancelOptionAdd = () => {
+        setOptionState(OptionStates.Default);
+    };
+    return (_jsxs("div", { className: style.optionsLine, children: [optionState === OptionStates.Adding && (_jsx(TextInputWithSubmit, { submitValue: onOptionAdd, placeholder: props.addOptionPlaceholder, validateValue: props.validateNewOptionValue, cancelSubmit: onCancelOptionAdd })), optionState === OptionStates.Default && (_jsxs("select", { className: style.optionsSelect, onChange: onOptionChange, value: props.selectedOptionValue, children: [props.onOptionAdded && (_jsx("option", { value: _OptionAddKey, children: (_a = props.addOptionText) !== null && _a !== void 0 ? _a : "Custom" }, _OptionAddKey)), props.options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.id)))] }))] }));
+};
+//# sourceMappingURL=OptionsLineComponent.js.map

package/components/lines/OptionsLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsLineComponent.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/lines/OptionsLineComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,MAAM,qCAAqC,CAAC;AAsBxD;;;GAGG;AACH,IAAK,YAGJ;AAHD,WAAK,YAAY;IACb,qDAAW,CAAA;IACX,mDAAU,CAAA;AACd,CAAC,EAHI,YAAY,KAAZ,YAAY,QAGhB;AAED,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAExC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAiC,EAAE,EAAE;;IACtE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,yBAAyB;IAE/F,MAAM,cAAc,GAAG,CAAC,GAAmC,EAAE,EAAE;QAC3D,IAAI,GAAG,CAAC,MAAM,CAAC,KAAK,KAAK,aAAa,EAAE;YACpC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SACvC;aAAM;YACH,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC5C;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;;QAClC,MAAM,aAAa,GAAG,KAAK,CAAC;QAC5B,MAAM,SAAS,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC;QAC5F,MAAA,KAAK,CAAC,aAAa,sDAAG,SAAS,CAAC,CAAC;QACjC,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACxC,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,WAAW,aAC5B,WAAW,KAAK,YAAY,CAAC,MAAM,IAAI,CACpC,KAAC,mBAAmB,IAChB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,KAAK,CAAC,oBAAoB,EACvC,aAAa,EAAE,KAAK,CAAC,sBAAsB,EAC3C,YAAY,EAAE,iBAAiB,GACjC,CACL,EACA,WAAW,KAAK,YAAY,CAAC,OAAO,IAAI,CACrC,kBAAQ,SAAS,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,CAAC,mBAAmB,aAC7F,KAAK,CAAC,aAAa,IAAI,CACpB,iBAA4B,KAAK,EAAE,aAAa,YAC3C,MAAA,KAAK,CAAC,aAAa,mCAAI,QAAQ,IADvB,aAAa,CAEjB,CACZ,EACA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC3B,iBAAwB,KAAK,EAAE,MAAM,CAAC,KAAK,YACtC,MAAM,CAAC,KAAK,IADJ,MAAM,CAAC,EAAE,CAEb,CACZ,CAAC,IACG,CACZ,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { ChangeEvent } from \"react\";\r\nimport { useState } from \"react\";\r\nimport { TextInputWithSubmit } from \"../TextInputWithSubmit\";\r\nimport style from \"./OptionsLineComponent.modules.scss\";\r\n\r\n/**\r\n * This components represents an options menu with optional\r\n * customizable properties. Option IDs should be unique.\r\n */\r\nexport interface IOption {\r\n    label: string;\r\n    value: string;\r\n    id: string;\r\n}\r\n\r\nexport interface IOptionsLineComponentProps {\r\n    options: IOption[];\r\n    addOptionPlaceholder?: string; // Placeholder text to display when adding a new option\r\n    onOptionAdded?: (newOption: IOption) => void; // Optional function that can be used to add a new option to the menu\r\n    onOptionSelected: (selectedOptionValue: string) => void;\r\n    selectedOptionValue: string; // The value of the currently selected option\r\n    validateNewOptionValue?: (newOptionValue: string) => boolean; // Optional function that can be used to validate the value of a new option\r\n    addOptionText?: string; // Optional text to display on the add option button\r\n}\r\n\r\n/**\r\n * We have two possible states. The user starts in the Default option, and can choose to\r\n * add a new option.\r\n */\r\nenum OptionStates {\r\n    Default = 0, // Default state,\r\n    Adding = 1, // State when the user is adding a new option to the menu\r\n}\r\n\r\nconst _OptionAddKey = \"addCustomOption\";\r\n\r\nexport const OptionsLineComponent = (props: IOptionsLineComponentProps) => {\r\n    const [optionState, setOptionState] = useState(OptionStates.Default); // State of the component\r\n\r\n    const onOptionChange = (evt: ChangeEvent<HTMLSelectElement>) => {\r\n        if (evt.target.value === _OptionAddKey) {\r\n            setOptionState(OptionStates.Adding);\r\n        } else {\r\n            props.onOptionSelected(evt.target.value);\r\n        }\r\n    };\r\n\r\n    const onOptionAdd = (value: string) => {\r\n        const newOptionText = value;\r\n        const newOption = { label: newOptionText, value: newOptionText, id: Date.now().toString() };\r\n        props.onOptionAdded?.(newOption);\r\n        props.onOptionSelected(newOption.value);\r\n        setOptionState(OptionStates.Default);\r\n    };\r\n\r\n    const onCancelOptionAdd = () => {\r\n        setOptionState(OptionStates.Default);\r\n    };\r\n\r\n    return (\r\n        <div className={style.optionsLine}>\r\n            {optionState === OptionStates.Adding && (\r\n                <TextInputWithSubmit\r\n                    submitValue={onOptionAdd}\r\n                    placeholder={props.addOptionPlaceholder}\r\n                    validateValue={props.validateNewOptionValue}\r\n                    cancelSubmit={onCancelOptionAdd}\r\n                />\r\n            )}\r\n            {optionState === OptionStates.Default && (\r\n                <select className={style.optionsSelect} onChange={onOptionChange} value={props.selectedOptionValue}>\r\n                    {props.onOptionAdded && (\r\n                        <option key={_OptionAddKey} value={_OptionAddKey}>\r\n                            {props.addOptionText ?? \"Custom\"}\r\n                        </option>\r\n                    )}\r\n                    {props.options.map((option) => (\r\n                        <option key={option.id} value={option.value}>\r\n                            {option.label}\r\n                        </option>\r\n                    ))}\r\n                </select>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/lines/OptionsLineComponent.modules.scss

@@ -0,0 +1,12 @@
+.optionsLine {
+    font-family: "acumin-pro-condensed", sans-serif;
+    font-size: 12px;
+    height: 25px;
+    padding-left: 15px;
+}
+
+.optionsSelect {
+    width: 100%;
+    height: 100%;
+    border: unset;
+}

package/lines/lineContainerComponent.js

@@ -34,6 +34,9 @@ export class LineContainerComponent extends React.Component {
             }, 5000);
         }
         else if (this.props.selection.selectedLineContainerTitlesNoFocus.indexOf(this.props.title) > -1) {
+            setTimeout(() => {
+                this.props.selection.selectedLineContainerTitlesNoFocus = [];
+            });
             this.setState({ isExpanded: true, isHighlighted: false });
         }
         else {

package/lines/lineContainerComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"lineContainerComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/lineContainerComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { DataStorage } from \"core/Misc/dataStorage\";\r\nimport type { ISelectedLineContainer } from \"./iSelectedLineContainer\";\r\nimport downArrow from \"./downArrow.svg\";\r\n\r\ninterface ILineContainerComponentProps {\r\n    selection?: ISelectedLineContainer;\r\n    title: string;\r\n    children: any[] | any;\r\n    closed?: boolean;\r\n}\r\n\r\nexport class LineContainerComponent extends React.Component<ILineContainerComponentProps, { isExpanded: boolean; isHighlighted: boolean }> {\r\n    constructor(props: ILineContainerComponentProps) {\r\n        super(props);\r\n\r\n        const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);\r\n\r\n        this.state = { isExpanded: initialState, isHighlighted: false };\r\n    }\r\n\r\n    switchExpandedState(): void {\r\n        const newState = !this.state.isExpanded;\r\n\r\n        DataStorage.WriteBoolean(this.props.title, newState);\r\n\r\n        this.setState({ isExpanded: newState });\r\n    }\r\n\r\n    renderHeader() {\r\n        const className = this.state.isExpanded ? \"collapse\" : \"collapse closed\";\r\n\r\n        return (\r\n            <div className=\"header\" onClick={() => this.switchExpandedState()}>\r\n                <div className=\"title\">{this.props.title}</div>\r\n                <div className={className}>\r\n                    <img className=\"img\" title={this.props.title} src={downArrow} />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    componentDidMount() {\r\n        if (!this.props.selection) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.selection.selectedLineContainerTitles.length === 0 && this.props.selection.selectedLineContainerTitlesNoFocus.length === 0) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.selection.selectedLineContainerTitles.indexOf(this.props.title) > -1) {\r\n            setTimeout(() => {\r\n                this.props.selection!.selectedLineContainerTitles = [];\r\n            });\r\n\r\n            this.setState({ isExpanded: true, isHighlighted: true });\r\n\r\n            window.setTimeout(() => {\r\n                this.setState({ isHighlighted: false });\r\n            }, 5000);\r\n        } else if (this.props.selection.selectedLineContainerTitlesNoFocus.indexOf(this.props.title) > -1) {\r\n            this.setState({ isExpanded: true, isHighlighted: false });\r\n        } else {\r\n            this.setState({ isExpanded: false });\r\n        }\r\n    }\r\n\r\n    render() {\r\n        if (!this.state.isExpanded) {\r\n            return (\r\n                <div className=\"paneContainer\">\r\n                    <div className=\"paneContainer-content\">{this.renderHeader()}</div>\r\n                </div>\r\n            );\r\n        }\r\n\r\n        return (\r\n            <div className=\"paneContainer\">\r\n                <div className=\"paneContainer-content\">\r\n                    {this.renderHeader()}\r\n                    <div className=\"paneList\">{this.props.children}</div>\r\n                </div>\r\n                <div className={\"paneContainer-highlight-border\" + (!this.state.isHighlighted ? \" transparent\" : \"\")}></div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"lineContainerComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/lineContainerComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { DataStorage } from \"core/Misc/dataStorage\";\r\nimport type { ISelectedLineContainer } from \"./iSelectedLineContainer\";\r\nimport downArrow from \"./downArrow.svg\";\r\n\r\ninterface ILineContainerComponentProps {\r\n    selection?: ISelectedLineContainer;\r\n    title: string;\r\n    children: any[] | any;\r\n    closed?: boolean;\r\n}\r\n\r\nexport class LineContainerComponent extends React.Component<ILineContainerComponentProps, { isExpanded: boolean; isHighlighted: boolean }> {\r\n    constructor(props: ILineContainerComponentProps) {\r\n        super(props);\r\n\r\n        const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);\r\n\r\n        this.state = { isExpanded: initialState, isHighlighted: false };\r\n    }\r\n\r\n    switchExpandedState(): void {\r\n        const newState = !this.state.isExpanded;\r\n\r\n        DataStorage.WriteBoolean(this.props.title, newState);\r\n\r\n        this.setState({ isExpanded: newState });\r\n    }\r\n\r\n    renderHeader() {\r\n        const className = this.state.isExpanded ? \"collapse\" : \"collapse closed\";\r\n\r\n        return (\r\n            <div className=\"header\" onClick={() => this.switchExpandedState()}>\r\n                <div className=\"title\">{this.props.title}</div>\r\n                <div className={className}>\r\n                    <img className=\"img\" title={this.props.title} src={downArrow} />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    componentDidMount() {\r\n        if (!this.props.selection) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.selection.selectedLineContainerTitles.length === 0 && this.props.selection.selectedLineContainerTitlesNoFocus.length === 0) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.selection.selectedLineContainerTitles.indexOf(this.props.title) > -1) {\r\n            setTimeout(() => {\r\n                this.props.selection!.selectedLineContainerTitles = [];\r\n            });\r\n\r\n            this.setState({ isExpanded: true, isHighlighted: true });\r\n\r\n            window.setTimeout(() => {\r\n                this.setState({ isHighlighted: false });\r\n            }, 5000);\r\n        } else if (this.props.selection.selectedLineContainerTitlesNoFocus.indexOf(this.props.title) > -1) {\r\n            setTimeout(() => {\r\n                this.props.selection!.selectedLineContainerTitlesNoFocus = [];\r\n            });\r\n            this.setState({ isExpanded: true, isHighlighted: false });\r\n        } else {\r\n            this.setState({ isExpanded: false });\r\n        }\r\n    }\r\n\r\n    render() {\r\n        if (!this.state.isExpanded) {\r\n            return (\r\n                <div className=\"paneContainer\">\r\n                    <div className=\"paneContainer-content\">{this.renderHeader()}</div>\r\n                </div>\r\n            );\r\n        }\r\n\r\n        return (\r\n            <div className=\"paneContainer\">\r\n                <div className=\"paneContainer-content\">\r\n                    {this.renderHeader()}\r\n                    <div className=\"paneList\">{this.props.children}</div>\r\n                </div>\r\n                <div className={\"paneContainer-highlight-border\" + (!this.state.isHighlighted ? \" transparent\" : \"\")}></div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/optionsLineComponent.d.ts

@@ -8,14 +8,9 @@ export interface IOptionsLineComponentProps {
     target: any;
     propertyName: string;
     options: IInspectableOptions[];
-    addInput?: boolean;
     noDirectUpdate?: boolean;
     onSelect?: (value: number | string) => void;
     extractValue?: (target: any) => number | string;
-    addVal?: (newVal: {
-        label: string;
-        value: number;
-    }, prevVal: number) => void;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     allowNullValue?: boolean;
     icon?: string;
@@ -23,13 +18,9 @@ export interface IOptionsLineComponentProps {
     className?: string;
     valuesAreStrings?: boolean;
     defaultIfNull?: number;
-    fromFontDropdown?: boolean;
-    valueProp?: number;
-    fallbackValue?: number;
 }
 export declare class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
     value: number | string;
-    addCustom: boolean;
 }> {
     private _localChange;
     private _remapValueIn;
@@ -38,11 +29,9 @@ export declare class OptionsLineComponent extends React.Component<IOptionsLineCo
     constructor(props: IOptionsLineComponentProps);
     shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
         value: number;
-        addCustom: boolean;
     }): boolean;
     raiseOnPropertyChanged(newValue: number, previousValue: number): void;
     setValue(value: string | number): void;
     updateValue(valueString: string): void;
-    updateCustomValue(): void;
     render(): JSX.Element;
 }

package/lines/optionsLineComponent.js

@@ -2,13 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const Null_Value = Number.MAX_SAFE_INTEGER;
-const DEFAULT_FALLBACK_VALUE = -1;
 export class OptionsLineComponent extends React.Component {
     constructor(props) {
-        // Initialize default props
         super(props);
         this._localChange = false;
-        this.state = { value: this._remapValueIn(this._getValue(props)), addCustom: false };
+        this.state = { value: this._remapValueIn(this._getValue(props)) };
     }
     _remapValueIn(value) {
         return this.props.allowNullValue && value === null ? Null_Value : value;
@@ -27,14 +25,11 @@ export class OptionsLineComponent extends React.Component {
             this._localChange = false;
             return true;
         }
-        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(nextProps.target) : nextProps.target[nextProps.propertyName]);
+        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(this.props.target) : nextProps.target[nextProps.propertyName]);
         if (newValue != null && newValue !== nextState.value) {
             nextState.value = newValue;
             return true;
         }
-        if (this.props.options !== nextProps.options) {
-            return true;
-        }
         return false;
     }
     raiseOnPropertyChanged(newValue, previousValue) {
@@ -53,67 +48,24 @@ export class OptionsLineComponent extends React.Component {
         this.setState({ value: value });
     }
     updateValue(valueString) {
-        var _a, _b;
-        let value = this.props.valuesAreStrings ? valueString : parseInt(valueString);
-        if (isNaN(Number(value))) {
-            for (let i = 0; i < this.props.options.length; i++) {
-                if (((_a = this.props.options.at(i)) === null || _a === void 0 ? void 0 : _a.label) === valueString) {
-                    value = Number((_b = this.props.options.at(i)) === null || _b === void 0 ? void 0 : _b.value);
-                }
-            }
-        }
-        if (value === 0 && this.props.fromFontDropdown) {
-            this.setState({ addCustom: true });
-        }
+        const value = this.props.valuesAreStrings ? valueString : parseInt(valueString);
         this._localChange = true;
         const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];
         if (!this.props.noDirectUpdate) {
             this.props.target[this.props.propertyName] = this._remapValueOut(value);
         }
-        //selecting a regular option from font dropdown
-        if (value != 0 && this.props.fromFontDropdown) {
-            this.setState({ value: value });
-            if (this.props.onSelect) {
-                this.props.onSelect(value);
-            }
-            //selecting 'custom font' from font dropdown
-        }
-        else if (this.props.fromFontDropdown) {
-            if (this.props.onSelect) {
-                this.props.onSelect(this.state.value);
-            }
-        }
-        //selecting from a dropdown that's not font dropdown
-        else {
-            this.setState({ value: value });
-            if (this.props.onSelect) {
-                this.props.onSelect(value);
-            }
+        this.setState({ value: value });
+        if (this.props.onSelect) {
+            this.props.onSelect(value);
         }
         const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];
         this.raiseOnPropertyChanged(newValue, store);
     }
-    updateCustomValue() {
-        this.setState({ addCustom: false });
-    }
     render() {
         var _a;
-        const fallback = this.props.fallbackValue !== undefined ? this.props.fallbackValue : DEFAULT_FALLBACK_VALUE;
-        return (_jsxs("div", { className: `listLine ${(_a = this.props.className) !== null && _a !== void 0 ? _a : ""}`, children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: "options", children: this.state.addCustom ? (_jsx("input", { type: "text", placeholder: "Enter a custom font here", onKeyDown: (event) => {
-                            event.key === "Enter" && this.props.addVal != undefined
-                                ? (this.props.addVal({ label: event.target.value, value: this.props.options.length + 1 }, Number(this.state.value)),
-                                    this.updateCustomValue(),
-                                    this.forceUpdate())
-                                : null;
-                        }, onBlur: (event) => {
-                            this.props.addVal != undefined
-                                ? (this.props.addVal({ label: event.target.value, value: this.props.options.length + 1 }, Number(this.state.value)),
-                                    this.updateCustomValue(),
-                                    this.forceUpdate())
-                                : null;
-                        } })) : (_jsx("select", { onChange: (evt) => this.updateValue(evt.target.value), value: this.state.value === null || this.state.value === undefined ? fallback : this.state.value, children: this.props.options.map((option, i) => {
+        return (_jsxs("div", { className: "listLine" + (this.props.className ? " " + this.props.className : ""), children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: "options", children: _jsx("select", { onChange: (evt) => this.updateValue(evt.target.value), value: (_a = this.state.value) !== null && _a !== void 0 ? _a : "", children: this.props.options.map((option, i) => {
                             return (_jsx("option", { selected: option.selected, value: option.value, title: option.label, children: option.label }, option.label + i));
-                        }) })) })] }));
+                        }) }) })] }));
     }
 }
 //# sourceMappingURL=optionsLineComponent.js.map

package/lines/optionsLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"optionsLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/optionsLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { IInspectableOptions } from \"core/Misc/iInspectable\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const Null_Value = Number.MAX_SAFE_INTEGER;\r\n\r\nconst DEFAULT_FALLBACK_VALUE = -1;\r\n\r\nexport interface IOptionsLineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    options: IInspectableOptions[];\r\n    addInput?: boolean;\r\n    noDirectUpdate?: boolean;\r\n    onSelect?: (value: number | string) => void;\r\n    extractValue?: (target: any) => number | string;\r\n    addVal?: (newVal: { label: string; value: number }, prevVal: number) => void;\r\n\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    allowNullValue?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    className?: string;\r\n    valuesAreStrings?: boolean;\r\n    defaultIfNull?: number;\r\n    fromFontDropdown?: boolean;\r\n    valueProp?: number;\r\n    fallbackValue?: number;\r\n}\r\n\r\nexport class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, { value: number | string; addCustom: boolean }> {\r\n    private _localChange = false;\r\n    private _remapValueIn(value: number | null): number {\r\n        return this.props.allowNullValue && value === null ? Null_Value : value!;\r\n    }\r\n\r\n    private _remapValueOut(value: number): number | null {\r\n        return this.props.allowNullValue && value === Null_Value ? null : value;\r\n    }\r\n\r\n    private _getValue(props: IOptionsLineComponentProps) {\r\n        if (props.extractValue) {\r\n            return props.extractValue(props.target);\r\n        }\r\n        return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];\r\n    }\r\n\r\n    constructor(props: IOptionsLineComponentProps) {\r\n        // Initialize default props\r\n        super(props);\r\n\r\n        this.state = { value: this._remapValueIn(this._getValue(props)), addCustom: false };\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: { value: number; addCustom: boolean }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n\r\n            return true;\r\n        }\r\n\r\n        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(nextProps.target) : nextProps.target[nextProps.propertyName]);\r\n\r\n        if (newValue != null && newValue !== nextState.value) {\r\n            nextState.value = newValue;\r\n\r\n            return true;\r\n        }\r\n\r\n        if (this.props.options !== nextProps.options) {\r\n            return true;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.target,\r\n            property: this.props.propertyName,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n            allowNullValue: this.props.allowNullValue,\r\n        });\r\n    }\r\n\r\n    setValue(value: string | number) {\r\n        this.setState({ value: value });\r\n    }\r\n\r\n    updateValue(valueString: string) {\r\n        let value = this.props.valuesAreStrings ? valueString : parseInt(valueString);\r\n\r\n        if (isNaN(Number(value))) {\r\n            for (let i = 0; i < this.props.options.length; i++) {\r\n                if (this.props.options.at(i)?.label === valueString) {\r\n                    value = Number(this.props.options.at(i)?.value);\r\n                }\r\n            }\r\n        }\r\n\r\n        if (value === 0 && this.props.fromFontDropdown) {\r\n            this.setState({ addCustom: true });\r\n        }\r\n\r\n        this._localChange = true;\r\n\r\n        const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        if (!this.props.noDirectUpdate) {\r\n            this.props.target[this.props.propertyName] = this._remapValueOut(value as number);\r\n        }\r\n\r\n        //selecting a regular option from font dropdown\r\n        if (value != 0 && this.props.fromFontDropdown) {\r\n            this.setState({ value: value });\r\n            if (this.props.onSelect) {\r\n                this.props.onSelect(value);\r\n            }\r\n            //selecting 'custom font' from font dropdown\r\n        } else if (this.props.fromFontDropdown) {\r\n            if (this.props.onSelect) {\r\n                this.props.onSelect(this.state.value);\r\n            }\r\n        }\r\n        //selecting from a dropdown that's not font dropdown\r\n        else {\r\n            this.setState({ value: value });\r\n            if (this.props.onSelect) {\r\n                this.props.onSelect(value);\r\n            }\r\n        }\r\n\r\n        const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        this.raiseOnPropertyChanged(newValue, store);\r\n    }\r\n\r\n    updateCustomValue() {\r\n        this.setState({ addCustom: false });\r\n    }\r\n\r\n    render() {\r\n        const fallback = this.props.fallbackValue !== undefined ? this.props.fallbackValue : DEFAULT_FALLBACK_VALUE;\r\n        return (\r\n            <div className={`listLine ${this.props.className ?? \"\"}`}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} color=\"black\" className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className=\"options\">\r\n                    {this.state.addCustom ? (\r\n                        <input\r\n                            type=\"text\"\r\n                            placeholder=\"Enter a custom font here\"\r\n                            onKeyDown={(event) => {\r\n                                event.key === \"Enter\" && this.props.addVal != undefined\r\n                                    ? (this.props.addVal({ label: (event.target as HTMLInputElement).value, value: this.props.options.length + 1 }, Number(this.state.value)),\r\n                                      this.updateCustomValue(),\r\n                                      this.forceUpdate())\r\n                                    : null;\r\n                            }}\r\n                            onBlur={(event) => {\r\n                                this.props.addVal != undefined\r\n                                    ? (this.props.addVal({ label: (event.target as HTMLInputElement).value, value: this.props.options.length + 1 }, Number(this.state.value)),\r\n                                      this.updateCustomValue(),\r\n                                      this.forceUpdate())\r\n                                    : null;\r\n                            }}\r\n                        />\r\n                    ) : (\r\n                        <select\r\n                            onChange={(evt) => this.updateValue(evt.target.value)}\r\n                            value={this.state.value === null || this.state.value === undefined ? fallback : this.state.value}\r\n                        >\r\n                            {this.props.options.map((option, i) => {\r\n                                return (\r\n                                    <option selected={option.selected} key={option.label + i} value={option.value} title={option.label}>\r\n                                        {option.label}\r\n                                    </option>\r\n                                );\r\n                            })}\r\n                        </select>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"optionsLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/optionsLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { IInspectableOptions } from \"core/Misc/iInspectable\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const Null_Value = Number.MAX_SAFE_INTEGER;\r\n\r\nexport interface IOptionsLineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    options: IInspectableOptions[];\r\n    noDirectUpdate?: boolean;\r\n    onSelect?: (value: number | string) => void;\r\n    extractValue?: (target: any) => number | string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    allowNullValue?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    className?: string;\r\n    valuesAreStrings?: boolean;\r\n    defaultIfNull?: number;\r\n}\r\n\r\nexport class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, { value: number | string }> {\r\n    private _localChange = false;\r\n\r\n    private _remapValueIn(value: number | null): number {\r\n        return this.props.allowNullValue && value === null ? Null_Value : value!;\r\n    }\r\n\r\n    private _remapValueOut(value: number): number | null {\r\n        return this.props.allowNullValue && value === Null_Value ? null : value;\r\n    }\r\n\r\n    private _getValue(props: IOptionsLineComponentProps) {\r\n        if (props.extractValue) {\r\n            return props.extractValue(props.target);\r\n        }\r\n        return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];\r\n    }\r\n\r\n    constructor(props: IOptionsLineComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { value: this._remapValueIn(this._getValue(props)) };\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: { value: number }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(this.props.target) : nextProps.target[nextProps.propertyName]);\r\n        if (newValue != null && newValue !== nextState.value) {\r\n            nextState.value = newValue;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.target,\r\n            property: this.props.propertyName,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n            allowNullValue: this.props.allowNullValue,\r\n        });\r\n    }\r\n\r\n    setValue(value: string | number) {\r\n        this.setState({ value: value });\r\n    }\r\n\r\n    updateValue(valueString: string) {\r\n        const value = this.props.valuesAreStrings ? valueString : parseInt(valueString);\r\n        this._localChange = true;\r\n\r\n        const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        if (!this.props.noDirectUpdate) {\r\n            this.props.target[this.props.propertyName] = this._remapValueOut(value as number);\r\n        }\r\n        this.setState({ value: value });\r\n\r\n        if (this.props.onSelect) {\r\n            this.props.onSelect(value);\r\n        }\r\n\r\n        const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        this.raiseOnPropertyChanged(newValue, store);\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className={\"listLine\" + (this.props.className ? \" \" + this.props.className : \"\")}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} color=\"black\" className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className=\"options\">\r\n                    <select onChange={(evt) => this.updateValue(evt.target.value)} value={this.state.value ?? \"\"}>\r\n                        {this.props.options.map((option, i) => {\r\n                            return (\r\n                                <option selected={option.selected} key={option.label + i} value={option.value} title={option.label}>\r\n                                    {option.label}\r\n                                </option>\r\n                            );\r\n                        })}\r\n                    </select>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/nodeGraphSystem/graphFrame.js

@@ -4,7 +4,7 @@ import { FrameNodePort } from "./frameNodePort.js";
 import { StringTools } from "../stringTools.js";
 import styles from "./graphFrame.modules.scss";
 import commonStyles from "./common.modules.scss";
-import { ClassNames } from "shared-ui-components/components/classNames";
+import { ClassNames } from "../components/classNames.js";
 var ResizingDirection;
 (function (ResizingDirection) {
     ResizingDirection[ResizingDirection["Right"] = 0] = "Right";