@babylonjs/shared-ui-components 8.13.0 → 8.14.0

package/fluent/primitives/input.d.ts

@@ -1,8 +1,14 @@
 import type { FunctionComponent } from "react";
-import type { InputProps as FluentInputProps } from "@fluentui/react-components";
+import type { BaseComponentProps } from "../hoc/propertyLine.js";
+export type InputProps<T extends string | number> = BaseComponentProps<T> & {
+    step?: number;
+    placeholder?: string;
+    min?: number;
+    max?: number;
+};
 /**
  * This is an input text box that stops propagation of change events and sets its width based on the type of input (text or number)
  * @param props
  * @returns
  */
-export declare const Input: FunctionComponent<FluentInputProps>;
+export declare const Input: FunctionComponent<InputProps<string | number>>;

package/fluent/primitives/input.js

@@ -4,6 +4,7 @@ import { Input as FluentInput, makeStyles } from "@fluentui/react-components";
 const useInputStyles = makeStyles({
     text: {
         height: "auto",
+        textAlign: "right",
     },
     float: {
         height: "auto",
@@ -22,19 +23,14 @@ export const Input = (props) => {
     useEffect(() => {
         setValue(props.value ?? ""); // Update local state when props.value changes
     }, [props.value]);
-    const handleChange = (event, data) => {
+    const handleChange = (event, _) => {
         event.stopPropagation(); // Prevent event propagation
-        if (props.onChange) {
-            props.onChange(event, data); // Call the original onChange handler passed as prop
-        }
+        props.onChange(event.target.value); // Call the original onChange handler passed as prop
         setValue(event.target.value); // Update local state with the new value
     };
     const handleKeyDown = (event) => {
         event.stopPropagation(); // Prevent event propagation
-        if (props.onKeyDown) {
-            props.onKeyDown(event); // Call the original onKeyDown handler passed as prop
-        }
     };
-    return _jsx(FluentInput, { ...props, value: value, className: props.type === "number" ? classes.float : classes.text, onChange: handleChange, onKeyDown: handleKeyDown });
+    return (_jsx(FluentInput, { ...props, type: typeof props.value === "number" ? "number" : "text", size: "small", value: value.toString(), className: typeof props.value === "number" ? classes.float : classes.text, onChange: handleChange, onKeyDown: handleKeyDown }));
 };
 //# sourceMappingURL=input.js.map

package/fluent/primitives/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE9E,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,IAAI,EAAE;QACF,MAAM,EAAE,MAAM;KACjB;IACD,KAAK,EAAE;QACH,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM,EAAE,+BAA+B;QAC9C,UAAU,EAAE,CAAC;KAChB;CACJ,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,KAAK,GAAwC,CAAC,KAAK,EAAE,EAAE;IAChE,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,8CAA8C;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,IAAS,EAAE,EAAE;QACrE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACjB,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,oDAAoD;QACrF,CAAC;QACD,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,wCAAwC;IAC1E,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC7D,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YAClB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,qDAAqD;QACjF,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,KAAC,WAAW,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AACzK,CAAC,CAAC","sourcesContent":["import type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nimport type { InputProps as FluentInputProps } from \"@fluentui/react-components\";\r\nimport { Input as FluentInput, makeStyles } from \"@fluentui/react-components\";\r\n\r\nconst useInputStyles = makeStyles({\r\n    text: {\r\n        height: \"auto\",\r\n    },\r\n    float: {\r\n        height: \"auto\",\r\n        width: \"80px\", // Fixed width for number input\r\n        flexShrink: 0,\r\n    },\r\n});\r\n\r\n/**\r\n * This is an input text box that stops propagation of change events and sets its width based on the type of input (text or number)\r\n * @param props\r\n * @returns\r\n */\r\nexport const Input: FunctionComponent<FluentInputProps> = (props) => {\r\n    const classes = useInputStyles();\r\n    const [value, setValue] = useState(props.value ?? \"\");\r\n\r\n    useEffect(() => {\r\n        setValue(props.value ?? \"\"); // Update local state when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleChange = (event: ChangeEvent<HTMLInputElement>, data: any) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        if (props.onChange) {\r\n            props.onChange(event, data); // Call the original onChange handler passed as prop\r\n        }\r\n        setValue(event.target.value); // Update local state with the new value\r\n    };\r\n\r\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        if (props.onKeyDown) {\r\n            props.onKeyDown(event); // Call the original onKeyDown handler passed as prop\r\n        }\r\n    };\r\n\r\n    return <FluentInput {...props} value={value} className={props.type === \"number\" ? classes.float : classes.text} onChange={handleChange} onKeyDown={handleKeyDown} />;\r\n};\r\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAG9E,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,IAAI,EAAE;QACF,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,OAAO;KACrB;IACD,KAAK,EAAE;QACH,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM,EAAE,+BAA+B;QAC9C,UAAU,EAAE,CAAC;KAChB;CACJ,CAAC,CAAC;AAQH;;;;GAIG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmD,CAAC,KAAK,EAAE,EAAE;IAC3E,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,8CAA8C;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,CAAU,EAAE,EAAE;QACtE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,oDAAoD;QACxF,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,wCAAwC;IAC1E,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC7D,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;IACzD,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,WAAW,OACJ,KAAK,EACT,IAAI,EAAE,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EACzD,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EACvB,SAAS,EAAE,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EACzE,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,aAAa,GAC1B,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nimport { Input as FluentInput, makeStyles } from \"@fluentui/react-components\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useInputStyles = makeStyles({\r\n    text: {\r\n        height: \"auto\",\r\n        textAlign: \"right\",\r\n    },\r\n    float: {\r\n        height: \"auto\",\r\n        width: \"80px\", // Fixed width for number input\r\n        flexShrink: 0,\r\n    },\r\n});\r\n\r\nexport type InputProps<T extends string | number> = BaseComponentProps<T> & {\r\n    step?: number;\r\n    placeholder?: string;\r\n    min?: number;\r\n    max?: number;\r\n};\r\n/**\r\n * This is an input text box that stops propagation of change events and sets its width based on the type of input (text or number)\r\n * @param props\r\n * @returns\r\n */\r\nexport const Input: FunctionComponent<InputProps<string | number>> = (props) => {\r\n    const classes = useInputStyles();\r\n    const [value, setValue] = useState(props.value ?? \"\");\r\n\r\n    useEffect(() => {\r\n        setValue(props.value ?? \"\"); // Update local state when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleChange = (event: ChangeEvent<HTMLInputElement>, _: unknown) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        props.onChange(event.target.value); // Call the original onChange handler passed as prop\r\n        setValue(event.target.value); // Update local state with the new value\r\n    };\r\n\r\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n    };\r\n\r\n    return (\r\n        <FluentInput\r\n            {...props}\r\n            type={typeof props.value === \"number\" ? \"number\" : \"text\"}\r\n            size=\"small\"\r\n            value={value.toString()}\r\n            className={typeof props.value === \"number\" ? classes.float : classes.text}\r\n            onChange={handleChange}\r\n            onKeyDown={handleKeyDown}\r\n        />\r\n    );\r\n};\r\n"]}

package/fluent/primitives/spinButton.d.ts

@@ -0,0 +1,4 @@
+import type { FunctionComponent } from "react";
+import type { BaseComponentProps } from "../hoc/propertyLine.js";
+export type SpinButtonProps = BaseComponentProps<number>;
+export declare const SpinButton: FunctionComponent<SpinButtonProps>;

package/fluent/primitives/spinButton.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles, SpinButton as FluentSpinButton } from "@fluentui/react-components";
+import { useCallback, useState } from "react";
+const useSpinStyles = makeStyles({
+    base: {
+        display: "flex",
+        flexDirection: "column",
+    },
+});
+export const SpinButton = (props) => {
+    const classes = useSpinStyles();
+    const [spinButtonValue, setSpinButtonValue] = useState(props.value);
+    const onSpinButtonChange = useCallback((_ev, data) => {
+        // Stop propagation of the event to prevent it from bubbling up
+        _ev.stopPropagation();
+        if (data.value !== undefined) {
+            setSpinButtonValue(data.value);
+        }
+        else if (data.displayValue !== undefined) {
+            const newValue = parseFloat(data.displayValue);
+            if (!Number.isNaN(newValue)) {
+                setSpinButtonValue(newValue);
+            }
+        }
+    }, [setSpinButtonValue]);
+    return (_jsx("div", { className: classes.base, children: _jsx(FluentSpinButton, { value: spinButtonValue, onChange: onSpinButtonChange }) }));
+};
+//# sourceMappingURL=spinButton.js.map

package/fluent/primitives/spinButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAGxF,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG9C,MAAM,aAAa,GAAG,UAAU,CAAC;IAC7B,IAAI,EAAE;QACF,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KAC1B;CACJ,CAAC,CAAC;AAIH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;IAEhC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAgB,KAAK,CAAC,KAAK,CAAC,CAAC;IAEnF,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,GAA0B,EAAE,IAA4B,EAAE,EAAE;QACzD,+DAA+D;QAC/D,GAAG,CAAC,eAAe,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC3B,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;aAAM,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE,CAAC;YACzC,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAC/C,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC1B,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YACjC,CAAC;QACL,CAAC;IACL,CAAC,EACD,CAAC,kBAAkB,CAAC,CACvB,CAAC;IAEF,OAAO,CACH,cAAK,SAAS,EAAE,OAAO,CAAC,IAAI,YACxB,KAAC,gBAAgB,IAAC,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,kBAAkB,GAAI,GACxE,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { makeStyles, SpinButton as FluentSpinButton } from \"@fluentui/react-components\";\r\nimport type { SpinButtonOnChangeData, SpinButtonChangeEvent } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { useCallback, useState } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useSpinStyles = makeStyles({\r\n    base: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    },\r\n});\r\n\r\nexport type SpinButtonProps = BaseComponentProps<number>;\r\n\r\nexport const SpinButton: FunctionComponent<SpinButtonProps> = (props) => {\r\n    const classes = useSpinStyles();\r\n\r\n    const [spinButtonValue, setSpinButtonValue] = useState<number | null>(props.value);\r\n\r\n    const onSpinButtonChange = useCallback(\r\n        (_ev: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            // Stop propagation of the event to prevent it from bubbling up\r\n            _ev.stopPropagation();\r\n\r\n            if (data.value !== undefined) {\r\n                setSpinButtonValue(data.value);\r\n            } else if (data.displayValue !== undefined) {\r\n                const newValue = parseFloat(data.displayValue);\r\n                if (!Number.isNaN(newValue)) {\r\n                    setSpinButtonValue(newValue);\r\n                }\r\n            }\r\n        },\r\n        [setSpinButtonValue]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.base}>\r\n            <FluentSpinButton value={spinButtonValue} onChange={onSpinButtonChange} />\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/switch.d.ts

@@ -1,8 +1,9 @@
-import type { SwitchProps as FluentSwitchProps } from "@fluentui/react-components";
 import type { FunctionComponent } from "react";
+import type { BaseComponentProps } from "../hoc/propertyLine.js";
+export type SwitchProps = BaseComponentProps<boolean>;
 /**
  * This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools
  * @param props
  * @returns Switch component
  */
-export declare const Switch: FunctionComponent<FluentSwitchProps>;
+export declare const Switch: FunctionComponent<SwitchProps>;

package/fluent/primitives/switch.js

@@ -6,7 +6,7 @@ const useSwitchStyles = makeStyles({
         marginLeft: "auto",
     },
     indicator: {
-        marginRight: 0, // Remove the default right margin so the switch aligns well on the right side inside panels like the properties pane.
+        margin: 0, // Remove the default right margin so the switch aligns well on the right side inside panels like the properties pane.
     },
 });
 /**
@@ -16,16 +16,16 @@ const useSwitchStyles = makeStyles({
  */
 export const Switch = (props) => {
     const classes = useSwitchStyles();
-    const [checked, setChecked] = useState(() => props.checked ?? false);
+    const [checked, setChecked] = useState(() => props.value ?? false);
     useEffect(() => {
-        if (props.checked != undefined) {
-            setChecked(props.checked); // Update local state when props.checked changes
+        if (props.value != undefined) {
+            setChecked(props.value); // Update local state when props.checked changes
         }
-    }, [props.checked]);
-    const onChange = (event, data) => {
-        props.onChange && props.onChange(event, data);
+    }, [props.value]);
+    const onChange = (event, _) => {
+        props.onChange && props.onChange(event.target.checked);
         setChecked(event.target.checked);
     };
-    return _jsx(FluentSwitch, { ...props, className: classes.switch, indicator: { className: classes.indicator }, checked: checked, onChange: onChange });
+    return _jsx(FluentSwitch, { className: classes.switch, indicator: { className: classes.indicator }, checked: checked, onChange: onChange });
 };
 //# sourceMappingURL=switch.js.map

package/fluent/primitives/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/switch.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,eAAe,GAAG,UAAU,CAAC;IAC/B,MAAM,EAAE;QACJ,UAAU,EAAE,MAAM;KACrB;IACD,SAAS,EAAE;QACP,WAAW,EAAE,CAAC,EAAE,sHAAsH;KACzI;CACJ,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAyC,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC;IAErE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC;YAC7B,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,gDAAgD;QAC/E,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpB,MAAM,QAAQ,GAAG,CAAC,KAAoC,EAAE,IAAwB,EAAE,EAAE;QAChF,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC9C,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,KAAC,YAAY,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACrJ,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/no-internal-modules\r\n\r\nimport type { SwitchOnChangeData, SwitchProps as FluentSwitchProps } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\n\r\nimport { makeStyles, Switch as FluentSwitch } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nconst useSwitchStyles = makeStyles({\r\n    switch: {\r\n        marginLeft: \"auto\",\r\n    },\r\n    indicator: {\r\n        marginRight: 0, // Remove the default right margin so the switch aligns well on the right side inside panels like the properties pane.\r\n    },\r\n});\r\n\r\n/**\r\n * This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools\r\n * @param props\r\n * @returns Switch component\r\n */\r\nexport const Switch: FunctionComponent<FluentSwitchProps> = (props) => {\r\n    const classes = useSwitchStyles();\r\n    const [checked, setChecked] = useState(() => props.checked ?? false);\r\n\r\n    useEffect(() => {\r\n        if (props.checked != undefined) {\r\n            setChecked(props.checked); // Update local state when props.checked changes\r\n        }\r\n    }, [props.checked]);\r\n\r\n    const onChange = (event: ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => {\r\n        props.onChange && props.onChange(event, data);\r\n        setChecked(event.target.checked);\r\n    };\r\n\r\n    return <FluentSwitch {...props} className={classes.switch} indicator={{ className: classes.indicator }} checked={checked} onChange={onChange} />;\r\n};\r\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/switch.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,eAAe,GAAG,UAAU,CAAC;IAC/B,MAAM,EAAE;QACJ,UAAU,EAAE,MAAM;KACrB;IACD,SAAS,EAAE;QACP,MAAM,EAAE,CAAC,EAAE,sHAAsH;KACpI;CACJ,CAAC,CAAC;AAIH;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,KAAK,IAAI,SAAS,EAAE,CAAC;YAC3B,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,gDAAgD;QAC7E,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,QAAQ,GAAG,CAAC,KAAoC,EAAE,CAAqB,EAAE,EAAE;QAC7E,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACvD,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,KAAC,YAAY,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AAC1I,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/no-internal-modules\r\n\r\nimport type { SwitchOnChangeData } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\n\r\nimport { makeStyles, Switch as FluentSwitch } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useSwitchStyles = makeStyles({\r\n    switch: {\r\n        marginLeft: \"auto\",\r\n    },\r\n    indicator: {\r\n        margin: 0, // Remove the default right margin so the switch aligns well on the right side inside panels like the properties pane.\r\n    },\r\n});\r\n\r\nexport type SwitchProps = BaseComponentProps<boolean>;\r\n\r\n/**\r\n * This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools\r\n * @param props\r\n * @returns Switch component\r\n */\r\nexport const Switch: FunctionComponent<SwitchProps> = (props) => {\r\n    const classes = useSwitchStyles();\r\n    const [checked, setChecked] = useState(() => props.value ?? false);\r\n\r\n    useEffect(() => {\r\n        if (props.value != undefined) {\r\n            setChecked(props.value); // Update local state when props.checked changes\r\n        }\r\n    }, [props.value]);\r\n\r\n    const onChange = (event: ChangeEvent<HTMLInputElement>, _: SwitchOnChangeData) => {\r\n        props.onChange && props.onChange(event.target.checked);\r\n        setChecked(event.target.checked);\r\n    };\r\n\r\n    return <FluentSwitch className={classes.switch} indicator={{ className: classes.indicator }} checked={checked} onChange={onChange} />;\r\n};\r\n"]}

package/fluent/primitives/syncedSlider.d.ts

@@ -1,14 +1,9 @@
-import type { InputProps, SliderProps } from "@fluentui/react-components";
 import type { FunctionComponent } from "react";
-export type SyncedSliderProps = Omit<InputProps & SliderProps, "onChange" | "value"> & {
-    /**
-     * Callback to notify parent of value change, override both of the slider/input handlers
-     */
-    onChange: (value: number) => void;
-    /**
-     * Controlled value for the slider and input
-     */
-    value: number;
+import type { BaseComponentProps } from "../hoc/propertyLine.js";
+export type SyncedSliderProps = BaseComponentProps<number> & {
+    min?: number;
+    max?: number;
+    step?: number;
 };
 /**
  * Component which synchronizes a slider and an input field, allowing the user to change a value using either control

package/fluent/primitives/syncedSlider.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { makeStyles, Slider } from "@fluentui/react-components";
+import { makeStyles, Slider, tokens } from "@fluentui/react-components";
 import { Input } from "./input.js";
 import { useEffect, useState } from "react";
 const useSyncedSliderStyles = makeStyles({
     syncedSlider: {
         display: "flex",
         alignItems: "center",
-        gap: "1rem",
+        gap: tokens.spacingHorizontalXXS, // 2px
         width: "100%", // Only fill available space
     },
     slider: {
@@ -30,16 +30,17 @@ export const SyncedSliderInput = (props) => {
         setValue(props.value ?? ""); // Update local state when props.value changes
     }, [props.value]);
     const handleSliderChange = (_, data) => {
-        setValue(data.value);
-        props.onChange(data.value); // Notify parent
+        const value = data.value;
+        setValue(value);
+        props.onChange(value); // Notify parent
     };
-    const handleInputChange = (e) => {
-        const newValue = Number(e.target.value);
+    const handleInputChange = (value) => {
+        const newValue = Number(value);
         if (!isNaN(newValue)) {
             setValue(newValue);
             props.onChange(newValue); // Notify parent
         }
     };
-    return (_jsxs("div", { className: classes.syncedSlider, children: [_jsx(Slider, { ...props, className: classes.slider, value: value, onChange: handleSliderChange }), _jsx(Input, { ...props, type: "number", value: value.toString(), onChange: handleInputChange })] }));
+    return (_jsxs("div", { className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && _jsx(Slider, { ...props, size: "small", className: classes.slider, value: value, onChange: handleSliderChange }), _jsx(Input, { ...props, className: classes.input, value: value, onChange: handleInputChange, step: props.step })] }));
 };
 //# sourceMappingURL=syncedSlider.js.map

package/fluent/primitives/syncedSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"syncedSlider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,qBAAqB,GAAG,UAAU,CAAC;IACrC,YAAY,EAAE;QACV,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,MAAM;QACX,KAAK,EAAE,MAAM,EAAE,4BAA4B;KAC9C;IACD,MAAM,EAAE;QACJ,QAAQ,EAAE,CAAC,EAAE,kBAAkB;QAC/B,QAAQ,EAAE,CAAC,EAAE,yBAAyB;KACzC;IACD,KAAK,EAAE;QACH,KAAK,EAAE,MAAM,EAAE,+BAA+B;QAC9C,UAAU,EAAE,CAAC;KAChB;CACJ,CAAC,CAAC;AAaH;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAyC,CAAC,KAAK,EAAE,EAAE;IAC7E,MAAM,OAAO,GAAG,qBAAqB,EAAE,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,KAAK,CAAC,KAAK,CAAC,CAAC;IAExD,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,8CAA8C;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,IAAwB,EAAE,EAAE;QACtF,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrB,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,gBAAgB;IAChD,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC3D,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACxC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACnB,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB;QAC9C,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,OAAO,CAAC,YAAY,aAChC,KAAC,MAAM,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,kBAAkB,GAAI,EAC5F,KAAC,KAAK,OAAK,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,iBAAiB,GAAI,IACtF,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { InputProps, SliderOnChangeData, SliderProps } from \"@fluentui/react-components\";\r\nimport { makeStyles, Slider } from \"@fluentui/react-components\";\r\nimport { Input } from \"./input\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nconst useSyncedSliderStyles = makeStyles({\r\n    syncedSlider: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        gap: \"1rem\",\r\n        width: \"100%\", // Only fill available space\r\n    },\r\n    slider: {\r\n        flexGrow: 1, // Let slider grow\r\n        minWidth: 0, // Allow shrink if needed\r\n    },\r\n    input: {\r\n        width: \"80px\", // Fixed width for number input\r\n        flexShrink: 0,\r\n    },\r\n});\r\n\r\nexport type SyncedSliderProps = Omit<InputProps & SliderProps, \"onChange\" | \"value\"> & {\r\n    /**\r\n     * Callback to notify parent of value change, override both of the slider/input handlers\r\n     */\r\n    onChange: (value: number) => void;\r\n    /**\r\n     * Controlled value for the slider and input\r\n     */\r\n    value: number;\r\n};\r\n\r\n/**\r\n * Component which synchronizes a slider and an input field, allowing the user to change a value using either control\r\n * @param props\r\n * @returns SyncedSlider component\r\n */\r\nexport const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) => {\r\n    const classes = useSyncedSliderStyles();\r\n    const [value, setValue] = useState<number>(props.value);\r\n\r\n    useEffect(() => {\r\n        setValue(props.value ?? \"\"); // Update local state when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {\r\n        setValue(data.value);\r\n        props.onChange(data.value); // Notify parent\r\n    };\r\n\r\n    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\r\n        const newValue = Number(e.target.value);\r\n        if (!isNaN(newValue)) {\r\n            setValue(newValue);\r\n            props.onChange(newValue); // Notify parent\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div className={classes.syncedSlider}>\r\n            <Slider {...props} className={classes.slider} value={value} onChange={handleSliderChange} />\r\n            <Input {...props} type=\"number\" value={value.toString()} onChange={handleInputChange} />\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"syncedSlider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,qBAAqB,GAAG,UAAU,CAAC;IACrC,YAAY,EAAE;QACV,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM;QACxC,KAAK,EAAE,MAAM,EAAE,4BAA4B;KAC9C;IACD,MAAM,EAAE;QACJ,QAAQ,EAAE,CAAC,EAAE,kBAAkB;QAC/B,QAAQ,EAAE,CAAC,EAAE,yBAAyB;KACzC;IACD,KAAK,EAAE;QACH,KAAK,EAAE,MAAM,EAAE,+BAA+B;QAC9C,UAAU,EAAE,CAAC;KAChB;CACJ,CAAC,CAAC;AAQH;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAyC,CAAC,KAAK,EAAE,EAAE;IAC7E,MAAM,OAAO,GAAG,qBAAqB,EAAE,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,KAAK,CAAC,KAAK,CAAC,CAAC;IAExD,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,8CAA8C;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,IAAwB,EAAE,EAAE;QACtF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,gBAAgB;IAC3C,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAAsB,EAAE,EAAE;QACjD,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACnB,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB;QAC9C,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,OAAO,CAAC,YAAY,aAC/B,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAC,MAAM,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,kBAAkB,GAAI,EAChK,KAAC,KAAK,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,IACzG,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { SliderOnChangeData } from \"@fluentui/react-components\";\r\nimport { makeStyles, Slider, tokens } from \"@fluentui/react-components\";\r\nimport { Input } from \"./input\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useSyncedSliderStyles = makeStyles({\r\n    syncedSlider: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        gap: tokens.spacingHorizontalXXS, // 2px\r\n        width: \"100%\", // Only fill available space\r\n    },\r\n    slider: {\r\n        flexGrow: 1, // Let slider grow\r\n        minWidth: 0, // Allow shrink if needed\r\n    },\r\n    input: {\r\n        width: \"80px\", // Fixed width for number input\r\n        flexShrink: 0,\r\n    },\r\n});\r\n\r\nexport type SyncedSliderProps = BaseComponentProps<number> & {\r\n    min?: number;\r\n    max?: number;\r\n    step?: number;\r\n};\r\n\r\n/**\r\n * Component which synchronizes a slider and an input field, allowing the user to change a value using either control\r\n * @param props\r\n * @returns SyncedSlider component\r\n */\r\nexport const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) => {\r\n    const classes = useSyncedSliderStyles();\r\n    const [value, setValue] = useState<number>(props.value);\r\n\r\n    useEffect(() => {\r\n        setValue(props.value ?? \"\"); // Update local state when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {\r\n        const value = data.value;\r\n        setValue(value);\r\n        props.onChange(value); // Notify parent\r\n    };\r\n\r\n    const handleInputChange = (value: string | number) => {\r\n        const newValue = Number(value);\r\n        if (!isNaN(newValue)) {\r\n            setValue(newValue);\r\n            props.onChange(newValue); // Notify parent\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div className={classes.syncedSlider}>\r\n            {props.min !== undefined && props.max !== undefined && <Slider {...props} size=\"small\" className={classes.slider} value={value} onChange={handleSliderChange} />}\r\n            <Input {...props} className={classes.input} value={value} onChange={handleInputChange} step={props.step} />\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/textarea.d.ts

@@ -1,5 +1,9 @@
 import type { TextareaProps as FluentTextareaProps } from "@fluentui/react-components";
 import type { FunctionComponent } from "react";
+import type { BaseComponentProps } from "../hoc/propertyLine.js";
+export type TextareaProps = BaseComponentProps<string> & {
+    placeholder?: string;
+};
 /**
  * This is a texarea box that stops propagation of change/keydown events
  * @param props

package/fluent/primitives/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textarea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGpF,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,QAAQ,EAAE,EAAE;CACf,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,KAAK,EAAE,EAAE;IACtE,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,CAAC,KAAuC,EAAE,IAAS,EAAE,EAAE;QACxE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACjB,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,oDAAoD;QACrF,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAyC,EAAE,EAAE;QAChE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YAClB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,qDAAqD;QACjF,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AACxH,CAAC,CAAC","sourcesContent":["import type { TextareaProps as FluentTextareaProps } from \"@fluentui/react-components\";\r\nimport { Textarea as FluentTextarea, makeStyles } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\n\r\nconst useInputStyles = makeStyles({\r\n    textarea: {},\r\n});\r\n\r\n/**\r\n * This is a texarea box that stops propagation of change/keydown events\r\n * @param props\r\n * @returns\r\n */\r\nexport const Textarea: FunctionComponent<FluentTextareaProps> = (props) => {\r\n    const classes = useInputStyles();\r\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>, data: any) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        if (props.onChange) {\r\n            props.onChange(event, data); // Call the original onChange handler passed as prop\r\n        }\r\n    };\r\n\r\n    const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        if (props.onKeyDown) {\r\n            props.onKeyDown(event); // Call the original onKeyDown handler passed as prop\r\n        }\r\n    };\r\n\r\n    return <FluentTextarea {...props} className={classes.textarea} onChange={handleChange} onKeyDown={handleKeyDown} />;\r\n};\r\n"]}
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textarea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAIpF,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,QAAQ,EAAE,EAAE;CACf,CAAC,CAAC;AAMH;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,KAAK,EAAE,EAAE;IACtE,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,CAAC,KAAuC,EAAE,IAAS,EAAE,EAAE;QACxE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACjB,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,oDAAoD;QACrF,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAyC,EAAE,EAAE;QAChE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YAClB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,qDAAqD;QACjF,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AACxH,CAAC,CAAC","sourcesContent":["import type { TextareaProps as FluentTextareaProps } from \"@fluentui/react-components\";\r\nimport { Textarea as FluentTextarea, makeStyles } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useInputStyles = makeStyles({\r\n    textarea: {},\r\n});\r\n\r\nexport type TextareaProps = BaseComponentProps<string> & {\r\n    placeholder?: string;\r\n};\r\n\r\n/**\r\n * This is a texarea box that stops propagation of change/keydown events\r\n * @param props\r\n * @returns\r\n */\r\nexport const Textarea: FunctionComponent<FluentTextareaProps> = (props) => {\r\n    const classes = useInputStyles();\r\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>, data: any) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        if (props.onChange) {\r\n            props.onChange(event, data); // Call the original onChange handler passed as prop\r\n        }\r\n    };\r\n\r\n    const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\r\n        event.stopPropagation(); // Prevent event propagation\r\n        if (props.onKeyDown) {\r\n            props.onKeyDown(event); // Call the original onKeyDown handler passed as prop\r\n        }\r\n    };\r\n\r\n    return <FluentTextarea {...props} className={classes.textarea} onChange={handleChange} onKeyDown={handleKeyDown} />;\r\n};\r\n"]}

package/lines/checkBoxLineComponent.js

@@ -111,9 +111,9 @@ export class CheckBoxLineComponent extends React.Component {
     renderFluent() {
         // if faIcons are sent (to mimic a checkbox) use fluent checkbox
         if (this.props.faIcons) {
-            return _jsx(Checkbox, { disabled: this.props.disabled, checked: this.state.isSelected, onClick: () => !this.props.disabled && this.onChange() });
+            return _jsx(Checkbox, { disabled: this.props.disabled, value: this.state.isSelected, onChange: () => !this.props.disabled && this.onChange() });
         }
-        return _jsx(SwitchPropertyLine, { label: this.props.label || "", checked: this.state.isSelected, onChange: () => this.onChange(), disabled: !!this.props.disabled });
+        return _jsx(SwitchPropertyLine, { label: this.props.label || "", value: this.state.isSelected, onChange: () => this.onChange(), disabled: !!this.props.disabled });
     }
     render() {
         return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal()) });

package/lines/checkBoxLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkBoxLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAE9F,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,4BAA4B,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAiBzD,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,mBAAmB,MAAM,kCAAkC,CAAC;AACnE,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAE/D,MAAM,KAAK,GAAG;IACV,MAAM,EAAE;QACJ,EAAE,EAAE,gBAAgB;QACpB,KAAK,EAAE,mBAAmB;QAC1B,GAAG,EAAE,iBAAiB;KACzB;IACD,MAAM,EAAE;QACJ,EAAE,EAAE,gBAAgB;QACpB,KAAK,EAAE,EAAE,EAAE,WAAW;QACtB,GAAG,EAAE,iBAAiB;KACzB;CACJ,CAAC;AAEF,MAAM,OAAO,qBAAsB,SAAQ,KAAK,CAAC,SAA0G;IAEvJ,YAAY,KAAkC;QAC1C,KAAK,CAAC,KAAK,CAAC,CAAC;QAFT,iBAAY,GAAG,KAAK,CAAC;QAIzB,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG;gBACT,UAAU,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;gBACxG,UAAU,EAAE,KAAK;aACpB,CAAC;QACN,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,KAAK,GAAG;gBACT,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,YAAa,CAAC,KAAK,IAAI;gBAChE,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,YAAa,CAAC,KAAK,4BAA4B;aAC3F,CAAC;QACN,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACtB,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACpE,CAAC;IACL,CAAC;IAEQ,qBAAqB,CAAC,SAAsC,EAAE,SAA4E;QAC/I,IAAI,QAAiB,CAAC;QAEtB,IAAI,SAAS,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YACrC,QAAQ,GAAG,OAAO,SAAS,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;QACzG,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,YAAa,CAAC,KAAK,IAAI,CAAC;YAC9D,IAAI,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,YAAa,CAAC,KAAK,4BAA4B,EAAE,CAAC;gBAC7E,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC;YAChC,CAAC;QACL,CAAC;QAED,IAAI,QAAQ,KAAK,SAAS,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACzD,SAAS,CAAC,UAAU,GAAG,QAAQ,CAAC;YAChC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,IAAI,SAAS,CAAC,QAAQ,KAAK,SAAS,CAAC,UAAU,EAAE,CAAC;YAC9C,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,OAAO,SAAS,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,SAAS,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;IAC5I,CAAC;IAED,QAAQ;QACJ,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACtB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAChD,CAAC;aAAM,CAAC;YACJ,IAAI,IAAI,CAAC,KAAK,CAAC,2BAA2B,EAAE,CAAC;gBACzC,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,eAAe,CAAC;oBACnD,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM;oBACzB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,YAAa;oBAClC,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;oBAC7B,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU;iBACtC,CAAC,CAAC;YACP,CAAC;YAED,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC/C,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;YACxE,CAAC;QACL,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;QAChC,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7E,CAAC;IAED,yDAAyD;IACzD,yCAAyC;IACzC,WAAW;QACP,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAClC,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACrF,MAAM,UAAU,GAAG,sBAAsB,CAAC;YAC1C,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;YAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,YAAa,CAAC,CAAC;YAC1D,MAAM,UAAU,GAAG,UAAU,GAAG,GAAG,GAAG,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,oBAAoB,GAAG,gBAAgB,GAAG,SAAS,GAAG,GAAG,CAAC;YACjI,sBAAsB,CAAC,UAAU,CAAC,CAAC;QACvC,CAAC;aAAM,CAAC;YACJ,sBAAsB,CAAC,WAAW,CAAC,CAAC;QACxC,CAAC;IACL,CAAC;IAED,cAAc;QACV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC;QAC7D,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC;QAChG,OAAO,CACH,eAAK,SAAS,EAAC,cAAc,aACxB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EACzH,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,CACjB,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,YAC7C,IAAI,CAAC,KAAK,CAAC,KAAK,GACf,CACT,EACA,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CACnB,KAAC,eAAe,IACZ,SAAS,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EACzD,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,EACtF,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,GACxD,CACL,EACA,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CACpB,cAAK,SAAS,EAAC,UAAU,YACrB,iBAAO,SAAS,EAAE,gBAAgB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,aAChH,gBACI,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAClE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAC9B,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAC/B,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GACjC,EACF,cAAK,SAAS,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,IACtD,GACN,CACT,EACD,cAAK,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAC,mBAAmB,YACxF,cAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,MAAM,GAAG,GAC/B,IACJ,CACT,CAAC;IACN,CAAC;IAED,YAAY;QACR,gEAAgE;QAChE,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YACrB,OAAO,KAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,GAAI,CAAC;QAC/I,CAAC;QACD,OAAO,KAAC,kBAAkB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAI,CAAC;IACnK,CAAC;IAEQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"./../propertyChangedEvent\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport type { IconDefinition } from \"@fortawesome/fontawesome-common-types\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\nimport { SwitchPropertyLine } from \"../fluent/hoc/switchPropertyLine\";\r\nimport { Checkbox } from \"../fluent/primitives/checkbox\";\r\n\r\nexport interface ICheckBoxLineComponentProps {\r\n    label?: string;\r\n    target?: any;\r\n    propertyName?: string;\r\n    isSelected?: boolean | (() => boolean);\r\n    onSelect?: (value: boolean) => void;\r\n    onValueChanged?: () => void;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    disabled?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    faIcons?: { enabled: IconDefinition; disabled: IconDefinition };\r\n    large?: boolean;\r\n}\r\n\r\nimport toggleOnIcon40px from \"../imgs/toggleOnIcon_40px.svg\";\r\nimport toggleOffIcon40px from \"../imgs/toggleOffIcon_40px.svg\";\r\nimport toggleOnIcon30px from \"../imgs/toggleOnIcon_30px.svg\";\r\nimport toggleMixedIcon30px from \"../imgs/toggleMixedIcon_30px.svg\";\r\nimport toggleOffIcon30px from \"../imgs/toggleOffIcon_30px.svg\";\r\n\r\nconst Icons = {\r\n    size30: {\r\n        on: toggleOnIcon30px,\r\n        mixed: toggleMixedIcon30px,\r\n        off: toggleOffIcon30px,\r\n    },\r\n    size40: {\r\n        on: toggleOnIcon40px,\r\n        mixed: \"\", // unneeded\r\n        off: toggleOffIcon40px,\r\n    },\r\n};\r\n\r\nexport class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean; isDisabled?: boolean; isConflict: boolean }> {\r\n    private _localChange = false;\r\n    constructor(props: ICheckBoxLineComponentProps) {\r\n        super(props);\r\n\r\n        if (this.props.isSelected !== undefined) {\r\n            this.state = {\r\n                isSelected: typeof this.props.isSelected === \"boolean\" ? this.props.isSelected : this.props.isSelected(),\r\n                isConflict: false,\r\n            };\r\n        } else {\r\n            this.state = {\r\n                isSelected: this.props.target[this.props.propertyName!] === true,\r\n                isConflict: this.props.target[this.props.propertyName!] === conflictingValuesPlaceholder,\r\n            };\r\n        }\r\n\r\n        if (this.props.disabled) {\r\n            this.state = { ...this.state, isDisabled: this.props.disabled };\r\n        }\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean; isDisabled: boolean; isConflict: boolean }) {\r\n        let selected: boolean;\r\n\r\n        if (nextProps.isSelected !== undefined) {\r\n            selected = typeof nextProps.isSelected === \"boolean\" ? nextProps.isSelected : nextProps.isSelected();\r\n        } else {\r\n            selected = nextProps.target[nextProps.propertyName!] === true;\r\n            if (nextProps.target[nextProps.propertyName!] === conflictingValuesPlaceholder) {\r\n                nextState.isConflict = true;\r\n            }\r\n        }\r\n\r\n        if (selected !== nextState.isSelected || this._localChange) {\r\n            nextState.isSelected = selected;\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        if (nextProps.disabled !== nextState.isDisabled) {\r\n            return true;\r\n        }\r\n\r\n        return nextProps.label !== this.props.label || nextProps.target !== this.props.target || nextState.isConflict !== this.state.isConflict;\r\n    }\r\n\r\n    onChange() {\r\n        this._localChange = true;\r\n        if (this.props.onSelect) {\r\n            this.props.onSelect(!this.state.isSelected);\r\n        } else {\r\n            if (this.props.onPropertyChangedObservable) {\r\n                this.props.onPropertyChangedObservable.notifyObservers({\r\n                    object: this.props.target,\r\n                    property: this.props.propertyName!,\r\n                    value: !this.state.isSelected,\r\n                    initialValue: this.state.isSelected,\r\n                });\r\n            }\r\n\r\n            if (this.props.target && this.props.propertyName) {\r\n                this.props.target[this.props.propertyName] = !this.state.isSelected;\r\n            }\r\n        }\r\n\r\n        if (this.props.onValueChanged) {\r\n            this.props.onValueChanged();\r\n        }\r\n\r\n        this.setState({ isSelected: !this.state.isSelected, isConflict: false });\r\n    }\r\n\r\n    // Copy to clipboard the code this checkbox actually does\r\n    // Example : mesh.checkCollisions = true;\r\n    onCopyClick() {\r\n        if (this.props && this.props.target) {\r\n            const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);\r\n            const targetName = \"globalThis.debugNode\";\r\n            const targetProperty = this.props.propertyName;\r\n            const value = this.props.target[this.props.propertyName!];\r\n            const strCommand = targetName + \".\" + targetProperty + \" = \" + value + \";// (debugNode as \" + babylonNamespace + className + \")\";\r\n            copyCommandToClipboard(strCommand);\r\n        } else {\r\n            copyCommandToClipboard(\"undefined\");\r\n        }\r\n    }\r\n\r\n    renderOriginal() {\r\n        const icons = this.props.large ? Icons.size40 : Icons.size30;\r\n        const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;\r\n        return (\r\n            <div className=\"checkBoxLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                {this.props.label && (\r\n                    <div className=\"label\" title={this.props.iconLabel}>\r\n                        {this.props.label}\r\n                    </div>\r\n                )}\r\n                {this.props.faIcons && (\r\n                    <FontAwesomeIcon\r\n                        className={`cbx ${this.props.disabled ? \"disabled\" : \"\"}`}\r\n                        icon={this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled}\r\n                        onClick={() => !this.props.disabled && this.onChange()}\r\n                    />\r\n                )}\r\n                {!this.props.faIcons && (\r\n                    <div className=\"checkBox\">\r\n                        <label className={`container lbl${this.props.disabled ? \" disabled\" : \"\"} ${this.state.isSelected ? \"checked\" : \"\"}`}>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                className={`cbx hidden ${this.state.isConflict ? \"conflict\" : \"\"}`}\r\n                                checked={this.state.isSelected}\r\n                                onChange={() => this.onChange()}\r\n                                disabled={!!this.props.disabled}\r\n                            />\r\n                            <img className=\"icon\" src={icon} alt={this.props.label} />\r\n                        </label>\r\n                    </div>\r\n                )}\r\n                <div className=\"copy hoverIcon\" onClick={() => this.onCopyClick()} title=\"Copy to clipboard\">\r\n                    <img src={copyIcon} alt=\"Copy\" />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    renderFluent() {\r\n        // if faIcons are sent (to mimic a checkbox) use fluent checkbox\r\n        if (this.props.faIcons) {\r\n            return <Checkbox disabled={this.props.disabled} checked={this.state.isSelected} onClick={() => !this.props.disabled && this.onChange()} />;\r\n        }\r\n        return <SwitchPropertyLine label={this.props.label || \"\"} checked={this.state.isSelected} onChange={() => this.onChange()} disabled={!!this.props.disabled} />;\r\n    }\r\n\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"checkBoxLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/checkBoxLineComponent.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 { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport type { IconDefinition } from \"@fortawesome/fontawesome-common-types\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\nimport { SwitchPropertyLine } from \"../fluent/hoc/switchPropertyLine\";\r\nimport { Checkbox } from \"../fluent/primitives/checkbox\";\r\n\r\nexport interface ICheckBoxLineComponentProps {\r\n    label?: string;\r\n    target?: any;\r\n    propertyName?: string;\r\n    isSelected?: boolean | (() => boolean);\r\n    onSelect?: (value: boolean) => void;\r\n    onValueChanged?: () => void;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    disabled?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    faIcons?: { enabled: IconDefinition; disabled: IconDefinition };\r\n    large?: boolean;\r\n}\r\n\r\nimport toggleOnIcon40px from \"../imgs/toggleOnIcon_40px.svg\";\r\nimport toggleOffIcon40px from \"../imgs/toggleOffIcon_40px.svg\";\r\nimport toggleOnIcon30px from \"../imgs/toggleOnIcon_30px.svg\";\r\nimport toggleMixedIcon30px from \"../imgs/toggleMixedIcon_30px.svg\";\r\nimport toggleOffIcon30px from \"../imgs/toggleOffIcon_30px.svg\";\r\n\r\nconst Icons = {\r\n    size30: {\r\n        on: toggleOnIcon30px,\r\n        mixed: toggleMixedIcon30px,\r\n        off: toggleOffIcon30px,\r\n    },\r\n    size40: {\r\n        on: toggleOnIcon40px,\r\n        mixed: \"\", // unneeded\r\n        off: toggleOffIcon40px,\r\n    },\r\n};\r\n\r\nexport class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean; isDisabled?: boolean; isConflict: boolean }> {\r\n    private _localChange = false;\r\n    constructor(props: ICheckBoxLineComponentProps) {\r\n        super(props);\r\n\r\n        if (this.props.isSelected !== undefined) {\r\n            this.state = {\r\n                isSelected: typeof this.props.isSelected === \"boolean\" ? this.props.isSelected : this.props.isSelected(),\r\n                isConflict: false,\r\n            };\r\n        } else {\r\n            this.state = {\r\n                isSelected: this.props.target[this.props.propertyName!] === true,\r\n                isConflict: this.props.target[this.props.propertyName!] === conflictingValuesPlaceholder,\r\n            };\r\n        }\r\n\r\n        if (this.props.disabled) {\r\n            this.state = { ...this.state, isDisabled: this.props.disabled };\r\n        }\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean; isDisabled: boolean; isConflict: boolean }) {\r\n        let selected: boolean;\r\n\r\n        if (nextProps.isSelected !== undefined) {\r\n            selected = typeof nextProps.isSelected === \"boolean\" ? nextProps.isSelected : nextProps.isSelected();\r\n        } else {\r\n            selected = nextProps.target[nextProps.propertyName!] === true;\r\n            if (nextProps.target[nextProps.propertyName!] === conflictingValuesPlaceholder) {\r\n                nextState.isConflict = true;\r\n            }\r\n        }\r\n\r\n        if (selected !== nextState.isSelected || this._localChange) {\r\n            nextState.isSelected = selected;\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        if (nextProps.disabled !== nextState.isDisabled) {\r\n            return true;\r\n        }\r\n\r\n        return nextProps.label !== this.props.label || nextProps.target !== this.props.target || nextState.isConflict !== this.state.isConflict;\r\n    }\r\n\r\n    onChange() {\r\n        this._localChange = true;\r\n        if (this.props.onSelect) {\r\n            this.props.onSelect(!this.state.isSelected);\r\n        } else {\r\n            if (this.props.onPropertyChangedObservable) {\r\n                this.props.onPropertyChangedObservable.notifyObservers({\r\n                    object: this.props.target,\r\n                    property: this.props.propertyName!,\r\n                    value: !this.state.isSelected,\r\n                    initialValue: this.state.isSelected,\r\n                });\r\n            }\r\n\r\n            if (this.props.target && this.props.propertyName) {\r\n                this.props.target[this.props.propertyName] = !this.state.isSelected;\r\n            }\r\n        }\r\n\r\n        if (this.props.onValueChanged) {\r\n            this.props.onValueChanged();\r\n        }\r\n\r\n        this.setState({ isSelected: !this.state.isSelected, isConflict: false });\r\n    }\r\n\r\n    // Copy to clipboard the code this checkbox actually does\r\n    // Example : mesh.checkCollisions = true;\r\n    onCopyClick() {\r\n        if (this.props && this.props.target) {\r\n            const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);\r\n            const targetName = \"globalThis.debugNode\";\r\n            const targetProperty = this.props.propertyName;\r\n            const value = this.props.target[this.props.propertyName!];\r\n            const strCommand = targetName + \".\" + targetProperty + \" = \" + value + \";// (debugNode as \" + babylonNamespace + className + \")\";\r\n            copyCommandToClipboard(strCommand);\r\n        } else {\r\n            copyCommandToClipboard(\"undefined\");\r\n        }\r\n    }\r\n\r\n    renderOriginal() {\r\n        const icons = this.props.large ? Icons.size40 : Icons.size30;\r\n        const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;\r\n        return (\r\n            <div className=\"checkBoxLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                {this.props.label && (\r\n                    <div className=\"label\" title={this.props.iconLabel}>\r\n                        {this.props.label}\r\n                    </div>\r\n                )}\r\n                {this.props.faIcons && (\r\n                    <FontAwesomeIcon\r\n                        className={`cbx ${this.props.disabled ? \"disabled\" : \"\"}`}\r\n                        icon={this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled}\r\n                        onClick={() => !this.props.disabled && this.onChange()}\r\n                    />\r\n                )}\r\n                {!this.props.faIcons && (\r\n                    <div className=\"checkBox\">\r\n                        <label className={`container lbl${this.props.disabled ? \" disabled\" : \"\"} ${this.state.isSelected ? \"checked\" : \"\"}`}>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                className={`cbx hidden ${this.state.isConflict ? \"conflict\" : \"\"}`}\r\n                                checked={this.state.isSelected}\r\n                                onChange={() => this.onChange()}\r\n                                disabled={!!this.props.disabled}\r\n                            />\r\n                            <img className=\"icon\" src={icon} alt={this.props.label} />\r\n                        </label>\r\n                    </div>\r\n                )}\r\n                <div className=\"copy hoverIcon\" onClick={() => this.onCopyClick()} title=\"Copy to clipboard\">\r\n                    <img src={copyIcon} alt=\"Copy\" />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    renderFluent() {\r\n        // if faIcons are sent (to mimic a checkbox) use fluent checkbox\r\n        if (this.props.faIcons) {\r\n            return <Checkbox disabled={this.props.disabled} value={this.state.isSelected} onChange={() => !this.props.disabled && this.onChange()} />;\r\n        }\r\n        return <SwitchPropertyLine label={this.props.label || \"\"} value={this.state.isSelected} onChange={() => this.onChange()} disabled={!!this.props.disabled} />;\r\n    }\r\n\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/lines/colorLineComponent.d.ts

@@ -33,6 +33,8 @@ export declare class ColorLine extends React.Component<IColorLineProps, IColorLi
     private _convertToColor;
     private _toColor3;
     onCopyClick(): void;
+    renderFluent(): import("react/jsx-runtime").JSX.Element;
+    renderOriginal(): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/lines/colorLineComponent.js

@@ -8,6 +8,8 @@ import { copyCommandToClipboard, getClassNameWithNamespace } from "../copyComman
 import { ColorPickerLine } from "./colorPickerComponent.js";
 import { conflictingValuesPlaceholder } from "./targetsProxy.js";
 import copyIcon from "../imgs/copy.svg";
+import { Color3PropertyLine, Color4PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
+import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
 const EmptyColor = new Color4(0, 0, 0, 0);
 export class ColorLine extends React.Component {
     constructor(props) {
@@ -151,11 +153,22 @@ export class ColorLine extends React.Component {
             copyCommandToClipboard("undefined");
         }
     }
-    render() {
+    renderFluent() {
+        if (this.props.disableAlpha) {
+            return (_jsx(Color3PropertyLine, { label: this.props.label, value: this._toColor3(this.state.color), isLinearMode: this.props.isLinear, onChange: (color) => this.setColorFromString(color.toHexString()) }));
+        }
+        else {
+            return (_jsx(Color4PropertyLine, { label: this.props.label, value: this.state.color, isLinearMode: this.props.isLinear, onChange: (color) => this.setColorFromString(color.toHexString()) }));
+        }
+    }
+    renderOriginal() {
         const chevron = this.state.isExpanded ? _jsx(FontAwesomeIcon, { icon: faMinus }) : _jsx(FontAwesomeIcon, { icon: faPlus });
         return (_jsxs("div", { className: "color3Line", children: [_jsxs("div", { className: "firstLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: "color3", children: _jsx(ColorPickerLine, { lockObject: this.props.lockObject, linearHint: this.props.isLinear, value: this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color, onColorChanged: (colorString) => {
                                     this.setColorFromString(colorString);
                                 } }) }), _jsx("div", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron }), _jsx("div", { className: "copy hoverIcon", onClick: () => this.onCopyClick(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) })] }), this.state.isExpanded && (_jsxs("div", { className: "secondLine", children: [_jsx(NumericInput, { lockObject: this.props.lockObject, label: "r", labelTooltip: "Red", value: this.state.color.r, step: 0.1, onChange: (value) => this.updateStateR(value) }), _jsx(NumericInput, { lockObject: this.props.lockObject, label: "g", labelTooltip: "Green", value: this.state.color.g, step: 0.1, onChange: (value) => this.updateStateG(value) }), _jsx(NumericInput, { lockObject: this.props.lockObject, label: "b", labelTooltip: "Blue", value: this.state.color.b, step: 0.1, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || (_jsx(NumericInput, { lockObject: this.props.lockObject, label: "a", labelTooltip: "Alpha", value: this.state.color.a, step: 0.1, onChange: (value) => this.updateStateA(value) }))] }))] }));
     }
+    render() {
+        return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal()) });
+    }
 }
 //# sourceMappingURL=colorLineComponent.js.map

package/lines/colorLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/colorLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { NumericInput } from \"./numericInputComponent\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport { ColorPickerLine } from \"./colorPickerComponent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\n\r\nconst EmptyColor = new Color4(0, 0, 0, 0);\r\n\r\nexport interface IColorLineProps {\r\n    label: string;\r\n    target?: any;\r\n    propertyName: string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    onChange?: () => void;\r\n    isLinear?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    disableAlpha?: boolean;\r\n    lockObject: LockObject;\r\n}\r\n\r\ninterface IColorLineComponentState {\r\n    isExpanded: boolean;\r\n    color: Color4;\r\n}\r\n\r\nexport class ColorLine extends React.Component<IColorLineProps, IColorLineComponentState> {\r\n    constructor(props: IColorLineProps) {\r\n        super(props);\r\n\r\n        this.state = { isExpanded: false, color: this.getValue() };\r\n\r\n        const target = this.props.target;\r\n        target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IColorLineProps, nextState: IColorLineComponentState) {\r\n        const stateColor = nextState.color;\r\n        const propsColor = this.getValue(nextProps);\r\n        if (stateColor !== this.state.color) {\r\n            nextState.color = stateColor;\r\n            return true;\r\n        }\r\n        if (propsColor !== this.state.color) {\r\n            nextState.color = propsColor;\r\n            return true;\r\n        }\r\n        if (nextState.isExpanded !== this.state.isExpanded) {\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    getValue(props = this.props): Color4 {\r\n        const target = props.target;\r\n        const property = target[props.propertyName];\r\n        if (!property) {\r\n            return EmptyColor;\r\n        }\r\n        if (typeof property === \"string\") {\r\n            if (property === conflictingValuesPlaceholder) {\r\n                return EmptyColor;\r\n            }\r\n            return this._convertToColor(property);\r\n        } else {\r\n            if (props.isLinear) {\r\n                return property.toGammaSpace();\r\n            }\r\n            return property.clone();\r\n        }\r\n    }\r\n\r\n    setColorFromString(colorString: string) {\r\n        const color = this._convertToColor(colorString);\r\n        this.setColor(color);\r\n    }\r\n\r\n    setColor(newColor: Color4) {\r\n        if (newColor.equals(this.state.color)) {\r\n            return;\r\n        }\r\n        this.setState({ color: newColor.clone() });\r\n        if (this.props.isLinear) {\r\n            newColor.toLinearSpaceToRef(newColor);\r\n        }\r\n        // whether to set properties to color3 or color4\r\n        const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;\r\n\r\n        const target = this.props.target;\r\n        const initialValue = target[this.props.propertyName];\r\n        const value = typeof target[this.props.propertyName] === \"string\" ? setColor.toHexString() : setColor;\r\n        // make the change\r\n        target[this.props.propertyName] = value;\r\n        // notify observers\r\n        if (this.props.onPropertyChangedObservable) {\r\n            this.props.onPropertyChangedObservable.notifyObservers({\r\n                object: target,\r\n                property: this.props.propertyName,\r\n                value,\r\n                initialValue,\r\n            });\r\n        }\r\n\r\n        if (this.props.onChange) {\r\n            this.props.onChange();\r\n        }\r\n    }\r\n\r\n    switchExpandState() {\r\n        this.setState({ isExpanded: !this.state.isExpanded });\r\n    }\r\n\r\n    updateStateR(value: number) {\r\n        this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));\r\n    }\r\n\r\n    updateStateG(value: number) {\r\n        this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));\r\n    }\r\n\r\n    updateStateB(value: number) {\r\n        this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));\r\n    }\r\n\r\n    updateStateA(value: number) {\r\n        if (this.props.disableAlpha) {\r\n            return;\r\n        }\r\n        this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));\r\n    }\r\n\r\n    private _convertToColor(color: string): Color4 {\r\n        if (color === \"\" || color === \"transparent\") {\r\n            return EmptyColor;\r\n        }\r\n\r\n        if (color.substring(0, 1) !== \"#\" || (color.length !== 7 && color.length !== 9)) {\r\n            const d = document.createElement(\"div\");\r\n            d.style.color = color;\r\n            document.body.append(d);\r\n            const rgb = window.getComputedStyle(d).color;\r\n            document.body.removeChild(d);\r\n\r\n            const rgbArray = rgb\r\n                .substring(4, rgb.length - 1)\r\n                .replace(/ /g, \"\")\r\n                .split(\",\");\r\n\r\n            const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;\r\n\r\n            return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);\r\n        }\r\n\r\n        if (this.props.disableAlpha) {\r\n            const color3 = Color3.FromHexString(color);\r\n            return new Color4(color3.r, color3.g, color3.b, 1.0);\r\n        }\r\n\r\n        return Color4.FromHexString(color);\r\n    }\r\n\r\n    private _toColor3(color: Color4) {\r\n        return new Color3(color.r, color.g, color.b);\r\n    }\r\n\r\n    // Copy to clipboard the code this Color3 actually does\r\n    // Example : material.diffuseColor = new BABYLON.Vector3(0,1,0);\r\n    onCopyClick() {\r\n        if (this.props && this.props.target) {\r\n            const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);\r\n            const targetName = \"globalThis.debugNode\";\r\n            const targetProperty = this.props.propertyName;\r\n            const value = this.props.target[this.props.propertyName];\r\n            const hex = this.state.color.toHexString();\r\n            let strColor;\r\n            if (value.a) {\r\n                strColor = \"new \" + babylonNamespace + \"Color4(\" + value.r + \", \" + value.g + \", \" + value.b + \", \" + value.a + \")\";\r\n            } else {\r\n                strColor = \"new \" + babylonNamespace + \"Color3(\" + value.r + \", \" + value.g + \", \" + value.b + \")\";\r\n            }\r\n            strColor += \";// (HEX : \" + hex;\r\n            const strCommand = targetName + \".\" + targetProperty + \" = \" + strColor + \" , debugNode as \" + babylonNamespace + className + \")\";\r\n            copyCommandToClipboard(strCommand);\r\n        } else {\r\n            copyCommandToClipboard(\"undefined\");\r\n        }\r\n    }\r\n\r\n    override render() {\r\n        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;\r\n\r\n        return (\r\n            <div className=\"color3Line\">\r\n                <div className=\"firstLine\">\r\n                    {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                    <div className=\"label\" title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                    <div className=\"color3\">\r\n                        <ColorPickerLine\r\n                            lockObject={this.props.lockObject}\r\n                            linearHint={this.props.isLinear}\r\n                            value={this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color}\r\n                            onColorChanged={(colorString) => {\r\n                                this.setColorFromString(colorString);\r\n                            }}\r\n                        />\r\n                    </div>\r\n                    <div className=\"expand hoverIcon\" onClick={() => this.switchExpandState()} title=\"Expand\">\r\n                        {chevron}\r\n                    </div>\r\n                    <div className=\"copy hoverIcon\" onClick={() => this.onCopyClick()} title=\"Copy to clipboard\">\r\n                        <img src={copyIcon} alt=\"Copy\" />\r\n                    </div>\r\n                </div>\r\n                {this.state.isExpanded && (\r\n                    <div className=\"secondLine\">\r\n                        <NumericInput\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"r\"\r\n                            labelTooltip=\"Red\"\r\n                            value={this.state.color.r}\r\n                            step={0.1}\r\n                            onChange={(value) => this.updateStateR(value)}\r\n                        />\r\n                        <NumericInput\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"g\"\r\n                            labelTooltip=\"Green\"\r\n                            value={this.state.color.g}\r\n                            step={0.1}\r\n                            onChange={(value) => this.updateStateG(value)}\r\n                        />\r\n                        <NumericInput\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"b\"\r\n                            labelTooltip=\"Blue\"\r\n                            value={this.state.color.b}\r\n                            step={0.1}\r\n                            onChange={(value) => this.updateStateB(value)}\r\n                        />\r\n                        {this.props.disableAlpha || (\r\n                            <NumericInput\r\n                                lockObject={this.props.lockObject}\r\n                                label=\"a\"\r\n                                labelTooltip=\"Alpha\"\r\n                                value={this.state.color.a}\r\n                                step={0.1}\r\n                                onChange={(value) => this.updateStateA(value)}\r\n                            />\r\n                        )}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"colorLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/colorLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { NumericInput } from \"./numericInputComponent\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport { ColorPickerLine } from \"./colorPickerComponent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { Color3PropertyLine, Color4PropertyLine } from \"shared-ui-components/fluent/hoc/colorPropertyLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\nconst EmptyColor = new Color4(0, 0, 0, 0);\r\n\r\nexport interface IColorLineProps {\r\n    label: string;\r\n    target?: any;\r\n    propertyName: string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    onChange?: () => void;\r\n    isLinear?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    disableAlpha?: boolean;\r\n    lockObject: LockObject;\r\n}\r\n\r\ninterface IColorLineComponentState {\r\n    isExpanded: boolean;\r\n    color: Color4;\r\n}\r\n\r\nexport class ColorLine extends React.Component<IColorLineProps, IColorLineComponentState> {\r\n    constructor(props: IColorLineProps) {\r\n        super(props);\r\n\r\n        this.state = { isExpanded: false, color: this.getValue() };\r\n\r\n        const target = this.props.target;\r\n        target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IColorLineProps, nextState: IColorLineComponentState) {\r\n        const stateColor = nextState.color;\r\n        const propsColor = this.getValue(nextProps);\r\n        if (stateColor !== this.state.color) {\r\n            nextState.color = stateColor;\r\n            return true;\r\n        }\r\n        if (propsColor !== this.state.color) {\r\n            nextState.color = propsColor;\r\n            return true;\r\n        }\r\n        if (nextState.isExpanded !== this.state.isExpanded) {\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    getValue(props = this.props): Color4 {\r\n        const target = props.target;\r\n        const property = target[props.propertyName];\r\n        if (!property) {\r\n            return EmptyColor;\r\n        }\r\n        if (typeof property === \"string\") {\r\n            if (property === conflictingValuesPlaceholder) {\r\n                return EmptyColor;\r\n            }\r\n            return this._convertToColor(property);\r\n        } else {\r\n            if (props.isLinear) {\r\n                return property.toGammaSpace();\r\n            }\r\n            return property.clone();\r\n        }\r\n    }\r\n\r\n    setColorFromString(colorString: string) {\r\n        const color = this._convertToColor(colorString);\r\n        this.setColor(color);\r\n    }\r\n\r\n    setColor(newColor: Color4) {\r\n        if (newColor.equals(this.state.color)) {\r\n            return;\r\n        }\r\n        this.setState({ color: newColor.clone() });\r\n        if (this.props.isLinear) {\r\n            newColor.toLinearSpaceToRef(newColor);\r\n        }\r\n        // whether to set properties to color3 or color4\r\n        const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;\r\n\r\n        const target = this.props.target;\r\n        const initialValue = target[this.props.propertyName];\r\n        const value = typeof target[this.props.propertyName] === \"string\" ? setColor.toHexString() : setColor;\r\n        // make the change\r\n        target[this.props.propertyName] = value;\r\n        // notify observers\r\n        if (this.props.onPropertyChangedObservable) {\r\n            this.props.onPropertyChangedObservable.notifyObservers({\r\n                object: target,\r\n                property: this.props.propertyName,\r\n                value,\r\n                initialValue,\r\n            });\r\n        }\r\n\r\n        if (this.props.onChange) {\r\n            this.props.onChange();\r\n        }\r\n    }\r\n\r\n    switchExpandState() {\r\n        this.setState({ isExpanded: !this.state.isExpanded });\r\n    }\r\n\r\n    updateStateR(value: number) {\r\n        this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));\r\n    }\r\n\r\n    updateStateG(value: number) {\r\n        this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));\r\n    }\r\n\r\n    updateStateB(value: number) {\r\n        this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));\r\n    }\r\n\r\n    updateStateA(value: number) {\r\n        if (this.props.disableAlpha) {\r\n            return;\r\n        }\r\n        this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));\r\n    }\r\n\r\n    private _convertToColor(color: string): Color4 {\r\n        if (color === \"\" || color === \"transparent\") {\r\n            return EmptyColor;\r\n        }\r\n\r\n        if (color.substring(0, 1) !== \"#\" || (color.length !== 7 && color.length !== 9)) {\r\n            const d = document.createElement(\"div\");\r\n            d.style.color = color;\r\n            document.body.append(d);\r\n            const rgb = window.getComputedStyle(d).color;\r\n            document.body.removeChild(d);\r\n\r\n            const rgbArray = rgb\r\n                .substring(4, rgb.length - 1)\r\n                .replace(/ /g, \"\")\r\n                .split(\",\");\r\n\r\n            const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;\r\n\r\n            return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);\r\n        }\r\n\r\n        if (this.props.disableAlpha) {\r\n            const color3 = Color3.FromHexString(color);\r\n            return new Color4(color3.r, color3.g, color3.b, 1.0);\r\n        }\r\n\r\n        return Color4.FromHexString(color);\r\n    }\r\n\r\n    private _toColor3(color: Color4) {\r\n        return new Color3(color.r, color.g, color.b);\r\n    }\r\n\r\n    // Copy to clipboard the code this Color3 actually does\r\n    // Example : material.diffuseColor = new BABYLON.Vector3(0,1,0);\r\n    onCopyClick() {\r\n        if (this.props && this.props.target) {\r\n            const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);\r\n            const targetName = \"globalThis.debugNode\";\r\n            const targetProperty = this.props.propertyName;\r\n            const value = this.props.target[this.props.propertyName];\r\n            const hex = this.state.color.toHexString();\r\n            let strColor;\r\n            if (value.a) {\r\n                strColor = \"new \" + babylonNamespace + \"Color4(\" + value.r + \", \" + value.g + \", \" + value.b + \", \" + value.a + \")\";\r\n            } else {\r\n                strColor = \"new \" + babylonNamespace + \"Color3(\" + value.r + \", \" + value.g + \", \" + value.b + \")\";\r\n            }\r\n            strColor += \";// (HEX : \" + hex;\r\n            const strCommand = targetName + \".\" + targetProperty + \" = \" + strColor + \" , debugNode as \" + babylonNamespace + className + \")\";\r\n            copyCommandToClipboard(strCommand);\r\n        } else {\r\n            copyCommandToClipboard(\"undefined\");\r\n        }\r\n    }\r\n\r\n    renderFluent() {\r\n        if (this.props.disableAlpha) {\r\n            return (\r\n                <Color3PropertyLine\r\n                    label={this.props.label}\r\n                    value={this._toColor3(this.state.color)}\r\n                    isLinearMode={this.props.isLinear}\r\n                    onChange={(color) => this.setColorFromString(color.toHexString())}\r\n                />\r\n            );\r\n        } else {\r\n            return (\r\n                <Color4PropertyLine\r\n                    label={this.props.label}\r\n                    value={this.state.color}\r\n                    isLinearMode={this.props.isLinear}\r\n                    onChange={(color) => this.setColorFromString(color.toHexString())}\r\n                />\r\n            );\r\n        }\r\n    }\r\n\r\n    renderOriginal() {\r\n        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;\r\n\r\n        return (\r\n            <div className=\"color3Line\">\r\n                <div className=\"firstLine\">\r\n                    {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                    <div className=\"label\" title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                    <div className=\"color3\">\r\n                        <ColorPickerLine\r\n                            lockObject={this.props.lockObject}\r\n                            linearHint={this.props.isLinear}\r\n                            value={this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color}\r\n                            onColorChanged={(colorString) => {\r\n                                this.setColorFromString(colorString);\r\n                            }}\r\n                        />\r\n                    </div>\r\n                    <div className=\"expand hoverIcon\" onClick={() => this.switchExpandState()} title=\"Expand\">\r\n                        {chevron}\r\n                    </div>\r\n                    <div className=\"copy hoverIcon\" onClick={() => this.onCopyClick()} title=\"Copy to clipboard\">\r\n                        <img src={copyIcon} alt=\"Copy\" />\r\n                    </div>\r\n                </div>\r\n                {this.state.isExpanded && (\r\n                    <div className=\"secondLine\">\r\n                        <NumericInput\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"r\"\r\n                            labelTooltip=\"Red\"\r\n                            value={this.state.color.r}\r\n                            step={0.1}\r\n                            onChange={(value) => this.updateStateR(value)}\r\n                        />\r\n                        <NumericInput\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"g\"\r\n                            labelTooltip=\"Green\"\r\n                            value={this.state.color.g}\r\n                            step={0.1}\r\n                            onChange={(value) => this.updateStateG(value)}\r\n                        />\r\n                        <NumericInput\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"b\"\r\n                            labelTooltip=\"Blue\"\r\n                            value={this.state.color.b}\r\n                            step={0.1}\r\n                            onChange={(value) => this.updateStateB(value)}\r\n                        />\r\n                        {this.props.disableAlpha || (\r\n                            <NumericInput\r\n                                lockObject={this.props.lockObject}\r\n                                label=\"a\"\r\n                                labelTooltip=\"Alpha\"\r\n                                value={this.state.color.a}\r\n                                step={0.1}\r\n                                onChange={(value) => this.updateStateA(value)}\r\n                            />\r\n                        )}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/lines/fileButtonLineComponent.d.ts

@@ -12,6 +12,8 @@ export declare class FileButtonLine extends React.Component<IFileButtonLineProps
     private _uploadInputRef;
     constructor(props: IFileButtonLineProps);
     onChange(evt: any): void;
+    renderFluent(): import("react/jsx-runtime").JSX.Element;
+    renderOriginal(): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/lines/fileButtonLineComponent.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { FileUploadLine } from "../fluent/hoc/fileUploadLine.js";
+import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
 export class FileButtonLine extends React.Component {
     constructor(props) {
         super(props);
@@ -13,9 +15,15 @@ export class FileButtonLine extends React.Component {
         }
         evt.target.value = "";
     }
-    render() {
+    renderFluent() {
+        return _jsx(FileUploadLine, { ...this.props });
+    }
+    renderOriginal() {
         return (_jsxs("div", { className: "buttonLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("label", { htmlFor: "file-upload" + this._id, className: "file-upload", children: this.props.label }), _jsx("input", { ref: this._uploadInputRef, id: "file-upload" + this._id, type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] }));
     }
+    render() {
+        return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal()) });
+    }
 }
 FileButtonLine._IdGenerator = 0;
 //# sourceMappingURL=fileButtonLineComponent.js.map

package/lines/fileButtonLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileButtonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/fileButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAA+B;IAKrE,YAAY,KAA2B;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,QAAG,GAAG,cAAc,CAAC,YAAY,EAAE,CAAC;QAKxC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7C,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAEQ,MAAM;QACX,OAAO,CACH,eAAK,SAAS,EAAC,YAAY,aACtB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAC,aAAa,YAC5D,IAAI,CAAC,KAAK,CAAC,KAAK,GACb,EACR,gBAAO,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAI,IAC9I,CACT,CAAC;IACN,CAAC;;AA5Bc,2BAAY,GAAG,CAAC,AAAJ,CAAK","sourcesContent":["import * as React from \"react\";\r\n\r\ninterface IFileButtonLineProps {\r\n    label: string;\r\n    onClick: (file: File) => void;\r\n    accept: string;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class FileButtonLine extends React.Component<IFileButtonLineProps> {\r\n    private static _IdGenerator = 0;\r\n    private _id = FileButtonLine._IdGenerator++;\r\n    private _uploadInputRef: React.RefObject<HTMLInputElement>;\r\n\r\n    constructor(props: IFileButtonLineProps) {\r\n        super(props);\r\n        this._uploadInputRef = React.createRef();\r\n    }\r\n\r\n    onChange(evt: any) {\r\n        const files: File[] = evt.target.files;\r\n        if (files && files.length) {\r\n            this.props.onClick(files[0]);\r\n        }\r\n\r\n        evt.target.value = \"\";\r\n    }\r\n\r\n    override render() {\r\n        return (\r\n            <div className=\"buttonLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <label htmlFor={\"file-upload\" + this._id} className=\"file-upload\">\r\n                    {this.props.label}\r\n                </label>\r\n                <input ref={this._uploadInputRef} id={\"file-upload\" + this._id} type=\"file\" accept={this.props.accept} onChange={(evt) => this.onChange(evt)} />\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"fileButtonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/fileButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAUhF,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAA+B;IAKrE,YAAY,KAA2B;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,QAAG,GAAG,cAAc,CAAC,YAAY,EAAE,CAAC;QAKxC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7C,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,YAAY;QACR,OAAO,KAAC,cAAc,OAAK,IAAI,CAAC,KAAK,GAAI,CAAC;IAC9C,CAAC;IAED,cAAc;QACV,OAAO,CACH,eAAK,SAAS,EAAC,YAAY,aACtB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAC,aAAa,YAC5D,IAAI,CAAC,KAAK,CAAC,KAAK,GACb,EACR,gBAAO,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAI,IAC9I,CACT,CAAC;IACN,CAAC;IACQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;;AAnCc,2BAAY,GAAG,CAAC,AAAJ,CAAK","sourcesContent":["import * as React from \"react\";\r\nimport { FileUploadLine } from \"../fluent/hoc/fileUploadLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\ninterface IFileButtonLineProps {\r\n    label: string;\r\n    onClick: (file: File) => void;\r\n    accept: string;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class FileButtonLine extends React.Component<IFileButtonLineProps> {\r\n    private static _IdGenerator = 0;\r\n    private _id = FileButtonLine._IdGenerator++;\r\n    private _uploadInputRef: React.RefObject<HTMLInputElement>;\r\n\r\n    constructor(props: IFileButtonLineProps) {\r\n        super(props);\r\n        this._uploadInputRef = React.createRef();\r\n    }\r\n\r\n    onChange(evt: any) {\r\n        const files: File[] = evt.target.files;\r\n        if (files && files.length) {\r\n            this.props.onClick(files[0]);\r\n        }\r\n\r\n        evt.target.value = \"\";\r\n    }\r\n\r\n    renderFluent() {\r\n        return <FileUploadLine {...this.props} />;\r\n    }\r\n\r\n    renderOriginal() {\r\n        return (\r\n            <div className=\"buttonLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <label htmlFor={\"file-upload\" + this._id} className=\"file-upload\">\r\n                    {this.props.label}\r\n                </label>\r\n                <input ref={this._uploadInputRef} id={\"file-upload\" + this._id} type=\"file\" accept={this.props.accept} onChange={(evt) => this.onChange(evt)} />\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}