@babylonjs/shared-ui-components 5.31.2 → 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs/shared-ui-components",
-    "version": "5.31.2",
+    "version": "5.32.0",
     "main": "index.js",
     "module": "index.js",
     "types": "index.d.ts",

package/stories/bars/CommandBarComponent.stories.d.ts

@@ -1,11 +1,9 @@
 /// <reference types="react" />
+import { CommandBarComponent } from "../../components/bars/CommandBarComponent";
+import type { StoryObj } from "@storybook/react";
 declare const _default: {
     component: import("react").FC<import("../../components/bars/CommandBarComponent").ICommandBarComponentProps>;
 };
 export default _default;
-export declare const Default: {};
-export declare const WithArtboardColor: {
-    parameters: {
-        onArtboardColorChanged: (color: string) => void;
-    };
-};
+export declare const Default: StoryObj<typeof CommandBarComponent>;
+export declare const WithArtboardColor: StoryObj<typeof CommandBarComponent>;

package/stories/bars/CommandBarComponent.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandBarComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/bars/CommandBarComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAEhF,eAAe,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;AAElD,8BAA8B;AAC9B,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC;AAE1B,MAAM,mBAAmB,GAAG,CAAC,KAAa,EAAE,EAAE;IAC1C,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AACpC,CAAC,CAAC;AAEF,sBAAsB;AACtB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC7B,GAAG,OAAO;IACV,UAAU,EAAE,EAAE,sBAAsB,EAAE,mBAAmB,EAAE;CAC9D,CAAC","sourcesContent":["import { CommandBarComponent } from \"../../components/bars/CommandBarComponent\";\r\n\r\nexport default { component: CommandBarComponent };\r\n\r\n// Default rendering function.\r\nexport const Default = {};\r\n\r\nconst artBoardColorChange = (color: string) => {\r\n    console.log(\"new color\", color);\r\n};\r\n\r\n// With Artboard color\r\nexport const WithArtboardColor = {\r\n    ...Default,\r\n    parameters: { onArtboardColorChanged: artBoardColorChange },\r\n};\r\n"]}
+{"version":3,"file":"CommandBarComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/bars/CommandBarComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAGhF,eAAe,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;AAElD,8BAA8B;AAC9B,MAAM,CAAC,MAAM,OAAO,GAAyC,EAAE,CAAC;AAEhE,MAAM,mBAAmB,GAAG,CAAC,KAAa,EAAE,EAAE;IAC1C,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AACpC,CAAC,CAAC;AAEF,sBAAsB;AACtB,MAAM,CAAC,MAAM,iBAAiB,GAAyC;IACnE,GAAG,OAAO;IACV,UAAU,EAAE,EAAE,sBAAsB,EAAE,mBAAmB,EAAE;CAC9D,CAAC","sourcesContent":["import { CommandBarComponent } from \"../../components/bars/CommandBarComponent\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default { component: CommandBarComponent };\r\n\r\n// Default rendering function.\r\nexport const Default: StoryObj<typeof CommandBarComponent> = {};\r\n\r\nconst artBoardColorChange = (color: string) => {\r\n    console.log(\"new color\", color);\r\n};\r\n\r\n// With Artboard color\r\nexport const WithArtboardColor: StoryObj<typeof CommandBarComponent> = {\r\n    ...Default,\r\n    parameters: { onArtboardColorChanged: artBoardColorChange },\r\n};\r\n"]}

package/stories/bars/CommandButtonComponent.stories.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import { CommandButtonComponent } from "../../components/bars/CommandButtonComponent";
+import type { StoryObj } from "@storybook/react";
 declare const _default: {
     component: import("react").FC<import("../../components/bars/CommandButtonComponent").ICommandButtonComponentProps>;
 };
 export default _default;
-export declare const Default: {};
+export declare const Default: StoryObj<typeof CommandButtonComponent>;

package/stories/bars/CommandButtonComponent.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandButtonComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/bars/CommandButtonComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AAEtF,eAAe;IACX,SAAS,EAAE,sBAAsB;CACpC,CAAC;AAEF,6BAA6B;AAC7B,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC","sourcesContent":["import { CommandButtonComponent } from \"../../components/bars/CommandButtonComponent\";\r\n\r\nexport default {\r\n    component: CommandButtonComponent,\r\n};\r\n\r\n// Default rendering function\r\nexport const Default = {};\r\n"]}
+{"version":3,"file":"CommandButtonComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/bars/CommandButtonComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AAGtF,eAAe;IACX,SAAS,EAAE,sBAAsB;CACpC,CAAC;AAEF,6BAA6B;AAC7B,MAAM,CAAC,MAAM,OAAO,GAA4C,EAAE,CAAC","sourcesContent":["import { CommandButtonComponent } from \"../../components/bars/CommandButtonComponent\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default {\r\n    component: CommandButtonComponent,\r\n};\r\n\r\n// Default rendering function\r\nexport const Default: StoryObj<typeof CommandButtonComponent> = {};\r\n"]}

package/stories/colorPicker/ColorPicker.stories.d.ts

@@ -1,11 +1,7 @@
-import { Color3 } from "@babylonjs/core/Maths/math.color.js";
 import { ColorPicker } from "../../components/colorPicker/ColorPicker";
+import type { StoryObj } from "@storybook/react";
 declare const _default: {
     component: typeof ColorPicker;
 };
 export default _default;
-export declare const Default: {
-    args: {
-        color: Color3;
-    };
-};
+export declare const Default: StoryObj<typeof ColorPicker>;

package/stories/colorPicker/ColorPicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/colorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,4CAA8B;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;AAE1C,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC","sourcesContent":["import { Color3 } from \"core/Maths/math.color\";\r\nimport { ColorPicker } from \"../../components/colorPicker/ColorPicker\";\r\n\r\nexport default { component: ColorPicker };\r\n\r\nexport const Default = { args: { color: new Color3(1, 0, 0) } };\r\n"]}
+{"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/colorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,4CAA8B;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAGvE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;AAE1C,MAAM,CAAC,MAAM,OAAO,GAAiC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC","sourcesContent":["import { Color3 } from \"core/Maths/math.color\";\r\nimport { ColorPicker } from \"../../components/colorPicker/ColorPicker\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default { component: ColorPicker };\r\n\r\nexport const Default: StoryObj<typeof ColorPicker> = { args: { color: new Color3(1, 0, 0) } };\r\n"]}

package/stories/layout/FlexibleGridLayout.stories.d.ts

@@ -1,46 +1,10 @@
 /// <reference types="react" />
 import type { IFlexibleGridLayoutProps } from "../../components/layout/FlexibleGridLayout";
+import { FlexibleGridLayout } from "../../components/layout/FlexibleGridLayout";
+import type { StoryObj } from "@storybook/react";
 declare const _default: {
     component: import("react").FC<IFlexibleGridLayoutProps>;
 };
 export default _default;
-export declare const Default: {
-    render: (props: IFlexibleGridLayoutProps) => JSX.Element;
-    args: {
-        layoutDefinition: {
-            columns: {
-                id: string;
-                width: string;
-                rows: {
-                    id: string;
-                    height: string;
-                    selectedTab: string;
-                    tabs: {
-                        id: string;
-                        component: JSX.Element;
-                    }[];
-                }[];
-            }[];
-        };
-    };
-};
-export declare const TwoColumn: {
-    render: (props: IFlexibleGridLayoutProps) => JSX.Element;
-    args: {
-        layoutDefinition: {
-            columns: {
-                id: string;
-                width: string;
-                rows: {
-                    id: string;
-                    height: string;
-                    selectedTab: string;
-                    tabs: {
-                        id: string;
-                        component: JSX.Element;
-                    }[];
-                }[];
-            }[];
-        };
-    };
-};
+export declare const Default: StoryObj<typeof FlexibleGridLayout>;
+export declare const TwoColumn: StoryObj<typeof FlexibleGridLayout>;

package/stories/layout/FlexibleGridLayout.stories.js

@@ -12,8 +12,8 @@ export const Default = {
                     id: "column1",
                     width: "100%",
                     rows: [
-                        { id: "row1", height: "50%", selectedTab: "tab1", tabs: [{ id: "tab1", component: _jsx("div", { children: "Test tab 1" }) }] },
-                        { id: "row2", height: "50%", selectedTab: "tab2", tabs: [{ id: "tab2", component: _jsx("div", { children: "Test tab 2" }) }] },
+                        { id: "row1", height: "50%", selectedTab: "tab1", tabs: [{ id: "tab1", component: _jsx("div", { children: "Test tab 1" }), title: "Tab title 1" }] },
+                        { id: "row2", height: "50%", selectedTab: "tab2", tabs: [{ id: "tab2", component: _jsx("div", { children: "Test tab 2" }), title: "Tab 2" }] },
                     ],
                 },
             ],
@@ -29,16 +29,16 @@ export const TwoColumn = {
                     id: "column1",
                     width: "50%",
                     rows: [
-                        { id: "row1", height: "50%", selectedTab: "tab1", tabs: [{ id: "tab1", component: _jsx("div", { children: "Test tab 1" }) }] },
-                        { id: "row2", height: "50%", selectedTab: "tab2", tabs: [{ id: "tab2", component: _jsx("div", { children: "Test tab 2" }) }] },
+                        { id: "row1", height: "50%", selectedTab: "tab1", tabs: [{ id: "tab1", component: _jsx("div", { children: "Test tab 1" }), title: "T1" }] },
+                        { id: "row2", height: "50%", selectedTab: "tab2", tabs: [{ id: "tab2", component: _jsx("div", { children: "Test tab 2" }), title: "T2" }] },
                     ],
                 },
                 {
                     id: "column2",
                     width: "50%",
                     rows: [
-                        { id: "row1", height: "50%", selectedTab: "tab1", tabs: [{ id: "tab1", component: _jsx("div", { children: "Test tab 1" }) }] },
-                        { id: "row2", height: "50%", selectedTab: "tab2", tabs: [{ id: "tab2", component: _jsx("div", { children: "Test tab 2" }) }] },
+                        { id: "row1", height: "50%", selectedTab: "tab1", tabs: [{ id: "tab1", component: _jsx("div", { children: "Test tab 1" }), title: "T3" }] },
+                        { id: "row2", height: "50%", selectedTab: "tab2", tabs: [{ id: "tab2", component: _jsx("div", { children: "Test tab 2" }), title: "T4" }] },
                     ],
                 },
             ],

package/stories/layout/FlexibleGridLayout.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexibleGridLayout.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/layout/FlexibleGridLayout.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAEhF,eAAe,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;AAEjD,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,MAAM,EAAE,CAAC,KAA+B,EAAE,EAAE;QACxC,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAC1C,KAAC,kBAAkB,OAAK,KAAK,GAAI,GAC/B,CACT,CAAC;IACN,CAAC;IACD,IAAI,EAAE;QACF,gBAAgB,EAAE;YACd,OAAO,EAAE;gBACL;oBACI,EAAE,EAAE,SAAS;oBACb,KAAK,EAAE,MAAM;oBACb,IAAI,EAAE;wBACF,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,CAAC,EAAE;wBAC5G,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,CAAC,EAAE;qBAC/G;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,MAAM,EAAE,OAAO,CAAC,MAAM;IACtB,IAAI,EAAE;QACF,gBAAgB,EAAE;YACd,OAAO,EAAE;gBACL;oBACI,EAAE,EAAE,SAAS;oBACb,KAAK,EAAE,KAAK;oBACZ,IAAI,EAAE;wBACF,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,CAAC,EAAE;wBAC5G,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,CAAC,EAAE;qBAC/G;iBACJ;gBACD;oBACI,EAAE,EAAE,SAAS;oBACb,KAAK,EAAE,KAAK;oBACZ,IAAI,EAAE;wBACF,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,CAAC,EAAE;wBAC5G,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,CAAC,EAAE;qBAC/G;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC","sourcesContent":["import type { IFlexibleGridLayoutProps } from \"../../components/layout/FlexibleGridLayout\";\r\nimport { FlexibleGridLayout } from \"../../components/layout/FlexibleGridLayout\";\r\n\r\nexport default { component: FlexibleGridLayout };\r\n\r\nexport const Default = {\r\n    render: (props: IFlexibleGridLayoutProps) => {\r\n        return (\r\n            <div style={{ width: \"100%\", height: \"500px\" }}>\r\n                <FlexibleGridLayout {...props} />\r\n            </div>\r\n        );\r\n    },\r\n    args: {\r\n        layoutDefinition: {\r\n            columns: [\r\n                {\r\n                    id: \"column1\",\r\n                    width: \"100%\",\r\n                    rows: [\r\n                        { id: \"row1\", height: \"50%\", selectedTab: \"tab1\", tabs: [{ id: \"tab1\", component: <div>Test tab 1</div> }] },\r\n                        { id: \"row2\", height: \"50%\", selectedTab: \"tab2\", tabs: [{ id: \"tab2\", component: <div>Test tab 2</div> }] },\r\n                    ],\r\n                },\r\n            ],\r\n        },\r\n    },\r\n};\r\n\r\nexport const TwoColumn = {\r\n    render: Default.render,\r\n    args: {\r\n        layoutDefinition: {\r\n            columns: [\r\n                {\r\n                    id: \"column1\",\r\n                    width: \"50%\",\r\n                    rows: [\r\n                        { id: \"row1\", height: \"50%\", selectedTab: \"tab1\", tabs: [{ id: \"tab1\", component: <div>Test tab 1</div> }] },\r\n                        { id: \"row2\", height: \"50%\", selectedTab: \"tab2\", tabs: [{ id: \"tab2\", component: <div>Test tab 2</div> }] },\r\n                    ],\r\n                },\r\n                {\r\n                    id: \"column2\",\r\n                    width: \"50%\",\r\n                    rows: [\r\n                        { id: \"row1\", height: \"50%\", selectedTab: \"tab1\", tabs: [{ id: \"tab1\", component: <div>Test tab 1</div> }] },\r\n                        { id: \"row2\", height: \"50%\", selectedTab: \"tab2\", tabs: [{ id: \"tab2\", component: <div>Test tab 2</div> }] },\r\n                    ],\r\n                },\r\n            ],\r\n        },\r\n    },\r\n};\r\n"]}
+{"version":3,"file":"FlexibleGridLayout.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/layout/FlexibleGridLayout.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAGhF,eAAe,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;AAEjD,MAAM,CAAC,MAAM,OAAO,GAAwC;IACxD,MAAM,EAAE,CAAC,KAA+B,EAAE,EAAE;QACxC,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAC1C,KAAC,kBAAkB,OAAK,KAAK,GAAI,GAC/B,CACT,CAAC;IACN,CAAC;IACD,IAAI,EAAE;QACF,gBAAgB,EAAE;YACd,OAAO,EAAE;gBACL;oBACI,EAAE,EAAE,SAAS;oBACb,KAAK,EAAE,MAAM;oBACb,IAAI,EAAE;wBACF,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,EAAE;wBAClI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE;qBAC/H;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAwC;IAC1D,MAAM,EAAE,OAAO,CAAC,MAAM;IACtB,IAAI,EAAE;QACF,gBAAgB,EAAE;YACd,OAAO,EAAE;gBACL;oBACI,EAAE,EAAE,SAAS;oBACb,KAAK,EAAE,KAAK;oBACZ,IAAI,EAAE;wBACF,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE;wBACzH,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE;qBAC5H;iBACJ;gBACD;oBACI,EAAE,EAAE,SAAS;oBACb,KAAK,EAAE,KAAK;oBACZ,IAAI,EAAE;wBACF,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE;wBACzH,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE;qBAC5H;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC","sourcesContent":["import type { IFlexibleGridLayoutProps } from \"../../components/layout/FlexibleGridLayout\";\r\nimport { FlexibleGridLayout } from \"../../components/layout/FlexibleGridLayout\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default { component: FlexibleGridLayout };\r\n\r\nexport const Default: StoryObj<typeof FlexibleGridLayout> = {\r\n    render: (props: IFlexibleGridLayoutProps) => {\r\n        return (\r\n            <div style={{ width: \"100%\", height: \"500px\" }}>\r\n                <FlexibleGridLayout {...props} />\r\n            </div>\r\n        );\r\n    },\r\n    args: {\r\n        layoutDefinition: {\r\n            columns: [\r\n                {\r\n                    id: \"column1\",\r\n                    width: \"100%\",\r\n                    rows: [\r\n                        { id: \"row1\", height: \"50%\", selectedTab: \"tab1\", tabs: [{ id: \"tab1\", component: <div>Test tab 1</div>, title: \"Tab title 1\" }] },\r\n                        { id: \"row2\", height: \"50%\", selectedTab: \"tab2\", tabs: [{ id: \"tab2\", component: <div>Test tab 2</div>, title: \"Tab 2\" }] },\r\n                    ],\r\n                },\r\n            ],\r\n        },\r\n    },\r\n};\r\n\r\nexport const TwoColumn: StoryObj<typeof FlexibleGridLayout> = {\r\n    render: Default.render,\r\n    args: {\r\n        layoutDefinition: {\r\n            columns: [\r\n                {\r\n                    id: \"column1\",\r\n                    width: \"50%\",\r\n                    rows: [\r\n                        { id: \"row1\", height: \"50%\", selectedTab: \"tab1\", tabs: [{ id: \"tab1\", component: <div>Test tab 1</div>, title: \"T1\" }] },\r\n                        { id: \"row2\", height: \"50%\", selectedTab: \"tab2\", tabs: [{ id: \"tab2\", component: <div>Test tab 2</div>, title: \"T2\" }] },\r\n                    ],\r\n                },\r\n                {\r\n                    id: \"column2\",\r\n                    width: \"50%\",\r\n                    rows: [\r\n                        { id: \"row1\", height: \"50%\", selectedTab: \"tab1\", tabs: [{ id: \"tab1\", component: <div>Test tab 1</div>, title: \"T3\" }] },\r\n                        { id: \"row2\", height: \"50%\", selectedTab: \"tab2\", tabs: [{ id: \"tab2\", component: <div>Test tab 2</div>, title: \"T4\" }] },\r\n                    ],\r\n                },\r\n            ],\r\n        },\r\n    },\r\n};\r\n"]}

package/stories/lines/ColorLineComponent.stories.d.ts

@@ -1,21 +1,7 @@
-/// <reference types="react" />
-import { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../../propertyChangedEvent";
-import type { IColorLineComponentProps } from "../../components/lines/ColorLineComponent";
 import { ColorLineComponent } from "../../components/lines/ColorLineComponent";
+import type { StoryObj } from "@storybook/react";
 declare const _default: {
     component: typeof ColorLineComponent;
 };
 export default _default;
-export declare const Default: {
-    render: (args: IColorLineComponentProps) => JSX.Element;
-    args: {
-        target: {};
-        label: string;
-        propertyName: string;
-        lockObject: {
-            lock: boolean;
-        };
-        onPropertyChangedObservable: Observable<PropertyChangedEvent>;
-    };
-};
+export declare const Default: StoryObj<typeof ColorLineComponent>;

package/stories/lines/ColorLineComponent.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorLineComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/ColorLineComponent.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,2CAA6B;AAGlD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAE/E,eAAe,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;AAEjD,MAAM,yBAAyB,GAAG,IAAI,UAAU,EAAwB,CAAC;AAEzE,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,MAAM,EAAE,CAAC,IAA8B,EAAE,EAAE,CAAC,CACxC,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,YACpE,KAAC,kBAAkB,OAAK,IAAI,GAAI,GAC9B,CACT;IACD,IAAI,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,2BAA2B,EAAE,yBAAyB,EAAE;CACjJ,CAAC","sourcesContent":["import { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../../propertyChangedEvent\";\r\nimport type { IColorLineComponentProps } from \"../../components/lines/ColorLineComponent\";\r\nimport { ColorLineComponent } from \"../../components/lines/ColorLineComponent\";\r\n\r\nexport default { component: ColorLineComponent };\r\n\r\nconst propertyChangedObservable = new Observable<PropertyChangedEvent>();\r\n\r\nexport const Default = {\r\n    render: (args: IColorLineComponentProps) => (\r\n        <div style={{ width: \"100%\", display: \"flex\", justifyContent: \"center\" }}>\r\n            <ColorLineComponent {...args} />\r\n        </div>\r\n    ),\r\n    args: { target: {}, label: \"test\", propertyName: \"test\", lockObject: { lock: false }, onPropertyChangedObservable: propertyChangedObservable },\r\n};\r\n"]}
+{"version":3,"file":"ColorLineComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/ColorLineComponent.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,2CAA6B;AAGlD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAG/E,eAAe,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;AAEjD,MAAM,yBAAyB,GAAG,IAAI,UAAU,EAAwB,CAAC;AAEzE,MAAM,CAAC,MAAM,OAAO,GAAwC;IACxD,MAAM,EAAE,CAAC,IAA8B,EAAE,EAAE,CAAC,CACxC,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,YACpE,KAAC,kBAAkB,OAAK,IAAI,GAAI,GAC9B,CACT;IACD,IAAI,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,2BAA2B,EAAE,yBAAyB,EAAE;CACjJ,CAAC","sourcesContent":["import { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../../propertyChangedEvent\";\r\nimport type { IColorLineComponentProps } from \"../../components/lines/ColorLineComponent\";\r\nimport { ColorLineComponent } from \"../../components/lines/ColorLineComponent\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default { component: ColorLineComponent };\r\n\r\nconst propertyChangedObservable = new Observable<PropertyChangedEvent>();\r\n\r\nexport const Default: StoryObj<typeof ColorLineComponent> = {\r\n    render: (args: IColorLineComponentProps) => (\r\n        <div style={{ width: \"100%\", display: \"flex\", justifyContent: \"center\" }}>\r\n            <ColorLineComponent {...args} />\r\n        </div>\r\n    ),\r\n    args: { target: {}, label: \"test\", propertyName: \"test\", lockObject: { lock: false }, onPropertyChangedObservable: propertyChangedObservable },\r\n};\r\n"]}

package/stories/lines/ColorPickerLineComponent.stories.d.ts

@@ -1,14 +1,7 @@
-/// <reference types="react" />
-import { Color3 } from "@babylonjs/core/Maths/math.color.js";
-import type { IColorPickerComponentProps } from "../../components/lines/ColorPickerLineComponent";
 import { ColorPickerLineComponent } from "../../components/lines/ColorPickerLineComponent";
+import type { StoryObj } from "@storybook/react";
 declare const _default: {
     component: typeof ColorPickerLineComponent;
 };
 export default _default;
-export declare const Default: {
-    render: (args: IColorPickerComponentProps) => JSX.Element;
-    args: {
-        value: Color3;
-    };
-};
+export declare const Default: StoryObj<typeof ColorPickerLineComponent>;

package/stories/lines/ColorPickerLineComponent.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerLineComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/ColorPickerLineComponent.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,4CAA8B;AAE/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,iDAAiD,CAAC;AAE3F,eAAe;IACX,SAAS,EAAE,wBAAwB;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,MAAM,EAAE,CAAC,IAAgC,EAAE,EAAE,CAAC,CAC1C,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,YACpE,KAAC,wBAAwB,OAAK,IAAI,GAAI,GACpC,CACT;IACD,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;CACvC,CAAC","sourcesContent":["import { Color3 } from \"core/Maths/math.color\";\r\nimport type { IColorPickerComponentProps } from \"../../components/lines/ColorPickerLineComponent\";\r\nimport { ColorPickerLineComponent } from \"../../components/lines/ColorPickerLineComponent\";\r\n\r\nexport default {\r\n    component: ColorPickerLineComponent,\r\n};\r\n\r\nexport const Default = {\r\n    render: (args: IColorPickerComponentProps) => (\r\n        <div style={{ width: \"100%\", display: \"flex\", justifyContent: \"center\" }}>\r\n            <ColorPickerLineComponent {...args} />\r\n        </div>\r\n    ),\r\n    args: { value: new Color3(1, 0, 0) },\r\n};\r\n"]}
+{"version":3,"file":"ColorPickerLineComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/ColorPickerLineComponent.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,4CAA8B;AAE/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,iDAAiD,CAAC;AAG3F,eAAe;IACX,SAAS,EAAE,wBAAwB;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA8C;IAC9D,MAAM,EAAE,CAAC,IAAgC,EAAE,EAAE,CAAC,CAC1C,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,YACpE,KAAC,wBAAwB,OAAK,IAAI,GAAI,GACpC,CACT;IACD,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;CACvC,CAAC","sourcesContent":["import { Color3 } from \"core/Maths/math.color\";\r\nimport type { IColorPickerComponentProps } from \"../../components/lines/ColorPickerLineComponent\";\r\nimport { ColorPickerLineComponent } from \"../../components/lines/ColorPickerLineComponent\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default {\r\n    component: ColorPickerLineComponent,\r\n};\r\n\r\nexport const Default: StoryObj<typeof ColorPickerLineComponent> = {\r\n    render: (args: IColorPickerComponentProps) => (\r\n        <div style={{ width: \"100%\", display: \"flex\", justifyContent: \"center\" }}>\r\n            <ColorPickerLineComponent {...args} />\r\n        </div>\r\n    ),\r\n    args: { value: new Color3(1, 0, 0) },\r\n};\r\n"]}

package/stories/lines/FileButtonLineComponent.stories.d.ts

@@ -1,6 +1,7 @@
 import { FileButtonLineComponent } from "../../components/lines/FileButtonLineComponent";
+import type { StoryObj } from "@storybook/react";
 declare const _default: {
     component: typeof FileButtonLineComponent;
 };
 export default _default;
-export declare const Default: {};
+export declare const Default: StoryObj<typeof FileButtonLineComponent>;

package/stories/lines/FileButtonLineComponent.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileButtonLineComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/FileButtonLineComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAEzF,eAAe;IACX,SAAS,EAAE,uBAAuB;CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC","sourcesContent":["import { FileButtonLineComponent } from \"../../components/lines/FileButtonLineComponent\";\r\n\r\nexport default {\r\n    component: FileButtonLineComponent,\r\n};\r\n\r\nexport const Default = {};\r\n"]}
+{"version":3,"file":"FileButtonLineComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/FileButtonLineComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAGzF,eAAe;IACX,SAAS,EAAE,uBAAuB;CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA6C,EAAE,CAAC","sourcesContent":["import { FileButtonLineComponent } from \"../../components/lines/FileButtonLineComponent\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default {\r\n    component: FileButtonLineComponent,\r\n};\r\n\r\nexport const Default: StoryObj<typeof FileButtonLineComponent> = {};\r\n"]}

package/stories/lines/NumericInputComponent.stories.d.ts

@@ -1,11 +1,7 @@
 import { NumericInputComponent } from "../../components/lines/NumericInputComponent";
+import type { StoryObj } from "@storybook/react";
 declare const _default: {
     component: typeof NumericInputComponent;
 };
 export default _default;
-export declare const Default: {
-    args: {
-        label: string;
-        value: number;
-    };
-};
+export declare const Default: StoryObj<typeof NumericInputComponent>;

package/stories/lines/NumericInputComponent.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumericInputComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/NumericInputComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAC;AAErF,eAAe,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE;CACpC,CAAC","sourcesContent":["import { NumericInputComponent } from \"../../components/lines/NumericInputComponent\";\r\n\r\nexport default { component: NumericInputComponent };\r\n\r\nexport const Default = {\r\n    args: { label: \"test\", value: 1 },\r\n};\r\n"]}
+{"version":3,"file":"NumericInputComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/NumericInputComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAC;AAGrF,eAAe,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,OAAO,GAA2C;IAC3D,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE;CACpC,CAAC","sourcesContent":["import { NumericInputComponent } from \"../../components/lines/NumericInputComponent\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default { component: NumericInputComponent };\r\n\r\nexport const Default: StoryObj<typeof NumericInputComponent> = {\r\n    args: { label: \"test\", value: 1 },\r\n};\r\n"]}

package/stories/lines/OptionsLineComponent.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const _default: {
+    component: (props: import("../../components/lines/OptionsLineComponent").IOptionsLineComponentProps) => JSX.Element;
+};
+export default _default;
+declare const RenderComponent: (args: any) => JSX.Element;
+export declare const Default: StoryObj<typeof RenderComponent>;
+export declare const WithCustomOptions: StoryObj<typeof RenderComponent>;
+export declare const WithValidation: StoryObj<typeof RenderComponent>;

package/stories/lines/OptionsLineComponent.stories.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { OptionsLineComponent } from "../../components/lines/OptionsLineComponent.js";
+export default { component: OptionsLineComponent };
+const RenderComponent = (args) => {
+    const [options, setOptions] = useState(args.initialOptions);
+    const [selectedOptionValue, setSelectedOptionValue] = useState(args.initialSelectedOptionValue);
+    const onOptionSelected = (selectedOptionValue) => {
+        setSelectedOptionValue(selectedOptionValue);
+    };
+    const onOptionAdded = (newOption) => {
+        setOptions([...options, newOption]);
+    };
+    return (_jsxs("div", { style: { width: "200px" }, children: [_jsx(OptionsLineComponent, { options: options, onOptionSelected: onOptionSelected, selectedOptionValue: selectedOptionValue, onOptionAdded: args.customAdd ? onOptionAdded : undefined, addOptionPlaceholder: args.addOptionPlaceholder, validateNewOptionValue: args.validateNewOptionValue }), _jsxs("div", { children: [_jsx("h3", { children: "Selected option value:" }), _jsx("div", { children: selectedOptionValue })] })] }));
+};
+export const Default = {
+    render: (args) => {
+        return _jsx(RenderComponent, { ...args });
+    },
+    args: {
+        initialOptions: [
+            { label: "Option 1", value: "option1", id: "1" },
+            { label: "Option 2", value: "option2", id: "2" },
+            { label: "Option 3", value: "option3", id: "3" },
+        ],
+        initialSelectedOptionValue: "option1",
+    },
+};
+export const WithCustomOptions = {
+    render: Default.render,
+    args: { ...Default.args, customAdd: true, addOptionPlaceholder: "This is a placeholder" },
+};
+export const WithValidation = {
+    render: Default.render,
+    args: { ...Default.args, customAdd: true, addOptionPlaceholder: "Valid: length > 3", validateNewOptionValue: (value) => value.length > 3 },
+};
+//# sourceMappingURL=OptionsLineComponent.stories.js.map

package/stories/lines/OptionsLineComponent.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsLineComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/OptionsLineComponent.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAGnF,eAAe,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;AAEnD,MAAM,eAAe,GAAG,CAAC,IAAS,EAAE,EAAE;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC5D,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAEhG,MAAM,gBAAgB,GAAG,CAAC,mBAA2B,EAAE,EAAE;QACrD,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;IAChD,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,SAAc,EAAE,EAAE;QACrC,UAAU,CAAC,CAAC,GAAG,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,aAC1B,KAAC,oBAAoB,IACjB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,EAAE,mBAAmB,EACxC,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACzD,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACrD,EACF,0BACI,kDAA+B,EAC/B,wBAAM,mBAAmB,GAAO,IAC9B,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAqC;IACrD,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE;QAClB,OAAO,KAAC,eAAe,OAAK,IAAI,GAAI,CAAC;IACzC,CAAC;IACD,IAAI,EAAE;QACF,cAAc,EAAE;YACZ,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE;YAChD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE;YAChD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE;SACnD;QACD,0BAA0B,EAAE,SAAS;KACxC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAqC;IAC/D,MAAM,EAAE,OAAO,CAAC,MAAM;IACtB,IAAI,EAAE,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,oBAAoB,EAAE,uBAAuB,EAAE;CAC5F,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAqC;IAC5D,MAAM,EAAE,OAAO,CAAC,MAAM;IACtB,IAAI,EAAE,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;CACrJ,CAAC","sourcesContent":["import { useState } from \"react\";\r\nimport { OptionsLineComponent } from \"../../components/lines/OptionsLineComponent\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default { component: OptionsLineComponent };\r\n\r\nconst RenderComponent = (args: any) => {\r\n    const [options, setOptions] = useState(args.initialOptions);\r\n    const [selectedOptionValue, setSelectedOptionValue] = useState(args.initialSelectedOptionValue);\r\n\r\n    const onOptionSelected = (selectedOptionValue: string) => {\r\n        setSelectedOptionValue(selectedOptionValue);\r\n    };\r\n\r\n    const onOptionAdded = (newOption: any) => {\r\n        setOptions([...options, newOption]);\r\n    };\r\n\r\n    return (\r\n        <div style={{ width: \"200px\" }}>\r\n            <OptionsLineComponent\r\n                options={options}\r\n                onOptionSelected={onOptionSelected}\r\n                selectedOptionValue={selectedOptionValue}\r\n                onOptionAdded={args.customAdd ? onOptionAdded : undefined}\r\n                addOptionPlaceholder={args.addOptionPlaceholder} // Placeholder text to display when adding a new option\r\n                validateNewOptionValue={args.validateNewOptionValue} // Optional function that can be used to validate the value of a new option\r\n            />\r\n            <div>\r\n                <h3>Selected option value:</h3>\r\n                <div>{selectedOptionValue}</div>\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n\r\nexport const Default: StoryObj<typeof RenderComponent> = {\r\n    render: (args: any) => {\r\n        return <RenderComponent {...args} />;\r\n    },\r\n    args: {\r\n        initialOptions: [\r\n            { label: \"Option 1\", value: \"option1\", id: \"1\" },\r\n            { label: \"Option 2\", value: \"option2\", id: \"2\" },\r\n            { label: \"Option 3\", value: \"option3\", id: \"3\" },\r\n        ],\r\n        initialSelectedOptionValue: \"option1\",\r\n    },\r\n};\r\n\r\nexport const WithCustomOptions: StoryObj<typeof RenderComponent> = {\r\n    render: Default.render,\r\n    args: { ...Default.args, customAdd: true, addOptionPlaceholder: \"This is a placeholder\" },\r\n};\r\n\r\nexport const WithValidation: StoryObj<typeof RenderComponent> = {\r\n    render: Default.render,\r\n    args: { ...Default.args, customAdd: true, addOptionPlaceholder: \"Valid: length > 3\", validateNewOptionValue: (value: string) => value.length > 3 },\r\n};\r\n"]}