@onerjs/shared-ui-components 8.25.1 → 8.25.3

package/constToOptionsMaps.js

@@ -1,5 +1,5 @@
-import { Constants } from "@onerjs/core/Engines.js";
-import { ParticleSystem } from "@onerjs/core/Particles.js";
+import { Constants } from "@onerjs/core/Engines/constants.js";
+import { ParticleSystem } from "@onerjs/core/Particles/particleSystem.js";
 /**
  * Used by both particleSystem and alphaBlendModes
  */

package/constToOptionsMaps.js.map

@@ -1 +1 @@
-{"version":3,"file":"constToOptionsMaps.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/constToOptionsMaps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gCAAqB;AACzC,OAAO,EAAE,cAAc,EAAE,kCAAuB;AAEhD;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE;IACxD,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,mBAAmB,EAAE;IACjE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,SAAS,CAAC,8BAA8B,EAAE;IACxF,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,CAAC,gBAAgB,EAAE;IAC3D,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,CAAC,mBAAmB,EAAE;IAChE,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,kBAAkB,EAAE;IAChE,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,SAAS,CAAC,qBAAqB,EAAE;IACtE,EAAE,KAAK,EAAE,iCAAiC,EAAE,KAAK,EAAE,SAAS,CAAC,6BAA6B,EAAE;IAC5F,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,oBAAoB,EAAE;IAClE,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE;IACxD,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,SAAS,CAAC,sBAAsB,EAAE;CACzE,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,aAAa,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;IAC/D,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,CAAC,qBAAqB,EAAE;IACtE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,CAAC,gBAAgB,EAAE;IAC5D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;IAC/D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;CAClE,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAE3B;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE;IACpD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,YAAY,EAAE;IACnD,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,SAAS,EAAE;IAC5C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE;IACtD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE;CACzD,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import { Constants } from \"core/Engines\";\r\nimport { ParticleSystem } from \"core/Particles\";\r\n\r\n/**\r\n * Used by both particleSystem and alphaBlendModes\r\n */\r\nexport const CommonBlendModes = [\r\n    { label: \"Maximized\", value: Constants.ALPHA_MAXIMIZED },\r\n    { label: \"Pre-multiplied\", value: Constants.ALPHA_PREMULTIPLIED },\r\n    { label: \"Pre-multiplied Porter Duff\", value: Constants.ALPHA_PREMULTIPLIED_PORTERDUFF },\r\n    { label: \"Screen Mode\", value: Constants.ALPHA_SCREENMODE },\r\n    { label: \"OneOne OneOne\", value: Constants.ALPHA_ONEONE_ONEONE },\r\n    { label: \"Alpha to Color\", value: Constants.ALPHA_ALPHATOCOLOR },\r\n    { label: \"Reverse One Minus\", value: Constants.ALPHA_REVERSEONEMINUS },\r\n    { label: \"Source+Dest * (1 - SourceAlpha)\", value: Constants.ALPHA_SRC_DSTONEMINUSSRCALPHA },\r\n    { label: \"OneOne OneZero\", value: Constants.ALPHA_ONEONE_ONEZERO },\r\n    { label: \"Exclusion\", value: Constants.ALPHA_EXCLUSION },\r\n    { label: \"Layer Accumulate\", value: Constants.ALPHA_LAYER_ACCUMULATE },\r\n];\r\n\r\n/**\r\n * Used to populated the blendMode dropdown in our various tools (Node Editor, Inspector, etc.)\r\n * The below ParticleSystem consts were defined before new Engine alpha blend modes were added, so we have to reference\r\n * the ParticleSystem.FOO consts explicitly (as the underlying const values are different - they get mapped to engine consts within baseParticleSystem.ts)\r\n */\r\nexport const BlendModeOptions = [\r\n    { label: \"Add\", value: ParticleSystem.BLENDMODE_ADD },\r\n    { label: \"Multiply\", value: ParticleSystem.BLENDMODE_MULTIPLY },\r\n    { label: \"Multiply Add\", value: ParticleSystem.BLENDMODE_MULTIPLYADD },\r\n    { label: \"One One\", value: ParticleSystem.BLENDMODE_ONEONE },\r\n    { label: \"Standard\", value: ParticleSystem.BLENDMODE_STANDARD },\r\n    { label: \"Subtract\", value: ParticleSystem.BLENDMODE_SUBTRACT },\r\n].concat(CommonBlendModes);\r\n\r\n/**\r\n * Used to populated the alphaMode dropdown in our various tools (Node Editor, Inspector, etc.)\r\n */\r\nexport const AlphaModeOptions = [\r\n    { label: \"Combine\", value: Constants.ALPHA_COMBINE },\r\n    { label: \"One One\", value: Constants.ALPHA_ONEONE },\r\n    { label: \"Add\", value: Constants.ALPHA_ADD },\r\n    { label: \"Subtract\", value: Constants.ALPHA_SUBTRACT },\r\n    { label: \"Multiply\", value: Constants.ALPHA_MULTIPLY },\r\n].concat(CommonBlendModes);\r\n"]}
+{"version":3,"file":"constToOptionsMaps.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/constToOptionsMaps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,0CAA+B;AACnD,OAAO,EAAE,cAAc,EAAE,iDAAsC;AAE/D;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE;IACxD,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,mBAAmB,EAAE;IACjE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,SAAS,CAAC,8BAA8B,EAAE;IACxF,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,CAAC,gBAAgB,EAAE;IAC3D,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,CAAC,mBAAmB,EAAE;IAChE,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,kBAAkB,EAAE;IAChE,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,SAAS,CAAC,qBAAqB,EAAE;IACtE,EAAE,KAAK,EAAE,iCAAiC,EAAE,KAAK,EAAE,SAAS,CAAC,6BAA6B,EAAE;IAC5F,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,oBAAoB,EAAE;IAClE,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE;IACxD,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,SAAS,CAAC,sBAAsB,EAAE;CACzE,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,aAAa,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;IAC/D,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,CAAC,qBAAqB,EAAE;IACtE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,CAAC,gBAAgB,EAAE;IAC5D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;IAC/D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;CAClE,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAE3B;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE;IACpD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,YAAY,EAAE;IACnD,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,SAAS,EAAE;IAC5C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE;IACtD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE;CACzD,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import { Constants } from \"core/Engines/constants\";\r\nimport { ParticleSystem } from \"core/Particles/particleSystem\";\r\n\r\n/**\r\n * Used by both particleSystem and alphaBlendModes\r\n */\r\nexport const CommonBlendModes = [\r\n    { label: \"Maximized\", value: Constants.ALPHA_MAXIMIZED },\r\n    { label: \"Pre-multiplied\", value: Constants.ALPHA_PREMULTIPLIED },\r\n    { label: \"Pre-multiplied Porter Duff\", value: Constants.ALPHA_PREMULTIPLIED_PORTERDUFF },\r\n    { label: \"Screen Mode\", value: Constants.ALPHA_SCREENMODE },\r\n    { label: \"OneOne OneOne\", value: Constants.ALPHA_ONEONE_ONEONE },\r\n    { label: \"Alpha to Color\", value: Constants.ALPHA_ALPHATOCOLOR },\r\n    { label: \"Reverse One Minus\", value: Constants.ALPHA_REVERSEONEMINUS },\r\n    { label: \"Source+Dest * (1 - SourceAlpha)\", value: Constants.ALPHA_SRC_DSTONEMINUSSRCALPHA },\r\n    { label: \"OneOne OneZero\", value: Constants.ALPHA_ONEONE_ONEZERO },\r\n    { label: \"Exclusion\", value: Constants.ALPHA_EXCLUSION },\r\n    { label: \"Layer Accumulate\", value: Constants.ALPHA_LAYER_ACCUMULATE },\r\n];\r\n\r\n/**\r\n * Used to populated the blendMode dropdown in our various tools (Node Editor, Inspector, etc.)\r\n * The below ParticleSystem consts were defined before new Engine alpha blend modes were added, so we have to reference\r\n * the ParticleSystem.FOO consts explicitly (as the underlying const values are different - they get mapped to engine consts within baseParticleSystem.ts)\r\n */\r\nexport const BlendModeOptions = [\r\n    { label: \"Add\", value: ParticleSystem.BLENDMODE_ADD },\r\n    { label: \"Multiply\", value: ParticleSystem.BLENDMODE_MULTIPLY },\r\n    { label: \"Multiply Add\", value: ParticleSystem.BLENDMODE_MULTIPLYADD },\r\n    { label: \"One One\", value: ParticleSystem.BLENDMODE_ONEONE },\r\n    { label: \"Standard\", value: ParticleSystem.BLENDMODE_STANDARD },\r\n    { label: \"Subtract\", value: ParticleSystem.BLENDMODE_SUBTRACT },\r\n].concat(CommonBlendModes);\r\n\r\n/**\r\n * Used to populated the alphaMode dropdown in our various tools (Node Editor, Inspector, etc.)\r\n */\r\nexport const AlphaModeOptions = [\r\n    { label: \"Combine\", value: Constants.ALPHA_COMBINE },\r\n    { label: \"One One\", value: Constants.ALPHA_ONEONE },\r\n    { label: \"Add\", value: Constants.ALPHA_ADD },\r\n    { label: \"Subtract\", value: Constants.ALPHA_SUBTRACT },\r\n    { label: \"Multiply\", value: Constants.ALPHA_MULTIPLY },\r\n].concat(CommonBlendModes);\r\n"]}

package/fluent/hoc/propertyLines/inputPropertyLine.d.ts

@@ -1,15 +1,19 @@
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
-import type { InputProps } from "../../primitives/input.js";
+import type { TextInputProps } from "../../primitives/textInput.js";
+import type { SpinButtonProps } from "../../primitives/spinButton.js";
 /**
  * Wraps a text input in a property line
  * @param props - PropertyLineProps and InputProps
  * @returns property-line wrapped input component
  */
-export declare const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps<string>>;
+export declare const TextInputPropertyLine: FunctionComponent<TextInputProps & PropertyLineProps<string>>;
 /**
  * Wraps a number input in a property line
+ * To force integer values, use forceInt param (this is distinct from the 'step' param, which will still allow submitting an integer value. forceInt will not)
  * @param props - PropertyLineProps and InputProps
  * @returns property-line wrapped input component
  */
-export declare const NumberInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps<number>>;
+export declare const NumberInputPropertyLine: FunctionComponent<SpinButtonProps & PropertyLineProps<number> & {
+    forceInt?: boolean;
+}>;

package/fluent/hoc/propertyLines/inputPropertyLine.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PropertyLine } from "./propertyLine.js";
-import { NumberInput, TextInput } from "../../primitives/input.js";
+import { TextInput } from "../../primitives/textInput.js";
+import { SpinButton } from "../../primitives/spinButton.js";
 /**
  * Wraps a text input in a property line
  * @param props - PropertyLineProps and InputProps
@@ -9,8 +10,11 @@ import { NumberInput, TextInput } from "../../primitives/input.js";
 export const TextInputPropertyLine = (props) => (_jsx(PropertyLine, { ...props, children: _jsx(TextInput, { ...props }) }));
 /**
  * Wraps a number input in a property line
+ * To force integer values, use forceInt param (this is distinct from the 'step' param, which will still allow submitting an integer value. forceInt will not)
  * @param props - PropertyLineProps and InputProps
  * @returns property-line wrapped input component
  */
-export const NumberInputPropertyLine = (props) => (_jsx(PropertyLine, { ...props, children: _jsx(NumberInput, { ...props }) }));
+export const NumberInputPropertyLine = (props) => {
+    return (_jsx(PropertyLine, { ...props, children: _jsx(SpinButton, { ...props }) }));
+};
 //# sourceMappingURL=inputPropertyLine.js.map

package/fluent/hoc/propertyLines/inputPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/inputPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGhE;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAsE,CAAC,KAAK,EAAE,EAAE,CAAC,CAC/G,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,SAAS,OAAK,KAAK,GAAI,GACb,CAClB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAsE,CAAC,KAAK,EAAE,EAAE,CAAC,CACjH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,WAAW,OAAK,KAAK,GAAI,GACf,CAClB,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { NumberInput, TextInput } from \"../../primitives/input\";\r\nimport type { InputProps } from \"../../primitives/input\";\r\n\r\n/**\r\n * Wraps a text input in a property line\r\n * @param props - PropertyLineProps and InputProps\r\n * @returns property-line wrapped input component\r\n */\r\nexport const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps<string>> = (props) => (\r\n    <PropertyLine {...props}>\r\n        <TextInput {...props} />\r\n    </PropertyLine>\r\n);\r\n\r\n/**\r\n * Wraps a number input in a property line\r\n * @param props - PropertyLineProps and InputProps\r\n * @returns property-line wrapped input component\r\n */\r\nexport const NumberInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps<number>> = (props) => (\r\n    <PropertyLine {...props}>\r\n        <NumberInput {...props} />\r\n    </PropertyLine>\r\n);\r\n"]}
+{"version":3,"file":"inputPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/inputPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAkE,CAAC,KAAK,EAAE,EAAE,CAAC,CAC3G,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,SAAS,OAAK,KAAK,GAAI,GACb,CAClB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAA4F,CAAC,KAAK,EAAE,EAAE;IACtI,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,UAAU,OAAK,KAAK,GAAI,GACd,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { TextInputProps } from \"../../primitives/textInput\";\r\nimport { TextInput } from \"../../primitives/textInput\";\r\nimport type { SpinButtonProps } from \"../../primitives/spinButton\";\r\nimport { SpinButton } from \"../../primitives/spinButton\";\r\n/**\r\n * Wraps a text input in a property line\r\n * @param props - PropertyLineProps and InputProps\r\n * @returns property-line wrapped input component\r\n */\r\nexport const TextInputPropertyLine: FunctionComponent<TextInputProps & PropertyLineProps<string>> = (props) => (\r\n    <PropertyLine {...props}>\r\n        <TextInput {...props} />\r\n    </PropertyLine>\r\n);\r\n\r\n/**\r\n * Wraps a number input in a property line\r\n * To force integer values, use forceInt param (this is distinct from the 'step' param, which will still allow submitting an integer value. forceInt will not)\r\n * @param props - PropertyLineProps and InputProps\r\n * @returns property-line wrapped input component\r\n */\r\nexport const NumberInputPropertyLine: FunctionComponent<SpinButtonProps & PropertyLineProps<number> & { forceInt?: boolean }> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <SpinButton {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/vectorPropertyLine.d.ts

@@ -12,6 +12,10 @@ export type TensorPropertyLineProps<V extends Vector2 | Vector3 | Vector4 | Quat
      * If passed, all sliders will use this for the max value
      */
     max?: number;
+    /**
+     * Will be displayed in the input UI to indicate the unit of measurement
+     */
+    unit?: string;
     /**
      * If passed, the UX will use the conversion functions to display/update values
      */

package/fluent/hoc/propertyLines/vectorPropertyLine.js

@@ -25,13 +25,13 @@ const TensorPropertyLine = (props) => {
         setVector(newVector);
         props.onChange(newVector);
     };
-    return (_jsx(PropertyLine, { ...props, expandedContent: _jsxs(_Fragment, { children: [_jsx(SyncedSliderPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x") }), _jsx(SyncedSliderPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y") }), HasZ(vector) && _jsx(SyncedSliderPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z") }), HasW(vector) && _jsx(SyncedSliderPropertyLine, { label: "W", value: converted(vector.w), min: min, max: max, onChange: (val) => onChange(val, "w") })] }), children: _jsx(Body1, { children: `X: ${formatted(props.value.x)} | Y: ${formatted(props.value.y)}${HasZ(props.value) ? ` | Z: ${formatted(props.value.z)}` : ""}${HasW(props.value) ? ` | W: ${formatted(props.value.w)}` : ""}` }) }));
+    return (_jsx(PropertyLine, { ...props, expandedContent: _jsxs(_Fragment, { children: [_jsx(SyncedSliderPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x"), unit: props.unit }), _jsx(SyncedSliderPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y"), unit: props.unit }), HasZ(vector) && (_jsx(SyncedSliderPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z"), unit: props.unit })), HasW(vector) && (_jsx(SyncedSliderPropertyLine, { label: "W", value: converted(vector.w), min: min, max: max, onChange: (val) => onChange(val, "w"), unit: props.unit }))] }), children: _jsx(Body1, { children: `X: ${formatted(props.value.x)} | Y: ${formatted(props.value.y)}${HasZ(props.value) ? ` | Z: ${formatted(props.value.z)}` : ""}${HasW(props.value) ? ` | W: ${formatted(props.value.w)}` : ""}` }) }));
 };
 const ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };
 export const RotationVectorPropertyLine = (props) => {
     const min = props.useDegrees ? 0 : undefined;
     const max = props.useDegrees ? 360 : undefined;
-    return _jsx(Vector3PropertyLine, { ...props, valueConverter: props.useDegrees ? ToDegreesConverter : undefined, min: min, max: max });
+    return _jsx(Vector3PropertyLine, { ...props, unit: props.useDegrees ? "deg" : "rad", valueConverter: props.useDegrees ? ToDegreesConverter : undefined, min: min, max: max });
 };
 const QuaternionPropertyLineInternal = TensorPropertyLine;
 export const QuaternionPropertyLine = (props) => {
@@ -49,7 +49,7 @@ export const QuaternionPropertyLine = (props) => {
         setQuat(quat);
         props.onChange(quat);
     };
-    return props.useDegrees ? (_jsx(Vector3PropertyLine, { ...restProps, nullable: false, ignoreNullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, min: min, max: max, onChange: onEulerChange })) : (_jsx(QuaternionPropertyLineInternal, { ...props, nullable: false, value: quat, min: min, max: max, onChange: onQuatChange }));
+    return useDegrees ? (_jsx(Vector3PropertyLine, { ...restProps, nullable: false, ignoreNullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, min: min, max: max, onChange: onEulerChange, unit: "deg" })) : (_jsx(QuaternionPropertyLineInternal, { ...props, unit: "rad", nullable: false, value: quat, min: min, max: max, onChange: onQuatChange }));
 };
 export const Vector2PropertyLine = TensorPropertyLine;
 export const Vector3PropertyLine = TensorPropertyLine;

package/fluent/hoc/propertyLines/vectorPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"vectorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/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 { PrimitiveProps } from \"../../primitives/primitive\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\n\r\nimport { SyncedSliderPropertyLine } from \"./syncedSliderPropertyLine\";\r\nimport type { Vector3 } from \"core/Maths/math.vector\";\r\nimport { Quaternion, Vector2, Vector4 } from \"core/Maths/math.vector\";\r\nimport { Tools } from \"core/Misc/tools\";\r\n\r\nexport type TensorPropertyLineProps<V extends Vector2 | Vector3 | Vector4 | Quaternion> = PropertyLineProps<V> &\r\n    PrimitiveProps<V> & {\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\nconst HasZ = (vector: Vector2 | Vector3 | Vector4 | Quaternion): vector is Vector3 => !(vector instanceof Vector2);\r\nconst HasW = (vector: Vector2 | Vector3 | Vector4 | Quaternion): vector is Vector4 => vector instanceof Vector4 || vector instanceof Quaternion;\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<Vector2 | 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                    <SyncedSliderPropertyLine label=\"X\" value={converted(vector.x)} min={min} max={max} onChange={(val) => onChange(val, \"x\")} />\r\n                    <SyncedSliderPropertyLine label=\"Y\" value={converted(vector.y)} min={min} max={max} onChange={(val) => onChange(val, \"y\")} />\r\n                    {HasZ(vector) && <SyncedSliderPropertyLine label=\"Z\" value={converted(vector.z)} min={min} max={max} onChange={(val) => onChange(val, \"z\")} />}\r\n                    {HasW(vector) && <SyncedSliderPropertyLine label=\"W\" value={converted(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)}${HasZ(props.value) ? ` | Z: ${formatted(props.value.z)}` : \"\"}${HasW(props.value) ? ` | 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\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\r\n    // Extract only the properties that exist on QuaternionPropertyLineProps\r\n    const { useDegrees, ...restProps } = props;\r\n\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\r\n    return props.useDegrees ? (\r\n        <Vector3PropertyLine\r\n            {...restProps}\r\n            nullable={false}\r\n            ignoreNullable={false}\r\n            value={quat.toEulerAngles()}\r\n            valueConverter={ToDegreesConverter}\r\n            min={min}\r\n            max={max}\r\n            onChange={onEulerChange}\r\n        />\r\n    ) : (\r\n        <QuaternionPropertyLineInternal {...props} nullable={false} value={quat} min={min} max={max} onChange={onQuatChange} />\r\n    );\r\n};\r\nexport const Vector2PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector2>>;\r\nexport const Vector3PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector3>>;\r\nexport const Vector4PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector4>>;\r\n"]}
+{"version":3,"file":"vectorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/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 { PrimitiveProps } from \"../../primitives/primitive\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\n\r\nimport { SyncedSliderPropertyLine } from \"./syncedSliderPropertyLine\";\r\nimport type { Vector3 } from \"core/Maths/math.vector\";\r\nimport { Quaternion, Vector2, Vector4 } from \"core/Maths/math.vector\";\r\nimport { Tools } from \"core/Misc/tools\";\r\n\r\nexport type TensorPropertyLineProps<V extends Vector2 | Vector3 | Vector4 | Quaternion> = PropertyLineProps<V> &\r\n    PrimitiveProps<V> & {\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         * Will be displayed in the input UI to indicate the unit of measurement\r\n         */\r\n        unit?: string;\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\nconst HasZ = (vector: Vector2 | Vector3 | Vector4 | Quaternion): vector is Vector3 => !(vector instanceof Vector2);\r\nconst HasW = (vector: Vector2 | Vector3 | Vector4 | Quaternion): vector is Vector4 => vector instanceof Vector4 || vector instanceof Quaternion;\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<Vector2 | 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                    <SyncedSliderPropertyLine label=\"X\" value={converted(vector.x)} min={min} max={max} onChange={(val) => onChange(val, \"x\")} unit={props.unit} />\r\n                    <SyncedSliderPropertyLine label=\"Y\" value={converted(vector.y)} min={min} max={max} onChange={(val) => onChange(val, \"y\")} unit={props.unit} />\r\n                    {HasZ(vector) && (\r\n                        <SyncedSliderPropertyLine label=\"Z\" value={converted(vector.z)} min={min} max={max} onChange={(val) => onChange(val, \"z\")} unit={props.unit} />\r\n                    )}\r\n                    {HasW(vector) && (\r\n                        <SyncedSliderPropertyLine label=\"W\" value={converted(vector.w)} min={min} max={max} onChange={(val) => onChange(val, \"w\")} unit={props.unit} />\r\n                    )}\r\n                </>\r\n            }\r\n        >\r\n            <Body1>{`X: ${formatted(props.value.x)} | Y: ${formatted(props.value.y)}${HasZ(props.value) ? ` | Z: ${formatted(props.value.z)}` : \"\"}${HasW(props.value) ? ` | 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} unit={props.useDegrees ? \"deg\" : \"rad\"} 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\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\r\n    // Extract only the properties that exist on QuaternionPropertyLineProps\r\n    const { useDegrees, ...restProps } = props;\r\n\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\r\n    return useDegrees ? (\r\n        <Vector3PropertyLine\r\n            {...restProps}\r\n            nullable={false}\r\n            ignoreNullable={false}\r\n            value={quat.toEulerAngles()}\r\n            valueConverter={ToDegreesConverter}\r\n            min={min}\r\n            max={max}\r\n            onChange={onEulerChange}\r\n            unit=\"deg\"\r\n        />\r\n    ) : (\r\n        <QuaternionPropertyLineInternal {...props} unit={\"rad\"} nullable={false} value={quat} min={min} max={max} onChange={onQuatChange} />\r\n    );\r\n};\r\nexport const Vector2PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector2>>;\r\nexport const Vector3PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector3>>;\r\nexport const Vector4PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector4>>;\r\n"]}

package/fluent/primitives/accordion.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement, useMemo } from "react";
-import { Accordion as FluentAccordion, AccordionItem, AccordionHeader, AccordionPanel, Subtitle1, makeStyles, tokens } from "@fluentui/react-components";
+import { Children, isValidElement, useCallback, useEffect, useMemo, useState } from "react";
+import { AccordionHeader, AccordionItem, AccordionPanel, Accordion as FluentAccordion, Subtitle1, makeStyles, tokens } from "@fluentui/react-components";
 const useStyles = makeStyles({
     accordion: {
         overflowX: "hidden",
@@ -39,7 +39,31 @@ export const Accordion = (props) => {
             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) => {
+    // Tracks open items, and used to tell the Accordion which sections should be expanded.
+    const [openItems, setOpenItems] = useState(validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title));
+    // Tracks closed items, which is needed so that when the children change, we only update the open/closed state
+    // (depending on the collapseByDefault prop) for items that have not been explicitly opened or closed.
+    const [closedItems, setClosedItems] = useState(validChildren.filter((child) => child.collapseByDefault).map((child) => child.title));
+    useEffect(() => {
+        for (const defaultOpenItem of validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title)) {
+            // If a child is not marked as collapseByDefault, then it should be opened by default, and
+            // it is only "default" if it hasn't already been explicitly added to the opened or closed list.
+            if (!closedItems.includes(defaultOpenItem) && !openItems.includes(defaultOpenItem)) {
+                setOpenItems((prev) => [...prev, defaultOpenItem]);
+            }
+        }
+    }, [validChildren]);
+    const onToggle = useCallback((event, data) => {
+        if (data.openItems.includes(data.value)) {
+            setOpenItems((prev) => [...prev, data.value]);
+            setClosedItems((prev) => prev.filter((item) => item !== data.value));
+        }
+        else {
+            setClosedItems((prev) => [...prev, data.value]);
+            setOpenItems((prev) => prev.filter((item) => item !== data.value));
+        }
+    }, []);
+    return (_jsx(FluentAccordion, { className: classes.accordion, collapsible: true, multiple: true, onToggle: onToggle, openItems: openItems, ...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));
         }) }));
 };

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,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;QAC/B,MAAM,EAAE,MAAM;KACjB;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        height: \"100%\",\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"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AccordionToggleData, AccordionToggleEvent } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\n\r\nimport { Children, isValidElement, useCallback, useEffect, useMemo, useState } from \"react\";\r\n\r\nimport { AccordionHeader, AccordionItem, AccordionPanel, Accordion as FluentAccordion, 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        height: \"100%\",\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    // Tracks open items, and used to tell the Accordion which sections should be expanded.\r\n    const [openItems, setOpenItems] = useState(validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title));\r\n\r\n    // Tracks closed items, which is needed so that when the children change, we only update the open/closed state\r\n    // (depending on the collapseByDefault prop) for items that have not been explicitly opened or closed.\r\n    const [closedItems, setClosedItems] = useState(validChildren.filter((child) => child.collapseByDefault).map((child) => child.title));\r\n\r\n    useEffect(() => {\r\n        for (const defaultOpenItem of validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title)) {\r\n            // If a child is not marked as collapseByDefault, then it should be opened by default, and\r\n            // it is only \"default\" if it hasn't already been explicitly added to the opened or closed list.\r\n            if (!closedItems.includes(defaultOpenItem) && !openItems.includes(defaultOpenItem)) {\r\n                setOpenItems((prev) => [...prev, defaultOpenItem]);\r\n            }\r\n        }\r\n    }, [validChildren]);\r\n\r\n    const onToggle = useCallback((event: AccordionToggleEvent, data: AccordionToggleData<string>) => {\r\n        if (data.openItems.includes(data.value)) {\r\n            setOpenItems((prev) => [...prev, data.value]);\r\n            setClosedItems((prev) => prev.filter((item) => item !== data.value));\r\n        } else {\r\n            setClosedItems((prev) => [...prev, data.value]);\r\n            setOpenItems((prev) => prev.filter((item) => item !== data.value));\r\n        }\r\n    }, []);\r\n\r\n    return (\r\n        <FluentAccordion className={classes.accordion} collapsible multiple onToggle={onToggle} openItems={openItems} {...rest}>\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/collapse.d.ts

@@ -1,6 +1,7 @@
 import type { FunctionComponent, PropsWithChildren } from "react";
 type CollapseProps = {
     visible: boolean;
+    orientation?: "horizontal" | "vertical";
 };
 /**
  * Wraps the passed in children with a fluent collapse component, handling smooth animation when visible prop changes

package/fluent/primitives/collapse.js

@@ -4,6 +4,7 @@ import { Collapse as FluentCollapse } from "@fluentui/react-motion-components-pr
 const useCollapseStyles = makeStyles({
     collapseContent: {
         overflow: "hidden",
+        display: "flex",
     },
 });
 /**
@@ -14,6 +15,6 @@ const useCollapseStyles = makeStyles({
  */
 export const Collapse = (props) => {
     const classes = useCollapseStyles();
-    return (_jsx(FluentCollapse, { visible: props.visible, children: _jsx("div", { className: classes.collapseContent, children: props.children }) }));
+    return (_jsx(FluentCollapse, { visible: props.visible, orientation: props.orientation, children: _jsx("div", { className: classes.collapseContent, children: props.children }) }));
 };
 //# sourceMappingURL=collapse.js.map

package/fluent/primitives/collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/collapse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAOvF,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,eAAe,EAAE;QACb,QAAQ,EAAE,QAAQ;KACrB;CACJ,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwD,CAAC,KAAK,EAAE,EAAE;IACnF,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,OAAO,CACH,KAAC,cAAc,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,YAClC,cAAK,SAAS,EAAE,OAAO,CAAC,eAAe,YAAG,KAAK,CAAC,QAAQ,GAAO,GAClD,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { makeStyles } from \"@fluentui/react-components\";\r\nimport { Collapse as FluentCollapse } from \"@fluentui/react-motion-components-preview\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\n\r\ntype CollapseProps = {\r\n    visible: boolean;\r\n};\r\n\r\nconst useCollapseStyles = makeStyles({\r\n    collapseContent: {\r\n        overflow: \"hidden\",\r\n    },\r\n});\r\n\r\n/**\r\n * Wraps the passed in children with a fluent collapse component, handling smooth animation when visible prop changes\r\n * NOTE: When passing in children, prefer react fragment over empty div to avoid bloating the react tree with an unnecessary div\r\n * @param props\r\n * @returns\r\n */\r\nexport const Collapse: FunctionComponent<PropsWithChildren<CollapseProps>> = (props) => {\r\n    const classes = useCollapseStyles();\r\n    return (\r\n        <FluentCollapse visible={props.visible}>\r\n            <div className={classes.collapseContent}>{props.children}</div>\r\n        </FluentCollapse>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/collapse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAQvF,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,eAAe,EAAE;QACb,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,MAAM;KAClB;CACJ,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwD,CAAC,KAAK,EAAE,EAAE;IACnF,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,OAAO,CACH,KAAC,cAAc,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,YAClE,cAAK,SAAS,EAAE,OAAO,CAAC,eAAe,YAAG,KAAK,CAAC,QAAQ,GAAO,GAClD,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { makeStyles } from \"@fluentui/react-components\";\r\nimport { Collapse as FluentCollapse } from \"@fluentui/react-motion-components-preview\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\n\r\ntype CollapseProps = {\r\n    visible: boolean;\r\n    orientation?: \"horizontal\" | \"vertical\";\r\n};\r\n\r\nconst useCollapseStyles = makeStyles({\r\n    collapseContent: {\r\n        overflow: \"hidden\",\r\n        display: \"flex\",\r\n    },\r\n});\r\n\r\n/**\r\n * Wraps the passed in children with a fluent collapse component, handling smooth animation when visible prop changes\r\n * NOTE: When passing in children, prefer react fragment over empty div to avoid bloating the react tree with an unnecessary div\r\n * @param props\r\n * @returns\r\n */\r\nexport const Collapse: FunctionComponent<PropsWithChildren<CollapseProps>> = (props) => {\r\n    const classes = useCollapseStyles();\r\n    return (\r\n        <FluentCollapse visible={props.visible} orientation={props.orientation}>\r\n            <div className={classes.collapseContent}>{props.children}</div>\r\n        </FluentCollapse>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/colorPicker.d.ts

@@ -5,9 +5,7 @@ export type ColorPickerProps<C extends Color3 | Color4> = {
     isLinearMode?: boolean;
 } & PrimitiveProps<C>;
 export declare const ColorPickerPopup: FunctionComponent<ColorPickerProps<Color3 | Color4>>;
-type HsvKey = "h" | "s" | "v";
 export type InputHexProps = PrimitiveProps<Color3 | Color4> & {
-    label?: string;
     linearHex?: boolean;
     isLinearMode?: boolean;
 };
@@ -20,11 +18,9 @@ export type InputHexProps = PrimitiveProps<Color3 | Color4> & {
  * @returns
  */
 export declare const InputHexField: FunctionComponent<InputHexProps>;
-type InputHsvFieldProps = {
-    color: Color3 | Color4;
-    label: string;
+type HsvKey = "h" | "s" | "v";
+type InputHsvFieldProps = PrimitiveProps<Color3 | Color4> & {
     hsvKey: HsvKey;
-    onChange: (color: Color3 | Color4) => void;
     max: number;
     scale?: number;
 };

package/fluent/primitives/colorPicker.js

@@ -2,8 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /* eslint-disable jsdoc/require-returns */
 /* eslint-disable @typescript-eslint/naming-convention */
 import { useState, useEffect, useCallback } from "react";
-import { Input, Label, SpinButton, useId, ColorPicker, ColorSlider, ColorArea, AlphaSlider, InfoLabel, Link, makeStyles, Popover, PopoverSurface, PopoverTrigger, tokens, Body1Strong, ColorSwatch, } from "@fluentui/react-components";
+import { ColorPicker as FluentColorPicker, ColorSlider, ColorArea, AlphaSlider, Link, makeStyles, Popover, PopoverSurface, PopoverTrigger, tokens, Body1Strong, ColorSwatch, } from "@fluentui/react-components";
 import { Color3, Color4 } from "@onerjs/core/Maths/math.color.js";
+import { SpinButton } from "./spinButton.js";
+import { TextInput } from "./textInput.js";
 const useColorPickerStyles = makeStyles({
     colorPickerContainer: {
         width: "325px",
@@ -36,7 +38,7 @@ const useColorPickerStyles = makeStyles({
         width: "80px",
     },
     spinButton: {
-        minWidth: "60px",
+        width: "50px",
     },
     container: {
         display: "flex",
@@ -66,8 +68,9 @@ export const ColorPickerPopup = (props) => {
             align: "start",
             overflowBoundary: document.body,
             autoSize: true,
-        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsx(ColorSwatch, { borderColor: tokens.colorNeutralShadowKeyDarker, size: "small", color: color.toHexString(), value: color.toHexString().slice(1) }) }), _jsx(PopoverSurface, { children: _jsxs("div", { className: classes.colorPickerContainer, children: [_jsxs(ColorPicker, { color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [_jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), _jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && _jsx(AlphaSlider, { "aria-label": "Alpha" })] }), _jsxs("div", { className: classes.container, children: [_jsxs("div", { className: classes.row, children: [_jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), _jsx(InputHexField, { label: "Gamma Hex", value: color, isLinearMode: props.isLinearMode, onChange: handleChange }), _jsx(InputHexField, { label: "Linear Hex", linearHex: true, isLinearMode: props.isLinearMode, value: color, onChange: handleChange })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputRgbField, { label: "Red", color: color, rgbKey: "r", onChange: handleChange }), _jsx(InputRgbField, { label: "Green", color: color, rgbKey: "g", onChange: handleChange }), _jsx(InputRgbField, { label: "Blue", color: color, rgbKey: "b", onChange: handleChange }), _jsx(InputAlphaField, { color: color, onChange: handleChange })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputHsvField, { label: "Hue", color: color, hsvKey: "h", max: 360, onChange: handleChange }), _jsx(InputHsvField, { label: "Saturation", color: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), _jsx(InputHsvField, { label: "Value", color: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] })] })] }) })] }));
+        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsx(ColorSwatch, { borderColor: tokens.colorNeutralShadowKeyDarker, size: "small", color: color.toHexString(), value: color.toHexString().slice(1) }) }), _jsx(PopoverSurface, { children: _jsxs("div", { className: classes.colorPickerContainer, children: [_jsxs(FluentColorPicker, { color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [_jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), _jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && _jsx(AlphaSlider, { "aria-label": "Alpha" })] }), _jsxs("div", { className: classes.container, children: [_jsxs("div", { className: classes.row, children: [_jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), _jsx(InputHexField, { title: "Gamma Hex", value: color, isLinearMode: props.isLinearMode, onChange: handleChange }), _jsx(InputHexField, { title: "Linear Hex", linearHex: true, isLinearMode: props.isLinearMode, value: color, onChange: handleChange })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputRgbField, { title: "Red", value: color, rgbKey: "r", onChange: handleChange }), _jsx(InputRgbField, { title: "Green", value: color, rgbKey: "g", onChange: handleChange }), _jsx(InputRgbField, { title: "Blue", value: color, rgbKey: "b", onChange: handleChange }), _jsx(InputAlphaField, { color: color, onChange: handleChange })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputHsvField, { title: "Hue", value: color, hsvKey: "h", max: 360, onChange: handleChange }), _jsx(InputHsvField, { title: "Saturation", value: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), _jsx(InputHsvField, { title: "Value", value: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] })] })] }) })] }));
 };
+const HEX_REGEX = RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/);
 /**
  * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space
  * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange
@@ -77,34 +80,34 @@ export const ColorPickerPopup = (props) => {
  * @returns
  */
 export const InputHexField = (props) => {
-    const id = useId("hex-input");
     const styles = useColorPickerStyles();
-    const { label, value, onChange, linearHex, isLinearMode } = props;
-    const handleChange = (e, _) => {
-        // If linearHint (aka PBR material, ensure the other values are displayed in gamma even if linear hex changes)
-        const value = e.target.value;
-        if (value != "" && /^[0-9A-Fa-f]+$/g.test(value) == false) {
-            return;
-        }
-        onChange(Color3.FromHexString(value).toGammaSpace());
-    };
-    return (_jsxs("div", { className: styles.colorFieldWrapper, children: [props.linearHex ? (_jsx(InfoLabel, { htmlFor: id, info: !isLinearMode ? (_jsx(_Fragment, { children: " This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view " })) : (_jsxs(_Fragment, { children: ["This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma space so that the color chosen here will match the color seen in your entity.", _jsx("br", {}), "If you want to copy/paste the HEX into your code, you can either use", _jsx(Body1Strong, { children: "Color3.FromHexString(LINEAR_HEX)" }), _jsx("br", {}), "or", _jsx("br", {}), _jsx(Body1Strong, { children: "Color3.FromHexString(GAMMA_HEX).toLinearSpace()" }), _jsx("br", {}), _jsx("br", {}), _jsx(Link, { href: "https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/", children: " Read more in our docs! " })] })), children: label })) : (_jsx(Label, { htmlFor: id, children: label })), _jsx(Input, { disabled: linearHex ? !isLinearMode : false, className: styles.input, value: linearHex ? value.toLinearSpace().toHexString() : value.toHexString(), id: id, onChange: handleChange })] }));
+    const { title, value, onChange, linearHex, isLinearMode } = props;
+    return (_jsx("div", { className: styles.colorFieldWrapper, children: _jsx(TextInput, { disabled: linearHex ? !isLinearMode : false, className: styles.input, value: linearHex ? value.toLinearSpace().toHexString() : value.toHexString(), validator: (val) => val != "" && HEX_REGEX.test(val), onChange: (val) => (linearHex ? onChange(Color3.FromHexString(val).toGammaSpace()) : onChange(Color3.FromHexString(val))), infoLabel: title
+                ? {
+                    label: title,
+                    // If not representing a linearHex, no info is needed.
+                    info: !props.linearHex ? undefined : !isLinearMode ? ( // If representing a linear hex but we are in gammaMode, simple message explaining why linearHex is disabled
+                    _jsx(_Fragment, { children: " This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view " })) : (
+                    // If representing a linear hex and we are in linearMode, give information about how to use these hex values
+                    _jsxs(_Fragment, { children: ["This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma space so that the color chosen here will match the color seen in your entity.", _jsx("br", {}), "If you want to copy/paste the HEX into your code, you can either use", _jsx(Body1Strong, { children: "Color3.FromHexString(LINEAR_HEX)" }), _jsx("br", {}), "or", _jsx("br", {}), _jsx(Body1Strong, { children: "Color3.FromHexString(GAMMA_HEX).toLinearSpace()" }), _jsx("br", {}), _jsx("br", {}), _jsx(Link, { href: "https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/", children: " Read more in our docs! " })] })),
+                }
+                : undefined }) }));
 };
 const InputRgbField = (props) => {
-    const { color, onChange, label, rgbKey } = props;
-    const id = useId(`${label.toLowerCase()}-input`);
+    const { value, onChange, title, rgbKey } = props;
     const classes = useColorPickerStyles();
-    const handleChange = useCallback((_, data) => {
-        const val = data.value ?? parseFloat(data.displayValue ?? "");
-        if (val === null || Number.isNaN(val) || !NUMBER_REGEX.test(val.toString())) {
-            return;
-        }
-        const newColor = color.clone();
+    const handleChange = useCallback((val) => {
+        const newColor = value.clone();
         newColor[rgbKey] = val / 255.0; // Convert to 0-1 range
         onChange(newColor);
-    }, [color]);
-    return (_jsxs("div", { className: classes.colorFieldWrapper, children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(SpinButton, { className: classes.spinButton, min: 0, max: 255, value: color[rgbKey] * 255.0, step: 1, id: id, onChange: handleChange, name: rgbKey })] }));
+    }, [value, onChange, rgbKey]);
+    return (_jsx("div", { className: classes.colorFieldWrapper, children: _jsx(SpinButton, { title: title, infoLabel: title ? { label: title } : undefined, className: classes.spinButton, min: 0, max: 255, value: Math.round(value[rgbKey] * 255), forceInt: true, onChange: handleChange }) }));
 };
+function rgbaToHsv(color) {
+    const c = new Color3(color.r, color.g, color.b);
+    const hsv = c.toHSV();
+    return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };
+}
 /**
  * In the HSV (Hue, Saturation, Value) color model, Hue (H) ranges from 0 to 360 degrees, representing the color's position on the color wheel.
  * Saturation (S) ranges from 0 to 100%, indicating the intensity or purity of the color, with 0 being shades of gray and 100 being a fully saturated color.
@@ -112,24 +115,19 @@ const InputRgbField = (props) => {
  * @param props - The properties for the InputHsvField component.
  */
 export const InputHsvField = (props) => {
-    const { color, label, hsvKey, max, scale = 1 } = props;
-    const id = useId(`${label.toLowerCase()}-input`);
+    const { value, title, hsvKey, max, onChange, scale = 1 } = props;
     const classes = useColorPickerStyles();
-    const handleChange = useCallback((_, data) => {
-        const val = data.value ?? parseFloat(data.displayValue ?? "");
-        if (val === null || Number.isNaN(val) || !NUMBER_REGEX.test(val.toString())) {
-            return;
-        }
+    const handleChange = useCallback((val) => {
         // Convert current color to HSV, update the new hsv value, then call onChange prop
-        const hsv = rgbaToHsv(color);
+        const hsv = rgbaToHsv(value);
         hsv[hsvKey] = val / scale;
         let newColor = Color3.FromHSV(hsv.h, hsv.s, hsv.v);
-        if (color instanceof Color4) {
-            newColor = Color4.FromColor3(newColor, color.a ?? 1);
+        if (value instanceof Color4) {
+            newColor = Color4.FromColor3(newColor, value.a ?? 1);
         }
         props.onChange(newColor);
-    }, [color]);
-    return (_jsxs("div", { className: classes.colorFieldWrapper, children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(SpinButton, { className: classes.spinButton, min: 0, max: max, value: rgbaToHsv(color)[hsvKey] * scale, step: 1, id: id, onChange: handleChange, name: hsvKey })] }));
+    }, [value, onChange, hsvKey, scale]);
+    return (_jsx("div", { className: classes.colorFieldWrapper, children: _jsx(SpinButton, { infoLabel: title ? { label: title } : undefined, title: title, className: classes.spinButton, min: 0, max: max, value: Math.round(rgbaToHsv(value)[hsvKey] * scale), forceInt: true, onChange: handleChange }) }));
 };
 /**
  * Displays the alpha value of a color, either in the disabled state (if color is Color3) or as a spin button (if color is Color4).
@@ -138,10 +136,8 @@ export const InputHsvField = (props) => {
  */
 const InputAlphaField = (props) => {
     const classes = useColorPickerStyles();
-    const id = useId("alpha-input");
-    const { color } = props;
-    const onChange = (_, data) => {
-        const value = data.value ?? parseFloat(data.displayValue ?? "");
+    const { color, onChange } = props;
+    const handleChange = useCallback((value) => {
         if (Number.isNaN(value) || value < 0 || value > 1) {
             return;
         }
@@ -153,13 +149,10 @@ const InputAlphaField = (props) => {
         else {
             return Color4.FromColor3(color, value);
         }
-    };
-    return (_jsxs("div", { className: classes.colorFieldWrapper, children: [_jsxs("div", { className: classes.row, children: [_jsx(Label, { htmlFor: id, children: "Alpha" }), color instanceof Color3 && (_jsx(InfoLabel, { htmlFor: id, info: _jsx(_Fragment, { children: "Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the material's alpha property directly, either in code via material.alpha OR via inspector's transparency section." }) }))] }), _jsx(SpinButton, { disabled: color instanceof Color3, min: 0, max: 1, className: classes.spinButton, value: color instanceof Color3 ? 1 : color.a, step: 0.01, onChange: onChange, id: id })] }));
+    }, [onChange]);
+    return (_jsx("div", { className: classes.colorFieldWrapper, children: _jsx(SpinButton, { disabled: color instanceof Color3, min: 0, max: 1, className: classes.spinButton, value: color instanceof Color3 ? 1 : color.a, step: 0.01, onChange: handleChange, infoLabel: {
+                label: "Alpha",
+                info: color instanceof Color3 ? (_jsx(_Fragment, { children: "Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the entity's alpha property directly, either in code via entity.alpha OR via inspector's transparency section." })) : undefined,
+            } }) }));
 };
-const NUMBER_REGEX = /^\d+$/;
-function rgbaToHsv(color) {
-    const c = new Color3(color.r, color.g, color.b);
-    const hsv = c.toHSV();
-    return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };
-}
 //# sourceMappingURL=colorPicker.js.map