@babylonjs/shared-ui-components 8.14.0 → 8.14.1

package/fluent/hoc/colorPropertyLine.js

@@ -19,7 +19,7 @@ const ColorPropertyLine = forwardRef((props, ref) => {
         }
         else {
             newColor = color.clone();
-            newColor[key] = value / 255.0;
+            newColor[key] = value / 255;
         }
         setColor(newColor); // Create a new object to trigger re-render
         props.onChange(newColor);
@@ -28,7 +28,7 @@ const ColorPropertyLine = forwardRef((props, ref) => {
         setColor(newColor);
         props.onChange(newColor);
     };
-    return (_jsx(PropertyLine, { ref: ref, ...props, expandedContent: _jsxs(_Fragment, { children: [_jsx(SyncedSliderLine, { label: "R", value: color.r * 255.0, min: 0, max: 255, step: 1, onChange: (value) => onSliderChange(value, "r") }), _jsx(SyncedSliderLine, { label: "G", value: color.g * 255.0, min: 0, max: 255, step: 1, onChange: (value) => onSliderChange(value, "g") }), _jsx(SyncedSliderLine, { label: "B", value: color.b * 255.0, min: 0, max: 255, step: 1, onChange: (value) => onSliderChange(value, "b") }), color instanceof Color4 && _jsx(SyncedSliderLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") })] }), children: _jsx(ColorPickerPopup, { ...props, onChange: onColorPickerChange, value: color }) }));
+    return (_jsx(PropertyLine, { ref: ref, ...props, expandedContent: _jsxs(_Fragment, { children: [_jsx(SyncedSliderLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), _jsx(SyncedSliderLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), _jsx(SyncedSliderLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color instanceof Color4 && _jsx(SyncedSliderLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") })] }), children: _jsx(ColorPickerPopup, { ...props, onChange: onColorPickerChange, value: color }) }));
 });
 export const Color3PropertyLine = ColorPropertyLine;
 export const Color4PropertyLine = ColorPropertyLine;

package/fluent/hoc/colorPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/colorPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { forwardRef, useState } from \"react\";\r\n\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport { SyncedSliderLine } from \"./syncedSliderLine\";\r\n\r\nimport type { Color3 } from \"core/Maths/math.color\";\r\nimport { Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup } from \"../primitives/colorPicker\";\r\nimport type { ColorPickerProps } from \"../primitives/colorPicker\";\r\n\r\nexport type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps;\r\n\r\n/**\r\n * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values\r\n * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly\r\n * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color\r\n * @returns Component wrapping a colorPicker component with a property line\r\n */\r\nconst ColorPropertyLine = forwardRef<HTMLDivElement, ColorPropertyLineProps>((props, ref) => {\r\n    const [color, setColor] = useState(props.value);\r\n\r\n    const onSliderChange = (value: number, key: \"r\" | \"g\" | \"b\" | \"a\") => {\r\n        let newColor;\r\n        if (key === \"a\") {\r\n            newColor = Color4.FromColor3(color, value);\r\n        } else {\r\n            newColor = color.clone();\r\n            newColor[key] = value / 255.0;\r\n        }\r\n\r\n        setColor(newColor); // Create a new object to trigger re-render\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    const onColorPickerChange = (newColor: Color3 | Color4) => {\r\n        setColor(newColor);\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    return (\r\n        <PropertyLine\r\n            ref={ref}\r\n            {...props}\r\n            expandedContent={\r\n                <>\r\n                    <SyncedSliderLine label=\"R\" value={color.r * 255.0} min={0} max={255} step={1} onChange={(value) => onSliderChange(value, \"r\")} />\r\n                    <SyncedSliderLine label=\"G\" value={color.g * 255.0} min={0} max={255} step={1} onChange={(value) => onSliderChange(value, \"g\")} />\r\n                    <SyncedSliderLine label=\"B\" value={color.b * 255.0} min={0} max={255} step={1} onChange={(value) => onSliderChange(value, \"b\")} />\r\n                    {color instanceof Color4 && <SyncedSliderLine label=\"A\" value={color.a} min={0} max={1} step={0.01} onChange={(value) => onSliderChange(value, \"a\")} />}\r\n                </>\r\n            }\r\n        >\r\n            <ColorPickerPopup {...props} onChange={onColorPickerChange} value={color} />\r\n        </PropertyLine>\r\n    );\r\n});\r\n\r\nexport const Color3PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps>;\r\nexport const Color4PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps>;\r\n"]}
+{"version":3,"file":"colorPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/colorPropertyLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,MAAM,EAAE,4CAA8B;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAK7D;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,UAAU,CAAyC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,GAA0B,EAAE,EAAE;QACjE,IAAI,QAAyB,CAAC;QAC9B,IAAI,GAAG,KAAK,GAAG,EAAE,CAAC;YACd,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC/C,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;YACzB,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,GAAG,CAAC;QAChC,CAAC;QAED,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,2CAA2C;QAC/D,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,QAAyB,EAAE,EAAE;QACtD,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IACT,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,eAAe,EACX,8BACI,KAAC,gBAAgB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EACvH,KAAC,gBAAgB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EACvH,KAAC,gBAAgB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EACtH,KAAK,YAAY,MAAM,IAAI,KAAC,gBAAgB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,IACxJ,YAGP,KAAC,gBAAgB,OAAK,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAE,KAAK,EAAE,KAAK,GAAI,GACjE,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAAoF,CAAC;AACvH,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAAoF,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { forwardRef, useState } from \"react\";\r\n\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport { SyncedSliderLine } from \"./syncedSliderLine\";\r\n\r\nimport type { Color3 } from \"core/Maths/math.color\";\r\nimport { Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup } from \"../primitives/colorPicker\";\r\nimport type { ColorPickerProps } from \"../primitives/colorPicker\";\r\n\r\nexport type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps;\r\n\r\n/**\r\n * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values\r\n * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly\r\n * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color\r\n * @returns Component wrapping a colorPicker component with a property line\r\n */\r\nconst ColorPropertyLine = forwardRef<HTMLDivElement, ColorPropertyLineProps>((props, ref) => {\r\n    const [color, setColor] = useState(props.value);\r\n\r\n    const onSliderChange = (value: number, key: \"r\" | \"g\" | \"b\" | \"a\") => {\r\n        let newColor: Color3 | Color4;\r\n        if (key === \"a\") {\r\n            newColor = Color4.FromColor3(color, value);\r\n        } else {\r\n            newColor = color.clone();\r\n            newColor[key] = value / 255;\r\n        }\r\n\r\n        setColor(newColor); // Create a new object to trigger re-render\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    const onColorPickerChange = (newColor: Color3 | Color4) => {\r\n        setColor(newColor);\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    return (\r\n        <PropertyLine\r\n            ref={ref}\r\n            {...props}\r\n            expandedContent={\r\n                <>\r\n                    <SyncedSliderLine label=\"R\" value={color.r * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"r\")} />\r\n                    <SyncedSliderLine label=\"G\" value={color.g * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"g\")} />\r\n                    <SyncedSliderLine label=\"B\" value={color.b * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"b\")} />\r\n                    {color instanceof Color4 && <SyncedSliderLine label=\"A\" value={color.a} min={0} max={1} step={0.01} onChange={(value) => onSliderChange(value, \"a\")} />}\r\n                </>\r\n            }\r\n        >\r\n            <ColorPickerPopup {...props} onChange={onColorPickerChange} value={color} />\r\n        </PropertyLine>\r\n    );\r\n});\r\n\r\nexport const Color3PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps>;\r\nexport const Color4PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps>;\r\n"]}

package/fluent/hoc/dropdownPropertyLine.d.ts

@@ -1,9 +1,35 @@
-import type { DropdownProps } from "../primitives/dropdown.js";
+import type { Nullable } from "@babylonjs/core/types.js";
+import type { AcceptedDropdownValue, DropdownProps } from "../primitives/dropdown.js";
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
+type DropdownPropertyLineProps<V extends AcceptedDropdownValue> = Omit<DropdownProps<V>, "includeNullAs"> & PropertyLineProps;
+export declare const NullableDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>>;
 /**
- * Wraps a dropdown in a property line
- * @param props - PropertyLineProps and DropdownProps
- * @returns property-line wrapped dropdown
+ * Dropdown component for explicitly defined number values.
+ * If value can be undefined, use OptionalNumberDropdownPropertyLine instead.
+ * If value can be null, use NullableNumberDropdownPropertyLine instead.
  */
-export declare const DropdownPropertyLine: FunctionComponent<PropertyLineProps & DropdownProps>;
+export declare const NumberDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<number>>;
+/**
+ * Dropdown component for explicitly defined string values.
+ * If value can be undefined, use OptionalStringDropdownPropertyLine instead.
+ * If value can be null, use NullableStringDropdownPropertyLine instead.
+ */
+export declare const StringDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<string>>;
+/**
+ * Dropdown component for Nullable<number> values.
+ */
+export declare const NullableNumberDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<Nullable<number>>>;
+/**
+ * Dropdown component for Nullable<string> values.
+ */
+export declare const NullableStringDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<Nullable<string>>>;
+/**
+ * Dropdown component for number | undefined values
+ */
+export declare const OptionalNumberDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<number | undefined>>;
+/**
+ * Dropdown component for string | undefined values
+ */
+export declare const OptionalStringDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<string | undefined>>;
+export {};

package/fluent/hoc/dropdownPropertyLine.js

@@ -6,7 +6,37 @@ import { PropertyLine } from "./propertyLine.js";
  * @param props - PropertyLineProps and DropdownProps
  * @returns property-line wrapped dropdown
  */
-export const DropdownPropertyLine = (props) => {
+const DropdownPropertyLine = (props) => {
     return (_jsx(PropertyLine, { ...props, children: _jsx(Dropdown, { ...props }) }));
 };
+export const NullableDropdownPropertyLine = (props) => (_jsx(DropdownPropertyLine, { ...props, includeNullAs: "null" }));
+const OptionalDropdownPropertyLine = (props) => _jsx(DropdownPropertyLine, { ...props, includeNullAs: "undefined" });
+/**
+ * Dropdown component for explicitly defined number values.
+ * If value can be undefined, use OptionalNumberDropdownPropertyLine instead.
+ * If value can be null, use NullableNumberDropdownPropertyLine instead.
+ */
+export const NumberDropdownPropertyLine = DropdownPropertyLine;
+/**
+ * Dropdown component for explicitly defined string values.
+ * If value can be undefined, use OptionalStringDropdownPropertyLine instead.
+ * If value can be null, use NullableStringDropdownPropertyLine instead.
+ */
+export const StringDropdownPropertyLine = DropdownPropertyLine;
+/**
+ * Dropdown component for Nullable<number> values.
+ */
+export const NullableNumberDropdownPropertyLine = NullableDropdownPropertyLine;
+/**
+ * Dropdown component for Nullable<string> values.
+ */
+export const NullableStringDropdownPropertyLine = NullableDropdownPropertyLine;
+/**
+ * Dropdown component for number | undefined values
+ */
+export const OptionalNumberDropdownPropertyLine = OptionalDropdownPropertyLine;
+/**
+ * Dropdown component for string | undefined values
+ */
+export const OptionalStringDropdownPropertyLine = OptionalDropdownPropertyLine;
 //# sourceMappingURL=dropdownPropertyLine.js.map

package/fluent/hoc/dropdownPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdownPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/dropdownPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAyD,CAAC,KAAK,EAAE,EAAE;IAChG,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Dropdown } from \"../primitives/dropdown\";\r\nimport type { DropdownProps } from \"../primitives/dropdown\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\n/**\r\n * Wraps a dropdown in a property line\r\n * @param props - PropertyLineProps and DropdownProps\r\n * @returns property-line wrapped dropdown\r\n */\r\nexport const DropdownPropertyLine: FunctionComponent<PropertyLineProps & DropdownProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Dropdown {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"dropdownPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/dropdownPropertyLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM9C;;;;GAIG;AACH,MAAM,oBAAoB,GAAgF,CAAC,KAAK,EAAE,EAAE;IAChH,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAwE,CAAC,KAAK,EAAE,EAAE,CAAC,CACxH,KAAC,oBAAoB,OAAK,KAAK,EAAE,aAAa,EAAC,MAAM,GAAG,CAC3D,CAAC;AACF,MAAM,4BAA4B,GAAwE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,oBAAoB,OAAK,KAAK,EAAE,aAAa,EAAC,WAAW,GAAG,CAAC;AAEnL;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AACvH;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AAEvH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAA8F,CAAC;AACjJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAA8F,CAAC;AAEjJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAAgG,CAAC;AACnJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAAgG,CAAC","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport { Dropdown } from \"../primitives/dropdown\";\r\nimport type { AcceptedDropdownValue, DropdownProps } from \"../primitives/dropdown\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\ntype DropdownPropertyLineProps<V extends AcceptedDropdownValue> = Omit<DropdownProps<V>, \"includeNullAs\"> & PropertyLineProps;\r\n\r\n/**\r\n * Wraps a dropdown in a property line\r\n * @param props - PropertyLineProps and DropdownProps\r\n * @returns property-line wrapped dropdown\r\n */\r\nconst DropdownPropertyLine: FunctionComponent<DropdownProps<AcceptedDropdownValue> & PropertyLineProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Dropdown {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n\r\nexport const NullableDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>> = (props) => (\r\n    <DropdownPropertyLine {...props} includeNullAs=\"null\" />\r\n);\r\nconst OptionalDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>> = (props) => <DropdownPropertyLine {...props} includeNullAs=\"undefined\" />;\r\n\r\n/**\r\n * Dropdown component for explicitly defined number values.\r\n * If value can be undefined, use OptionalNumberDropdownPropertyLine instead.\r\n * If value can be null, use NullableNumberDropdownPropertyLine instead.\r\n */\r\nexport const NumberDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number>>;\r\n/**\r\n * Dropdown component for explicitly defined string values.\r\n * If value can be undefined, use OptionalStringDropdownPropertyLine instead.\r\n * If value can be null, use NullableStringDropdownPropertyLine instead.\r\n */\r\nexport const StringDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string>>;\r\n\r\n/**\r\n * Dropdown component for Nullable<number> values.\r\n */\r\nexport const NullableNumberDropdownPropertyLine = NullableDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<Nullable<number>>>;\r\n/**\r\n * Dropdown component for Nullable<string> values.\r\n */\r\nexport const NullableStringDropdownPropertyLine = NullableDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<Nullable<string>>>;\r\n\r\n/**\r\n * Dropdown component for number | undefined values\r\n */\r\nexport const OptionalNumberDropdownPropertyLine = OptionalDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number | undefined>>;\r\n/**\r\n * Dropdown component for string | undefined values\r\n */\r\nexport const OptionalStringDropdownPropertyLine = OptionalDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string | undefined>>;\r\n"]}

package/fluent/hoc/vectorPropertyLine.d.ts

@@ -1,8 +1,8 @@
 import type { FunctionComponent } from "react";
 import type { BaseComponentProps, PropertyLineProps } from "./propertyLine.js";
-import { Vector4 } from "@babylonjs/core/Maths/math.vector.js";
+import { Quaternion, Vector4 } from "@babylonjs/core/Maths/math.vector.js";
 import type { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
-export type VectorPropertyLineProps<V extends Vector3 | Vector4> = BaseComponentProps<V> & PropertyLineProps & {
+export type TensorPropertyLineProps<V extends Vector3 | Vector4 | Quaternion> = BaseComponentProps<V> & PropertyLineProps & {
     /**
      * If passed, all sliders will use this for the min value
      */
@@ -25,13 +25,20 @@ export type VectorPropertyLineProps<V extends Vector3 | Vector4> = BaseComponent
         to: (val: number) => number;
     };
 };
-type RotationVectorPropertyLineProps = VectorPropertyLineProps<Vector3> & {
+type RotationVectorPropertyLineProps = TensorPropertyLineProps<Vector3> & {
     /**
      * Display angles as degrees instead of radians
      */
     useDegrees?: boolean;
 };
 export declare const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps>;
-export declare const Vector3PropertyLine: FunctionComponent<VectorPropertyLineProps<Vector3>>;
-export declare const Vector4PropertyLine: FunctionComponent<VectorPropertyLineProps<Vector4>>;
+type QuaternionPropertyLineProps = TensorPropertyLineProps<Quaternion> & {
+    /**
+     * Display angles as degrees instead of radians
+     */
+    useDegrees?: boolean;
+};
+export declare const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps>;
+export declare const Vector3PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector3>>;
+export declare const Vector4PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector4>>;
 export {};

package/fluent/hoc/vectorPropertyLine.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { Body1 } from "@fluentui/react-components";
 import { PropertyLine } from "./propertyLine.js";
 import { SyncedSliderLine } from "./syncedSliderLine.js";
-import { Vector4 } from "@babylonjs/core/Maths/math.vector.js";
+import { Quaternion, Vector4 } from "@babylonjs/core/Maths/math.vector.js";
 import { Tools } from "@babylonjs/core/Misc/tools.js";
 /**
  * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values
@@ -11,7 +11,7 @@ import { Tools } from "@babylonjs/core/Misc/tools.js";
  * @param props
  * @returns
  */
-const VectorPropertyLine = (props) => {
+const TensorPropertyLine = (props) => {
     const converted = (val) => (props.valueConverter ? props.valueConverter.from(val) : val);
     const formatted = (val) => converted(val).toFixed(2);
     const [vector, setVector] = useState(props.value);
@@ -31,6 +31,22 @@ export const RotationVectorPropertyLine = (props) => {
     const max = props.useDegrees ? 360 : undefined;
     return _jsx(Vector3PropertyLine, { ...props, valueConverter: props.useDegrees ? ToDegreesConverter : undefined, min: min, max: max });
 };
-export const Vector3PropertyLine = VectorPropertyLine;
-export const Vector4PropertyLine = VectorPropertyLine;
+const QuaternionPropertyLineInternal = TensorPropertyLine;
+export const QuaternionPropertyLine = (props) => {
+    const min = props.useDegrees ? 0 : undefined;
+    const max = props.useDegrees ? 360 : undefined;
+    const [quat, setQuat] = useState(props.value);
+    const onQuatChange = (val) => {
+        setQuat(val);
+        props.onChange(val);
+    };
+    const onEulerChange = (val) => {
+        const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);
+        setQuat(quat);
+        props.onChange(quat);
+    };
+    return props.useDegrees ? (_jsx(Vector3PropertyLine, { ...props, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, min: min, max: max, onChange: onEulerChange })) : (_jsx(QuaternionPropertyLineInternal, { ...props, value: quat, min: min, max: max, onChange: onQuatChange }));
+};
+export const Vector3PropertyLine = TensorPropertyLine;
+export const Vector4PropertyLine = TensorPropertyLine;
 //# sourceMappingURL=vectorPropertyLine.js.map

package/fluent/hoc/vectorPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"vectorPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/vectorPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\nimport { Body1 } from \"@fluentui/react-components\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { BaseComponentProps, PropertyLineProps } from \"./propertyLine\";\r\n\r\nimport { SyncedSliderLine } from \"./syncedSliderLine\";\r\n\r\nimport { Vector4 } from \"core/Maths/math.vector\";\r\nimport type { Vector3 } from \"core/Maths/math.vector\";\r\nimport { Tools } from \"core/Misc/tools\";\r\n\r\nexport type VectorPropertyLineProps<V extends Vector3 | Vector4> = BaseComponentProps<V> &\r\n    PropertyLineProps & {\r\n        /**\r\n         * If passed, all sliders will use this for the min value\r\n         */\r\n        min?: number;\r\n        /**\r\n         * If passed, all sliders will use this for the max value\r\n         */\r\n        max?: number;\r\n        /**\r\n         * If passed, the UX will use the conversion functions to display/update values\r\n         */\r\n        valueConverter?: {\r\n            /**\r\n             * Will call from(val) before displaying in the UX\r\n             */\r\n            from: (val: number) => number;\r\n            /**\r\n             * Will call to(val) before calling onChange\r\n             */\r\n            to: (val: number) => number;\r\n        };\r\n    };\r\n\r\n/**\r\n * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values\r\n * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)\r\n * @param props\r\n * @returns\r\n */\r\nconst VectorPropertyLine: FunctionComponent<VectorPropertyLineProps<Vector3 | Vector4>> = (props) => {\r\n    const converted = (val: number) => (props.valueConverter ? props.valueConverter.from(val) : val);\r\n    const formatted = (val: number) => converted(val).toFixed(2);\r\n\r\n    const [vector, setVector] = useState(props.value);\r\n    const { min, max } = props;\r\n\r\n    const onChange = (val: number, key: \"x\" | \"y\" | \"z\" | \"w\") => {\r\n        const value = props.valueConverter ? props.valueConverter.to(val) : val;\r\n        const newVector = vector.clone();\r\n        (newVector as Vector4)[key] = value; // The syncedSlider for 'w' is only rendered when vector is a Vector4, so this is safe\r\n\r\n        setVector(newVector);\r\n        props.onChange(newVector);\r\n    };\r\n\r\n    return (\r\n        <PropertyLine\r\n            {...props}\r\n            expandedContent={\r\n                <>\r\n                    <SyncedSliderLine label=\"X\" value={converted(vector.x)} min={min} max={max} onChange={(val) => onChange(val, \"x\")} />\r\n                    <SyncedSliderLine label=\"Y\" value={converted(vector.y)} min={min} max={max} onChange={(val) => onChange(val, \"y\")} />\r\n                    <SyncedSliderLine label=\"Z\" value={converted(vector.z)} min={min} max={max} onChange={(val) => onChange(val, \"z\")} />\r\n                    {vector instanceof Vector4 && <SyncedSliderLine label=\"W\" value={vector.w} min={min} max={max} onChange={(val) => onChange(val, \"w\")} />}\r\n                </>\r\n            }\r\n        >\r\n            <Body1>{`X: ${formatted(props.value.x)} | Y: ${formatted(props.value.y)} | Z: ${formatted(props.value.z)}${props.value instanceof Vector4 ? ` | W: ${formatted(props.value.w)}` : \"\"}`}</Body1>\r\n        </PropertyLine>\r\n    );\r\n};\r\n\r\ntype RotationVectorPropertyLineProps = VectorPropertyLineProps<Vector3> & {\r\n    /**\r\n     * Display angles as degrees instead of radians\r\n     */\r\n    useDegrees?: boolean;\r\n};\r\n\r\nconst ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };\r\nexport const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps> = (props) => {\r\n    const min = props.useDegrees ? 0 : undefined;\r\n    const max = props.useDegrees ? 360 : undefined;\r\n    return <Vector3PropertyLine {...props} valueConverter={props.useDegrees ? ToDegreesConverter : undefined} min={min} max={max} />;\r\n};\r\n\r\nexport const Vector3PropertyLine = VectorPropertyLine as FunctionComponent<VectorPropertyLineProps<Vector3>>;\r\nexport const Vector4PropertyLine = VectorPropertyLine as FunctionComponent<VectorPropertyLineProps<Vector4>>;\r\n"]}
+{"version":3,"file":"vectorPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/vectorPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\nimport { Body1 } from \"@fluentui/react-components\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { BaseComponentProps, PropertyLineProps } from \"./propertyLine\";\r\n\r\nimport { SyncedSliderLine } from \"./syncedSliderLine\";\r\n\r\nimport { Quaternion, Vector4 } from \"core/Maths/math.vector\";\r\nimport type { Vector3 } from \"core/Maths/math.vector\";\r\nimport { Tools } from \"core/Misc/tools\";\r\n\r\nexport type TensorPropertyLineProps<V extends Vector3 | Vector4 | Quaternion> = BaseComponentProps<V> &\r\n    PropertyLineProps & {\r\n        /**\r\n         * If passed, all sliders will use this for the min value\r\n         */\r\n        min?: number;\r\n        /**\r\n         * If passed, all sliders will use this for the max value\r\n         */\r\n        max?: number;\r\n        /**\r\n         * If passed, the UX will use the conversion functions to display/update values\r\n         */\r\n        valueConverter?: {\r\n            /**\r\n             * Will call from(val) before displaying in the UX\r\n             */\r\n            from: (val: number) => number;\r\n            /**\r\n             * Will call to(val) before calling onChange\r\n             */\r\n            to: (val: number) => number;\r\n        };\r\n    };\r\n\r\n/**\r\n * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values\r\n * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)\r\n * @param props\r\n * @returns\r\n */\r\nconst TensorPropertyLine: FunctionComponent<TensorPropertyLineProps<Vector3 | Vector4 | Quaternion>> = (props) => {\r\n    const converted = (val: number) => (props.valueConverter ? props.valueConverter.from(val) : val);\r\n    const formatted = (val: number) => converted(val).toFixed(2);\r\n\r\n    const [vector, setVector] = useState(props.value);\r\n    const { min, max } = props;\r\n\r\n    const onChange = (val: number, key: \"x\" | \"y\" | \"z\" | \"w\") => {\r\n        const value = props.valueConverter ? props.valueConverter.to(val) : val;\r\n        const newVector = vector.clone();\r\n        (newVector as Vector4)[key] = value; // The syncedSlider for 'w' is only rendered when vector is a Vector4, so this is safe\r\n\r\n        setVector(newVector);\r\n        props.onChange(newVector);\r\n    };\r\n\r\n    return (\r\n        <PropertyLine\r\n            {...props}\r\n            expandedContent={\r\n                <>\r\n                    <SyncedSliderLine label=\"X\" value={converted(vector.x)} min={min} max={max} onChange={(val) => onChange(val, \"x\")} />\r\n                    <SyncedSliderLine label=\"Y\" value={converted(vector.y)} min={min} max={max} onChange={(val) => onChange(val, \"y\")} />\r\n                    <SyncedSliderLine label=\"Z\" value={converted(vector.z)} min={min} max={max} onChange={(val) => onChange(val, \"z\")} />\r\n                    {vector instanceof Vector4 && <SyncedSliderLine label=\"W\" value={vector.w} min={min} max={max} onChange={(val) => onChange(val, \"w\")} />}\r\n                </>\r\n            }\r\n        >\r\n            <Body1>{`X: ${formatted(props.value.x)} | Y: ${formatted(props.value.y)} | Z: ${formatted(props.value.z)}${props.value instanceof Vector4 ? ` | W: ${formatted(props.value.w)}` : \"\"}`}</Body1>\r\n        </PropertyLine>\r\n    );\r\n};\r\n\r\ntype RotationVectorPropertyLineProps = TensorPropertyLineProps<Vector3> & {\r\n    /**\r\n     * Display angles as degrees instead of radians\r\n     */\r\n    useDegrees?: boolean;\r\n};\r\n\r\nconst ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };\r\nexport const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps> = (props) => {\r\n    const min = props.useDegrees ? 0 : undefined;\r\n    const max = props.useDegrees ? 360 : undefined;\r\n    return <Vector3PropertyLine {...props} valueConverter={props.useDegrees ? ToDegreesConverter : undefined} min={min} max={max} />;\r\n};\r\n\r\ntype QuaternionPropertyLineProps = TensorPropertyLineProps<Quaternion> & {\r\n    /**\r\n     * Display angles as degrees instead of radians\r\n     */\r\n    useDegrees?: boolean;\r\n};\r\n\r\nconst QuaternionPropertyLineInternal = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Quaternion>>;\r\nexport const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps> = (props) => {\r\n    const min = props.useDegrees ? 0 : undefined;\r\n    const max = props.useDegrees ? 360 : undefined;\r\n    const [quat, setQuat] = useState(props.value);\r\n    const onQuatChange = (val: Quaternion) => {\r\n        setQuat(val);\r\n        props.onChange(val);\r\n    };\r\n\r\n    const onEulerChange = (val: Vector3) => {\r\n        const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);\r\n        setQuat(quat);\r\n        props.onChange(quat);\r\n    };\r\n    return props.useDegrees ? (\r\n        <Vector3PropertyLine {...props} value={quat.toEulerAngles()} valueConverter={ToDegreesConverter} min={min} max={max} onChange={onEulerChange} />\r\n    ) : (\r\n        <QuaternionPropertyLineInternal {...props} value={quat} min={min} max={max} onChange={onQuatChange} />\r\n    );\r\n};\r\n\r\nexport const Vector3PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector3>>;\r\nexport const Vector4PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector4>>;\r\n"]}

package/fluent/primitives/accordion.d.ts

@@ -1,6 +1,7 @@
 import type { FunctionComponent, PropsWithChildren } from "react";
 export type AccordionSectionProps = {
     title: string;
+    collapseByDefault?: boolean;
 };
 export declare const AccordionSection: FunctionComponent<PropsWithChildren<AccordionSectionProps>>;
 export declare const Accordion: FunctionComponent<PropsWithChildren>;

package/fluent/primitives/accordion.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement } from "react";
+import { Children, isValidElement, useMemo } from "react";
 import { Accordion as FluentAccordion, AccordionItem, AccordionHeader, AccordionPanel, Subtitle1, makeStyles, tokens } from "@fluentui/react-components";
 const useStyles = makeStyles({
     accordion: {
+        overflowX: "hidden",
         overflowY: "auto",
         paddingBottom: tokens.spacingVerticalM,
         display: "flex",
@@ -22,11 +23,23 @@ export const AccordionSection = (props) => {
 export const Accordion = (props) => {
     const classes = useStyles();
     const { children, ...rest } = props;
-    return (_jsx(FluentAccordion, { className: classes.accordion, collapsible: true, multiple: true, defaultOpenItems: Array.from({ length: Children.count(children) }, (_, index) => index), ...rest, children: Children.map(children, (child, index) => {
+    const validChildren = useMemo(() => {
+        return (Children.map(children, (child) => {
             if (isValidElement(child)) {
-                return (_jsxs(AccordionItem, { value: index, children: [_jsx(AccordionHeader, { expandIconPosition: "end", children: _jsx(Subtitle1, { children: child.props.title }) }), _jsx(AccordionPanel, { children: _jsx("div", { className: classes.panelDiv, children: child }) })] }, child.props.title));
+                const childProps = child.props;
+                if (childProps.title) {
+                    return {
+                        title: childProps.title,
+                        collapseByDefault: childProps.collapseByDefault,
+                        content: child,
+                    };
+                }
             }
             return null;
+        })?.filter(Boolean) ?? []);
+    }, [children]);
+    return (_jsx(FluentAccordion, { className: classes.accordion, collapsible: true, multiple: true, defaultOpenItems: validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title), ...rest, children: validChildren.map((child) => {
+            return (_jsxs(AccordionItem, { value: child.title, children: [_jsx(AccordionHeader, { expandIconPosition: "end", children: _jsx(Subtitle1, { children: child.title }) }), _jsx(AccordionPanel, { children: _jsx("div", { className: classes.panelDiv, children: child.content }) })] }, child.title));
         }) }));
 };
 //# sourceMappingURL=accordion.js.map

package/fluent/primitives/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/accordion.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,SAAS,IAAI,eAAe,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEzJ,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,SAAS,EAAE;QACP,SAAS,EAAE,MAAM;QACjB,aAAa,EAAE,MAAM,CAAC,gBAAgB;QACtC,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,MAAM,CAAC,gBAAgB;KAClC;IACD,QAAQ,EAAE;QACN,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,QAAQ,EAAE,QAAQ;KACrB;CACJ,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,gBAAgB,GAAgE,CAAC,KAAK,EAAE,EAAE;IACnG,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,OAAO,cAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,YAAG,KAAK,CAAC,QAAQ,GAAO,CAAC;AACpE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAyC,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEpC,OAAO,CACH,KAAC,eAAe,IAAC,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,WAAW,QAAC,QAAQ,QAAC,gBAAgB,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAM,IAAI,YAChK,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACrC,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;gBACxB,OAAO,CACH,MAAC,aAAa,IAAyB,KAAK,EAAE,KAAK,aAC/C,KAAC,eAAe,IAAC,kBAAkB,EAAC,KAAK,YACrC,KAAC,SAAS,cAAE,KAAK,CAAC,KAAK,CAAC,KAAK,GAAa,GAC5B,EAClB,KAAC,cAAc,cACX,cAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,YAAG,KAAK,GAAO,GAClC,KAND,KAAK,CAAC,KAAK,CAAC,KAAK,CAOrB,CACnB,CAAC;YACN,CAAC;YACD,OAAO,IAAI,CAAC;QAChB,CAAC,CAAC,GACY,CACrB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent, PropsWithChildren } from \"react\";\r\n\r\nimport { Children, isValidElement } from \"react\";\r\n\r\nimport { Accordion as FluentAccordion, AccordionItem, AccordionHeader, AccordionPanel, Subtitle1, makeStyles, tokens } from \"@fluentui/react-components\";\r\n\r\nconst useStyles = makeStyles({\r\n    accordion: {\r\n        overflowY: \"auto\",\r\n        paddingBottom: tokens.spacingVerticalM,\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        rowGap: tokens.spacingVerticalM,\r\n    },\r\n    panelDiv: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        overflow: \"hidden\",\r\n    },\r\n});\r\n\r\nexport type AccordionSectionProps = {\r\n    title: string;\r\n};\r\n\r\nexport const AccordionSection: FunctionComponent<PropsWithChildren<AccordionSectionProps>> = (props) => {\r\n    const classes = useStyles();\r\n\r\n    return <div className={classes.panelDiv}>{props.children}</div>;\r\n};\r\n\r\nexport const Accordion: FunctionComponent<PropsWithChildren> = (props) => {\r\n    const classes = useStyles();\r\n\r\n    const { children, ...rest } = props;\r\n\r\n    return (\r\n        <FluentAccordion className={classes.accordion} collapsible multiple defaultOpenItems={Array.from({ length: Children.count(children) }, (_, index) => index)} {...rest}>\r\n            {Children.map(children, (child, index) => {\r\n                if (isValidElement(child)) {\r\n                    return (\r\n                        <AccordionItem key={child.props.title} value={index}>\r\n                            <AccordionHeader expandIconPosition=\"end\">\r\n                                <Subtitle1>{child.props.title}</Subtitle1>\r\n                            </AccordionHeader>\r\n                            <AccordionPanel>\r\n                                <div className={classes.panelDiv}>{child}</div>\r\n                            </AccordionPanel>\r\n                        </AccordionItem>\r\n                    );\r\n                }\r\n                return null;\r\n            })}\r\n        </FluentAccordion>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/accordion.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,SAAS,IAAI,eAAe,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEzJ,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,SAAS,EAAE;QACP,SAAS,EAAE,QAAQ;QACnB,SAAS,EAAE,MAAM;QACjB,aAAa,EAAE,MAAM,CAAC,gBAAgB;QACtC,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,MAAM,CAAC,gBAAgB;KAClC;IACD,QAAQ,EAAE;QACN,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,QAAQ,EAAE,QAAQ;KACrB;CACJ,CAAC,CAAC;AAOH,MAAM,CAAC,MAAM,gBAAgB,GAAgE,CAAC,KAAK,EAAE,EAAE;IACnG,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,OAAO,cAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,YAAG,KAAK,CAAC,QAAQ,GAAO,CAAC;AACpE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAyC,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACpC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO,CACH,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAC7B,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;gBACxB,MAAM,UAAU,GAAG,KAAK,CAAC,KAAuC,CAAC;gBACjE,IAAI,UAAU,CAAC,KAAK,EAAE,CAAC;oBACnB,OAAO;wBACH,KAAK,EAAE,UAAU,CAAC,KAAK;wBACvB,iBAAiB,EAAE,UAAU,CAAC,iBAAiB;wBAC/C,OAAO,EAAE,KAAK;qBACjB,CAAC;gBACN,CAAC;YACL,CAAC;YACD,OAAO,IAAI,CAAC;QAChB,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAC5B,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACH,KAAC,eAAe,IACZ,SAAS,EAAE,OAAO,CAAC,SAAS,EAC5B,WAAW,QACX,QAAQ,QACR,gBAAgB,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KACnG,IAAI,YAEP,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACzB,OAAO,CACH,MAAC,aAAa,IAAmB,KAAK,EAAE,KAAK,CAAC,KAAK,aAC/C,KAAC,eAAe,IAAC,kBAAkB,EAAC,KAAK,YACrC,KAAC,SAAS,cAAE,KAAK,CAAC,KAAK,GAAa,GACtB,EAClB,KAAC,cAAc,cACX,cAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,YAAG,KAAK,CAAC,OAAO,GAAO,GAC1C,KAND,KAAK,CAAC,KAAK,CAOf,CACnB,CAAC;QACN,CAAC,CAAC,GACY,CACrB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent, PropsWithChildren } from \"react\";\r\n\r\nimport { Children, isValidElement, useMemo } from \"react\";\r\n\r\nimport { Accordion as FluentAccordion, AccordionItem, AccordionHeader, AccordionPanel, Subtitle1, makeStyles, tokens } from \"@fluentui/react-components\";\r\n\r\nconst useStyles = makeStyles({\r\n    accordion: {\r\n        overflowX: \"hidden\",\r\n        overflowY: \"auto\",\r\n        paddingBottom: tokens.spacingVerticalM,\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        rowGap: tokens.spacingVerticalM,\r\n    },\r\n    panelDiv: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        overflow: \"hidden\",\r\n    },\r\n});\r\n\r\nexport type AccordionSectionProps = {\r\n    title: string;\r\n    collapseByDefault?: boolean;\r\n};\r\n\r\nexport const AccordionSection: FunctionComponent<PropsWithChildren<AccordionSectionProps>> = (props) => {\r\n    const classes = useStyles();\r\n\r\n    return <div className={classes.panelDiv}>{props.children}</div>;\r\n};\r\n\r\nexport const Accordion: FunctionComponent<PropsWithChildren> = (props) => {\r\n    const classes = useStyles();\r\n\r\n    const { children, ...rest } = props;\r\n    const validChildren = useMemo(() => {\r\n        return (\r\n            Children.map(children, (child) => {\r\n                if (isValidElement(child)) {\r\n                    const childProps = child.props as Partial<AccordionSectionProps>;\r\n                    if (childProps.title) {\r\n                        return {\r\n                            title: childProps.title,\r\n                            collapseByDefault: childProps.collapseByDefault,\r\n                            content: child,\r\n                        };\r\n                    }\r\n                }\r\n                return null;\r\n            })?.filter(Boolean) ?? []\r\n        );\r\n    }, [children]);\r\n\r\n    return (\r\n        <FluentAccordion\r\n            className={classes.accordion}\r\n            collapsible\r\n            multiple\r\n            defaultOpenItems={validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title)}\r\n            {...rest}\r\n        >\r\n            {validChildren.map((child) => {\r\n                return (\r\n                    <AccordionItem key={child.title} value={child.title}>\r\n                        <AccordionHeader expandIconPosition=\"end\">\r\n                            <Subtitle1>{child.title}</Subtitle1>\r\n                        </AccordionHeader>\r\n                        <AccordionPanel>\r\n                            <div className={classes.panelDiv}>{child.content}</div>\r\n                        </AccordionPanel>\r\n                    </AccordionItem>\r\n                );\r\n            })}\r\n        </FluentAccordion>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAqC,CAAC,KAAK,EAAE,EAAE;IAChE,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,EAAiC,EAAE,CAAuB,EAAE,EAAE;QAC5E,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAClC,UAAU,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,CAAC;AAC9F,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/no-internal-modules\r\n\r\nimport type { CheckboxOnChangeData } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\n\r\nimport { Checkbox as FluentCheckbox } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nexport type CheckboxProps = BaseComponentProps<boolean>;\r\n/**\r\n * This is a primitive fluent checkbox that can both read and write checked state\r\n * @param props\r\n * @returns Checkbox component\r\n */\r\nexport const Checkbox: FunctionComponent<CheckboxProps> = (props) => {\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 = (ev: ChangeEvent<HTMLInputElement>, _: CheckboxOnChangeData) => {\r\n        props.onChange(ev.target.checked);\r\n        setChecked(ev.target.checked);\r\n    };\r\n\r\n    return <FluentCheckbox checked={checked} onChange={onChange} disabled={props.disabled} />;\r\n};\r\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAqC,CAAC,KAAK,EAAE,EAAE;IAChE,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,EAAiC,EAAE,CAAuB,EAAE,EAAE;QAC5E,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAClC,UAAU,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,CAAC;AAC9F,CAAC,CAAC","sourcesContent":["import type { CheckboxOnChangeData } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\n\r\nimport { Checkbox as FluentCheckbox } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nexport type CheckboxProps = BaseComponentProps<boolean>;\r\n/**\r\n * This is a primitive fluent checkbox that can both read and write checked state\r\n * @param props\r\n * @returns Checkbox component\r\n */\r\nexport const Checkbox: FunctionComponent<CheckboxProps> = (props) => {\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 = (ev: ChangeEvent<HTMLInputElement>, _: CheckboxOnChangeData) => {\r\n        props.onChange(ev.target.checked);\r\n        setChecked(ev.target.checked);\r\n    };\r\n\r\n    return <FluentCheckbox checked={checked} onChange={onChange} disabled={props.disabled} />;\r\n};\r\n"]}

package/fluent/primitives/dropdown.d.ts

@@ -1,6 +1,8 @@
 import type { FunctionComponent } from "react";
 import type { BaseComponentProps } from "../hoc/propertyLine.js";
-export type AcceptedDropdownValue = string | number;
+import type { Nullable } from "@babylonjs/core/types.js";
+type DropdownOptionValue = string | number;
+export type AcceptedDropdownValue = Nullable<DropdownOptionValue> | undefined;
 export type DropdownOption = {
     /**
      * Defines the visible part of the option
@@ -9,15 +11,17 @@ export type DropdownOption = {
     /**
      * Defines the value part of the option
      */
-    value: AcceptedDropdownValue;
+    value: DropdownOptionValue;
 };
-export type DropdownProps = BaseComponentProps<AcceptedDropdownValue | undefined> & {
+export type DropdownProps<V extends AcceptedDropdownValue> = BaseComponentProps<V> & {
     options: DropdownOption[];
-    includeUndefined?: boolean;
+    includeNullAs?: "null" | "undefined";
 };
 /**
- * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if includeUndefined is set to true
+ * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true
+ * This component can handle both null and undefined values
  * @param props
  * @returns dropdown component
  */
-export declare const Dropdown: FunctionComponent<DropdownProps>;
+export declare const Dropdown: FunctionComponent<DropdownProps<AcceptedDropdownValue>>;
+export {};

package/fluent/primitives/dropdown.js

@@ -9,24 +9,26 @@ const useDropdownStyles = makeStyles({
     optionsLine: {},
 });
 /**
- * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if includeUndefined is set to true
+ * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true
+ * This component can handle both null and undefined values
  * @param props
  * @returns dropdown component
  */
 export const Dropdown = (props) => {
     const classes = useDropdownStyles();
-    const [options] = useState(props.includeUndefined ? [{ label: "<Not defined>", value: Number.NaN }, ...props.options] : props.options);
-    const [defaultVal, setDefaultVal] = useState(props.includeUndefined && props.value === undefined ? Number.NaN : props.value);
+    // This component can handle both null and undefined values, so '==' null is intentionally used throughout to check for both cases.
+    const [options] = useState(props.includeNullAs ? [{ label: "<Not defined>", value: Number.MAX_SAFE_INTEGER }, ...props.options] : props.options);
+    const [defaultVal, setDefaultVal] = useState(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);
     useEffect(() => {
-        setDefaultVal(props.includeUndefined && props.value === undefined ? Number.NaN : props.value);
+        setDefaultVal(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);
     }, [props.value]);
     return (_jsx(FluentDropdown, { size: "small", className: classes.dropdownOption, onOptionSelect: (evt, data) => {
-            let value = typeof props.value === "number" ? Number(data.optionValue) : data.optionValue;
-            setDefaultVal(value);
-            if (props.includeUndefined && value === Number.NaN.toString()) {
-                value = undefined;
+            const value = typeof props.value === "number" ? Number(data.optionValue) : data.optionValue;
+            if (value !== undefined) {
+                setDefaultVal(value);
+                const nullVal = props.includeNullAs === "null" ? null : undefined;
+                value === Number.MAX_SAFE_INTEGER ? props.onChange(nullVal) : props.onChange(value);
             }
-            props.onChange(value);
-        }, value: options.find((o) => o.value === defaultVal)?.label, children: options.map((option) => (_jsx(Option, { className: classes.optionsLine, value: option.value?.toString(), disabled: false, children: option.label }, option.label))) }));
+        }, selectedOptions: [defaultVal.toString()], value: options.find((o) => o.value === defaultVal)?.label, children: options.map((option) => (_jsx(Option, { className: classes.optionsLine, value: option.value.toString(), disabled: false, children: option.label }, option.label))) }));
 };
 //# sourceMappingURL=dropdown.js.map

package/fluent/primitives/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,cAAc,EAAE;QACZ,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,MAAM;KACnB;IACD,WAAW,EAAE,EAAE;CAClB,CAAC,CAAC;AAoBH;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAqC,CAAC,KAAK,EAAE,EAAE;IAChE,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,MAAM,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAmB,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzJ,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC7H,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAClG,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,cAAc,IACX,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,cAAc,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC1B,IAAI,KAAK,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;YAC1F,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,IAAI,KAAK,CAAC,gBAAgB,IAAI,KAAK,KAAK,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC;gBAC5D,KAAK,GAAG,SAAS,CAAC;YACtB,CAAC;YACD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC,EACD,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,EAAE,KAAK,YAExD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAsB,EAAE,EAAE,CAAC,CACrC,KAAC,MAAM,IAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAqB,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,YACtG,MAAM,CAAC,KAAK,IAD4B,MAAM,CAAC,KAAK,CAEhD,CACZ,CAAC,GACW,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Dropdown as FluentDropdown, makeStyles, Option } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useDropdownStyles = makeStyles({\r\n    dropdownOption: {\r\n        textAlign: \"right\",\r\n        minWidth: \"40px\",\r\n    },\r\n    optionsLine: {},\r\n});\r\n\r\nexport type AcceptedDropdownValue = string | number;\r\nexport type DropdownOption = {\r\n    /**\r\n     * Defines the visible part of the option\r\n     */\r\n    label: string;\r\n    /**\r\n     * Defines the value part of the option\r\n     */\r\n    value: AcceptedDropdownValue;\r\n};\r\n\r\nexport type DropdownProps = BaseComponentProps<AcceptedDropdownValue | undefined> & {\r\n    options: DropdownOption[];\r\n\r\n    includeUndefined?: boolean; // If true, adds an option with label 'Not Defined' and value undefined\r\n};\r\n\r\n/**\r\n * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if includeUndefined is set to true\r\n * @param props\r\n * @returns dropdown component\r\n */\r\nexport const Dropdown: FunctionComponent<DropdownProps> = (props) => {\r\n    const classes = useDropdownStyles();\r\n    const [options] = useState<DropdownOption[]>(props.includeUndefined ? [{ label: \"<Not defined>\", value: Number.NaN }, ...props.options] : props.options);\r\n    const [defaultVal, setDefaultVal] = useState(props.includeUndefined && props.value === undefined ? Number.NaN : props.value);\r\n    useEffect(() => {\r\n        setDefaultVal(props.includeUndefined && props.value === undefined ? Number.NaN : props.value);\r\n    }, [props.value]);\r\n\r\n    return (\r\n        <FluentDropdown\r\n            size=\"small\"\r\n            className={classes.dropdownOption}\r\n            onOptionSelect={(evt, data) => {\r\n                let value = typeof props.value === \"number\" ? Number(data.optionValue) : data.optionValue;\r\n                setDefaultVal(value);\r\n                if (props.includeUndefined && value === Number.NaN.toString()) {\r\n                    value = undefined;\r\n                }\r\n                props.onChange(value);\r\n            }}\r\n            value={options.find((o) => o.value === defaultVal)?.label}\r\n        >\r\n            {options.map((option: DropdownOption) => (\r\n                <Option className={classes.optionsLine} key={option.label} value={option.value?.toString()} disabled={false}>\r\n                    {option.label}\r\n                </Option>\r\n            ))}\r\n        </FluentDropdown>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,cAAc,EAAE;QACZ,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,MAAM;KACnB;IACD,WAAW,EAAE,EAAE;CAClB,CAAC,CAAC;AAqBH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4D,CAAC,KAAK,EAAE,EAAE;IACvF,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,mIAAmI;IACnI,MAAM,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAmB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,CAAC,gBAAgB,EAAE,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACnK,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC1G,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,cAAc,IACX,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,cAAc,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC1B,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;YAC5F,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACtB,aAAa,CAAC,KAAK,CAAC,CAAC;gBACrB,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;gBAClE,KAAK,KAAK,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACxF,CAAC;QACL,CAAC,EACD,eAAe,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,EACxC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,EAAE,KAAK,YAExD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAsB,EAAE,EAAE,CAAC,CACrC,KAAC,MAAM,IAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAqB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,YACrG,MAAM,CAAC,KAAK,IAD4B,MAAM,CAAC,KAAK,CAEhD,CACZ,CAAC,GACW,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Dropdown as FluentDropdown, makeStyles, Option } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\nimport type { Nullable } from \"core/types\";\r\n\r\nconst useDropdownStyles = makeStyles({\r\n    dropdownOption: {\r\n        textAlign: \"right\",\r\n        minWidth: \"40px\",\r\n    },\r\n    optionsLine: {},\r\n});\r\n\r\ntype DropdownOptionValue = string | number;\r\nexport type AcceptedDropdownValue = Nullable<DropdownOptionValue> | undefined;\r\nexport type DropdownOption = {\r\n    /**\r\n     * Defines the visible part of the option\r\n     */\r\n    label: string;\r\n    /**\r\n     * Defines the value part of the option\r\n     */\r\n    value: DropdownOptionValue;\r\n};\r\n\r\nexport type DropdownProps<V extends AcceptedDropdownValue> = BaseComponentProps<V> & {\r\n    options: DropdownOption[];\r\n\r\n    includeNullAs?: \"null\" | \"undefined\"; // If supplied, adds an option with label 'Not Defined' and later sets value either null or undefined\r\n};\r\n\r\n/**\r\n * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true\r\n * This component can handle both null and undefined values\r\n * @param props\r\n * @returns dropdown component\r\n */\r\nexport const Dropdown: FunctionComponent<DropdownProps<AcceptedDropdownValue>> = (props) => {\r\n    const classes = useDropdownStyles();\r\n    // This component can handle both null and undefined values, so '==' null is intentionally used throughout to check for both cases.\r\n    const [options] = useState<DropdownOption[]>(props.includeNullAs ? [{ label: \"<Not defined>\", value: Number.MAX_SAFE_INTEGER }, ...props.options] : props.options);\r\n    const [defaultVal, setDefaultVal] = useState(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);\r\n    useEffect(() => {\r\n        setDefaultVal(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);\r\n    }, [props.value]);\r\n\r\n    return (\r\n        <FluentDropdown\r\n            size=\"small\"\r\n            className={classes.dropdownOption}\r\n            onOptionSelect={(evt, data) => {\r\n                const value = typeof props.value === \"number\" ? Number(data.optionValue) : data.optionValue;\r\n                if (value !== undefined) {\r\n                    setDefaultVal(value);\r\n                    const nullVal = props.includeNullAs === \"null\" ? null : undefined;\r\n                    value === Number.MAX_SAFE_INTEGER ? props.onChange(nullVal) : props.onChange(value);\r\n                }\r\n            }}\r\n            selectedOptions={[defaultVal.toString()]}\r\n            value={options.find((o) => o.value === defaultVal)?.label}\r\n        >\r\n            {options.map((option: DropdownOption) => (\r\n                <Option className={classes.optionsLine} key={option.label} value={option.value.toString()} disabled={false}>\r\n                    {option.label}\r\n                </Option>\r\n            ))}\r\n        </FluentDropdown>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/input.js

@@ -20,17 +20,19 @@ const useInputStyles = makeStyles({
 export const Input = (props) => {
     const classes = useInputStyles();
     const [value, setValue] = useState(props.value ?? "");
+    const type = typeof props.value === "number" ? "number" : "text";
     useEffect(() => {
         setValue(props.value ?? ""); // Update local state when props.value changes
     }, [props.value]);
     const handleChange = (event, _) => {
         event.stopPropagation(); // Prevent event propagation
-        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 value = type === "number" ? Number(event.target.value) : String(event.target.value);
+        props.onChange(value); // Call the original onChange handler passed as prop
+        setValue(value); // Update local state with the new value
     };
     const handleKeyDown = (event) => {
         event.stopPropagation(); // Prevent event propagation
     };
-    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 }));
+    return (_jsx(FluentInput, { ...props, type: type, 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;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"]}
+{"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,MAAM,IAAI,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;IAEjE,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,MAAM,KAAK,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC1F,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,oDAAoD;QAC3E,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,wCAAwC;IAC7D,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,IAAI,EACV,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    const type = typeof props.value === \"number\" ? \"number\" : \"text\";\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        const value = type === \"number\" ? Number(event.target.value) : String(event.target.value);\r\n        props.onChange(value); // Call the original onChange handler passed as prop\r\n        setValue(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={type}\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/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;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"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/switch.tsx"],"names":[],"mappings":";AAGA,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":["import 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.js

@@ -26,11 +26,17 @@ const useSyncedSliderStyles = makeStyles({
 export const SyncedSliderInput = (props) => {
     const classes = useSyncedSliderStyles();
     const [value, setValue] = useState(props.value);
+    // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.
+    // To avoid this, we scale the min/max based on the step so we can always make step undefined.
+    // The actual step size in the Fluent slider is 1 when it is ste to undefined.
+    const min = props.min ?? 0;
+    const max = props.max ?? 100;
+    const step = props.step ?? 1;
     useEffect(() => {
         setValue(props.value ?? ""); // Update local state when props.value changes
     }, [props.value]);
     const handleSliderChange = (_, data) => {
-        const value = data.value;
+        const value = data.value * step;
         setValue(value);
         props.onChange(value); // Notify parent
     };
@@ -41,6 +47,6 @@ export const SyncedSliderInput = (props) => {
             props.onChange(newValue); // Notify parent
         }
     };
-    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 })] }));
+    return (_jsxs("div", { className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (_jsx(Slider, { ...props, size: "small", className: classes.slider, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange })), _jsx(Input, { ...props, className: classes.input, value: Math.round(value / step) * step, onChange: handleInputChange, step: 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,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"]}
+{"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,iGAAiG;IACjG,8FAA8F;IAC9F,8EAA8E;IAC9E,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;IAC3B,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE7B,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,GAAG,IAAI,CAAC;QAChC,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,CACnD,KAAC,MAAM,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,QAAQ,EAAE,kBAAkB,GAAI,CACtK,EACD,KAAC,KAAK,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAI,IAC7H,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    // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.\r\n    // To avoid this, we scale the min/max based on the step so we can always make step undefined.\r\n    // The actual step size in the Fluent slider is 1 when it is ste to undefined.\r\n    const min = props.min ?? 0;\r\n    const max = props.max ?? 100;\r\n    const step = props.step ?? 1;\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 * step;\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 && (\r\n                <Slider {...props} size=\"small\" className={classes.slider} min={min / step} max={max / step} step={undefined} value={value / step} onChange={handleSliderChange} />\r\n            )}\r\n            <Input {...props} className={classes.input} value={Math.round(value / step) * step} onChange={handleInputChange} step={step} />\r\n        </div>\r\n    );\r\n};\r\n"]}

package/lines/optionsLineComponent.js

@@ -83,7 +83,8 @@ export class OptionsLine extends React.Component {
     }
     _renderFluent() {
         return (_jsx(PropertyLine, { label: this.props.label, onCopy: () => this.onCopyClickStr(), children: _jsx(Dropdown, { options: this.props.options, onChange: (val) => {
-                    val !== undefined && this.updateValue(val.toString());
+                    // val != null captures both null and undefined cases
+                    val != null && this.updateValue(val.toString());
                 }, value: this.state.value }) }));
     }
     _renderOriginal() {

package/lines/optionsLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"optionsLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/optionsLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport type { IInspectableOptions } from \"core/Misc/iInspectable\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { PropertyLine } from \"../fluent/hoc/propertyLine\";\r\nimport { Dropdown } from \"../fluent/primitives/dropdown\";\r\nimport type { AcceptedDropdownValue } from \"../fluent/primitives/dropdown\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const Null_Value = Number.MAX_SAFE_INTEGER;\r\n\r\nexport interface IOptionsLineProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    options: IInspectableOptions[];\r\n    noDirectUpdate?: boolean;\r\n    onSelect?: (value: number | string) => void;\r\n    extractValue?: (target: any) => number | string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    allowNullValue?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    className?: string;\r\n    valuesAreStrings?: boolean;\r\n    defaultIfNull?: number;\r\n}\r\n\r\nexport class OptionsLine extends React.Component<IOptionsLineProps, { value: number | string }> {\r\n    private _localChange = false;\r\n\r\n    private _remapValueIn(value: number | null): number {\r\n        return this.props.allowNullValue && value === null ? Null_Value : value!;\r\n    }\r\n\r\n    private _remapValueOut(value: number): number | null {\r\n        return this.props.allowNullValue && value === Null_Value ? null : value;\r\n    }\r\n\r\n    private _getValue(props: IOptionsLineProps) {\r\n        if (props.extractValue) {\r\n            return props.extractValue(props.target);\r\n        }\r\n        return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];\r\n    }\r\n\r\n    constructor(props: IOptionsLineProps) {\r\n        super(props);\r\n\r\n        this.state = { value: this._remapValueIn(this._getValue(props)) };\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IOptionsLineProps, nextState: { value: number }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(this.props.target) : nextProps.target[nextProps.propertyName]);\r\n        if (newValue != null && newValue !== nextState.value) {\r\n            nextState.value = newValue;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.target,\r\n            property: this.props.propertyName,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n            allowNullValue: this.props.allowNullValue,\r\n        });\r\n    }\r\n\r\n    setValue(value: string | number) {\r\n        this.setState({ value: value });\r\n    }\r\n\r\n    updateValue(valueString: string) {\r\n        const value = this.props.valuesAreStrings ? valueString : parseInt(valueString);\r\n        this._localChange = true;\r\n\r\n        const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        if (!this.props.noDirectUpdate) {\r\n            this.props.target[this.props.propertyName] = this._remapValueOut(value as number);\r\n        }\r\n        this.setState({ value: value });\r\n\r\n        if (this.props.onSelect) {\r\n            this.props.onSelect(value);\r\n        }\r\n\r\n        const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        this.raiseOnPropertyChanged(newValue, store);\r\n    }\r\n\r\n    // Copy to clipboard the code this option actually does\r\n    // Example : material.sideOrientation = 1;\r\n    onCopyClickStr() {\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.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n            const strCommand = targetName + \".\" + targetProperty + \" = \" + value + \";// (debugNode as \" + babylonNamespace + className + \")\";\r\n            return strCommand;\r\n        } else {\r\n            return \"undefined\";\r\n        }\r\n    }\r\n\r\n    private _renderFluent() {\r\n        return (\r\n            <PropertyLine label={this.props.label} onCopy={() => this.onCopyClickStr()}>\r\n                <Dropdown\r\n                    options={this.props.options}\r\n                    onChange={(val: AcceptedDropdownValue | undefined) => {\r\n                        val !== undefined && this.updateValue(val.toString());\r\n                    }}\r\n                    value={this.state.value}\r\n                />\r\n            </PropertyLine>\r\n        );\r\n    }\r\n\r\n    private _renderOriginal() {\r\n        return (\r\n            <div className={\"listLine\" + (this.props.className ? \" \" + this.props.className : \"\")}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} color=\"black\" className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className=\"options\">\r\n                    <select onChange={(evt) => this.updateValue(evt.target.value)} value={this.state.value ?? \"\"}>\r\n                        {this.props.options.map((option, i) => {\r\n                            return (\r\n                                <option selected={option.selected} key={option.label + i} value={option.value} title={option.label}>\r\n                                    {option.label}\r\n                                </option>\r\n                            );\r\n                        })}\r\n                    </select>\r\n                </div>\r\n                <div className=\"copy hoverIcon\" onClick={() => copyCommandToClipboard(this.onCopyClickStr())} title=\"Copy to clipboard\">\r\n                    <img src={copyIcon} alt=\"Copy\" />\r\n                </div>\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"]}
+{"version":3,"file":"optionsLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/optionsLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport type { IInspectableOptions } from \"core/Misc/iInspectable\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { PropertyLine } from \"../fluent/hoc/propertyLine\";\r\nimport { Dropdown } from \"../fluent/primitives/dropdown\";\r\nimport type { AcceptedDropdownValue } from \"../fluent/primitives/dropdown\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const Null_Value = Number.MAX_SAFE_INTEGER;\r\n\r\nexport interface IOptionsLineProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    options: IInspectableOptions[];\r\n    noDirectUpdate?: boolean;\r\n    onSelect?: (value: number | string) => void;\r\n    extractValue?: (target: any) => number | string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    allowNullValue?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    className?: string;\r\n    valuesAreStrings?: boolean;\r\n    defaultIfNull?: number;\r\n}\r\n\r\nexport class OptionsLine extends React.Component<IOptionsLineProps, { value: number | string }> {\r\n    private _localChange = false;\r\n\r\n    private _remapValueIn(value: number | null): number {\r\n        return this.props.allowNullValue && value === null ? Null_Value : value!;\r\n    }\r\n\r\n    private _remapValueOut(value: number): number | null {\r\n        return this.props.allowNullValue && value === Null_Value ? null : value;\r\n    }\r\n\r\n    private _getValue(props: IOptionsLineProps) {\r\n        if (props.extractValue) {\r\n            return props.extractValue(props.target);\r\n        }\r\n        return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];\r\n    }\r\n\r\n    constructor(props: IOptionsLineProps) {\r\n        super(props);\r\n\r\n        this.state = { value: this._remapValueIn(this._getValue(props)) };\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IOptionsLineProps, nextState: { value: number }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(this.props.target) : nextProps.target[nextProps.propertyName]);\r\n        if (newValue != null && newValue !== nextState.value) {\r\n            nextState.value = newValue;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.target,\r\n            property: this.props.propertyName,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n            allowNullValue: this.props.allowNullValue,\r\n        });\r\n    }\r\n\r\n    setValue(value: string | number) {\r\n        this.setState({ value: value });\r\n    }\r\n\r\n    updateValue(valueString: string) {\r\n        const value = this.props.valuesAreStrings ? valueString : parseInt(valueString);\r\n        this._localChange = true;\r\n\r\n        const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        if (!this.props.noDirectUpdate) {\r\n            this.props.target[this.props.propertyName] = this._remapValueOut(value as number);\r\n        }\r\n        this.setState({ value: value });\r\n\r\n        if (this.props.onSelect) {\r\n            this.props.onSelect(value);\r\n        }\r\n\r\n        const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        this.raiseOnPropertyChanged(newValue, store);\r\n    }\r\n\r\n    // Copy to clipboard the code this option actually does\r\n    // Example : material.sideOrientation = 1;\r\n    onCopyClickStr() {\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.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n            const strCommand = targetName + \".\" + targetProperty + \" = \" + value + \";// (debugNode as \" + babylonNamespace + className + \")\";\r\n            return strCommand;\r\n        } else {\r\n            return \"undefined\";\r\n        }\r\n    }\r\n\r\n    private _renderFluent() {\r\n        return (\r\n            <PropertyLine label={this.props.label} onCopy={() => this.onCopyClickStr()}>\r\n                <Dropdown\r\n                    options={this.props.options}\r\n                    onChange={(val: AcceptedDropdownValue) => {\r\n                        // val != null captures both null and undefined cases\r\n                        val != null && this.updateValue(val.toString());\r\n                    }}\r\n                    value={this.state.value}\r\n                />\r\n            </PropertyLine>\r\n        );\r\n    }\r\n\r\n    private _renderOriginal() {\r\n        return (\r\n            <div className={\"listLine\" + (this.props.className ? \" \" + this.props.className : \"\")}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} color=\"black\" className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className=\"options\">\r\n                    <select onChange={(evt) => this.updateValue(evt.target.value)} value={this.state.value ?? \"\"}>\r\n                        {this.props.options.map((option, i) => {\r\n                            return (\r\n                                <option selected={option.selected} key={option.label + i} value={option.value} title={option.label}>\r\n                                    {option.label}\r\n                                </option>\r\n                            );\r\n                        })}\r\n                    </select>\r\n                </div>\r\n                <div className=\"copy hoverIcon\" onClick={() => copyCommandToClipboard(this.onCopyClickStr())} title=\"Copy to clipboard\">\r\n                    <img src={copyIcon} alt=\"Copy\" />\r\n                </div>\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"]}

package/package.json

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