npm - @onerjs/shared-ui-components - Versions diffs - 8.43.1 → 8.43.3 - Mend

@onerjs/shared-ui-components 8.43.1 → 8.43.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/fluent/primitives/colorPicker.d.ts +1 -1
package/fluent/primitives/colorPicker.js +11 -6
package/fluent/primitives/colorPicker.js.map +1 -1
package/fluent/primitives/textInput.js +4 -2
package/fluent/primitives/textInput.js.map +1 -1
package/package.json +1 -1

package/fluent/primitives/colorPicker.d.ts CHANGED Viewed

@@ -14,7 +14,7 @@ export declare const ColorPickerPopup: import("react").ForwardRefExoticComponent
 } & import("react").RefAttributes<HTMLButtonElement>>;
 export type InputHexProps = PrimitiveProps<Color3 | Color4> & {
     isLinear?: boolean;
-    ispropertyLinear?: boolean;
+    isPropertyLinear?: boolean;
 };
 /**
  * Component which displays the passed in color's HEX value in the currently selected color space.

package/fluent/primitives/colorPicker.js CHANGED Viewed

@@ -77,7 +77,12 @@ export const ColorPickerPopup = forwardRef((props, ref) => {
     /** Color in gamma space — used for visual elements (picker, preview, trigger) */
     const gammaColor = useMemo(() => (isPropertyLinear ? color.toGammaSpace() : color), [color, isPropertyLinear]);
     /** Color in the user-selected display space — used for numeric inputs (RGB, HSV, Hex) */
-    const displayColor = useMemo(() => (isLinear === isPropertyLinear ? color : isLinear ? color.toLinearSpace() : color.toGammaSpace()), [color, isLinear, isPropertyLinear]);
+    const displayColor = useMemo(() => {
+        if (isLinear === isPropertyLinear) {
+            return color;
+        }
+        return isLinear ? color.toLinearSpace() : color.toGammaSpace();
+    }, [color, isLinear, isPropertyLinear]);
     const handleColorPickerChange = (_, data) => {
         // The visual picker always operates in gamma space, convert back to property space
         let gammaResult = Color3.FromHSV(data.color.h, data.color.s, data.color.v);
@@ -106,7 +111,7 @@ export const ColorPickerPopup = forwardRef((props, ref) => {
                             }, options: [
                                 { label: "Int", value: 0 },
                                 { label: "Float", value: 1 },
-                            ], value: isFloat ? 1 : 0, onChange: (val) => setFloat(val === 1) })] }), _jsxs("div", { className: classes.inputRow, children: [_jsx(InputRgbField, { title: "Red", value: displayColor, rgbKey: "r", isFloat: isFloat, onChange: handleDisplayChange }), _jsx(InputRgbField, { title: "Green", value: displayColor, rgbKey: "g", isFloat: isFloat, onChange: handleDisplayChange }), _jsx(InputRgbField, { title: "Blue", value: displayColor, rgbKey: "b", isFloat: isFloat, onChange: handleDisplayChange }), _jsx(InputAlphaField, { color: color, onChange: handleChange })] }), _jsxs("div", { className: classes.inputRow, children: [_jsx(InputHsvField, { title: "Hue", value: displayColor, hsvKey: "h", isFloat: isFloat, onChange: handleDisplayChange }), _jsx(InputHsvField, { title: "Saturation", value: displayColor, hsvKey: "s", isFloat: isFloat, onChange: handleDisplayChange }), _jsx(InputHsvField, { title: "Value", value: displayColor, hsvKey: "v", isFloat: isFloat, onChange: handleDisplayChange })] }), _jsx("div", { className: classes.inputRow, children: _jsx(InputHexField, { title: "Hexadecimal", value: displayColor, isLinear: isLinear, ispropertyLinear: isPropertyLinear, onChange: handleDisplayChange }) })] }) }));
+                            ], value: isFloat ? 1 : 0, onChange: (val) => setFloat(val === 1) })] }), _jsxs("div", { className: classes.inputRow, children: [_jsx(InputRgbField, { title: "Red", value: displayColor, rgbKey: "r", isFloat: isFloat, onChange: handleDisplayChange }), _jsx(InputRgbField, { title: "Green", value: displayColor, rgbKey: "g", isFloat: isFloat, onChange: handleDisplayChange }), _jsx(InputRgbField, { title: "Blue", value: displayColor, rgbKey: "b", isFloat: isFloat, onChange: handleDisplayChange }), _jsx(InputAlphaField, { color: color, onChange: handleChange })] }), _jsxs("div", { className: classes.inputRow, children: [_jsx(InputHsvField, { title: "Hue", value: displayColor, hsvKey: "h", isFloat: isFloat, onChange: handleDisplayChange }), _jsx(InputHsvField, { title: "Saturation", value: displayColor, hsvKey: "s", isFloat: isFloat, onChange: handleDisplayChange }), _jsx(InputHsvField, { title: "Value", value: displayColor, hsvKey: "v", isFloat: isFloat, onChange: handleDisplayChange })] }), _jsx("div", { className: classes.inputRow, children: _jsx(InputHexField, { title: "Hexadecimal", value: displayColor, isLinear: isLinear, isPropertyLinear: isPropertyLinear, onChange: handleDisplayChange }) })] }) }));
 });
 /**
  * Converts a hex string to the same Color type as the original.
@@ -143,16 +148,16 @@ function colorFromHex(hex, original) {
  */
 export const InputHexField = (props) => {
     const classes = useColorPickerStyles();
-    const { title, value, onChange, isLinear, ispropertyLinear } = props;
-    const displayMismatchesproperty = (isLinear ?? false) !== (ispropertyLinear ?? false);
+    const { title, value, onChange, isLinear, isPropertyLinear } = props;
+    const displayMismatchesProperty = (isLinear ?? false) !== (isPropertyLinear ?? false);
     const displaySpace = isLinear ? "linear" : "gamma";
-    const propertySpace = ispropertyLinear ? "linear" : "gamma";
+    const propertySpace = isPropertyLinear ? "linear" : "gamma";
     const isColor4 = value instanceof Color4;
     const colorClass = isColor4 ? "Color4" : "Color3";
     return (_jsx(TextInput, { className: classes.inputField, value: value.toHexString(), validator: ValidateColorHex, validateOnlyOnBlur: true, onChange: (val) => onChange(colorFromHex(val, value)), infoLabel: title
             ? {
                 label: title,
-                info: (_jsxs(Body1, { children: ["This hex value is in ", _jsx(Body1Strong, { children: displaySpace }), " space", displayMismatchesproperty ? (_jsxs(Body1, { children: [", but the property stores its color in ", _jsx(Body1Strong, { children: propertySpace }), " space.", _jsx("br", {}), _jsx("br", {}), "The color picker converts automatically, but if you copy this hex into code you will need to convert it:", _jsx("br", {}), _jsxs(Body1Strong, { children: [colorClass, ".FromHexString(\"", value.toHexString(), "\").", isLinear ? "toGammaSpace()" : "toLinearSpace()"] })] })) : (_jsxs(Body1, { children: [", which matches the property's stored color space.", _jsx("br", {}), _jsx("br", {}), "To copy this hex into code, use", _jsx("br", {}), _jsxs(Body1Strong, { children: [colorClass, ".FromHexString(\"", value.toHexString(), "\")"] })] })), _jsx("br", {}), _jsx("br", {}), _jsx(Link, { url: "https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/", value: "Read more in our docs!" })] })),
+                info: (_jsxs(Body1, { children: ["This hex value is in ", _jsx(Body1Strong, { children: displaySpace }), " space", displayMismatchesProperty ? (_jsxs(Body1, { children: [", but the property stores its color in ", _jsx(Body1Strong, { children: propertySpace }), " space.", _jsx("br", {}), _jsx("br", {}), "The color picker converts automatically, but if you copy this hex into code you will need to convert it:", _jsx("br", {}), _jsxs(Body1Strong, { children: [colorClass, ".FromHexString(\"", value.toHexString(), "\").", isLinear ? "toGammaSpace()" : "toLinearSpace()"] })] })) : (_jsxs(Body1, { children: [", which matches the property's stored color space.", _jsx("br", {}), _jsx("br", {}), "To copy this hex into code, use", _jsx("br", {}), _jsxs(Body1Strong, { children: [colorClass, ".FromHexString(\"", value.toHexString(), "\")"] })] })), _jsx("br", {}), _jsx("br", {}), _jsx(Link, { url: "https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/", value: "Read more in our docs!" })] })),
             }
             : undefined }));
 };

package/fluent/primitives/colorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/colorPicker.tsx"],"names":[],"mappings":";AAAA,0CAA0C;AAC1C,yDAAyD;AACzD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE1F,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAExK,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,yCAA8B;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,oBAAoB,GAAG,UAAU,CAAC;IACpC,SAAS,EAAE;QACP,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,MAAM,EAAE,oBAAoB;QACrC,aAAa,EAAE,QAAQ,EAAE,4BAA4B;QACrD,UAAU,EAAE,QAAQ,EAAE,gCAAgC;QACtD,cAAc,EAAE,QAAQ,EAAE,iDAAiD;QAC3E,GAAG,EAAE,MAAM,CAAC,gBAAgB;QAC5B,QAAQ,EAAE,SAAS;KACtB;IACD,GAAG,EAAE;QACD,IAAI,EAAE,CAAC,EAAE,0CAA0C;QACnD,OAAO,EAAE,MAAM,EAAE,0BAA0B;QAC3C,aAAa,EAAE,KAAK,EAAE,yBAAyB;QAC/C,GAAG,EAAE,MAAM,CAAC,mBAAmB;QAC/B,UAAU,EAAE,QAAQ,EAAE,yBAAyB;QAC/C,KAAK,EAAE,MAAM;KAChB;IACD,WAAW,EAAE;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO;KAClB;IACD,YAAY,EAAE;QACV,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM,CAAC,kBAAkB,EAAE,OAAO;QAChD,MAAM,EAAE,GAAG,MAAM,CAAC,kBAAkB,UAAU,MAAM,CAAC,4BAA4B,EAAE;QACnF,gCAAgC,EAAE;YAC9B,iBAAiB,EAAE,MAAM,EAAE,0DAA0D;SACxF;KACJ;IACD,QAAQ,EAAE;QACN,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,IAAI,EAAE,CAAC,EAAE,gCAAgC;QACzC,cAAc,EAAE,QAAQ;QACxB,GAAG,EAAE,MAAM;QACX,KAAK,EAAE,MAAM;KAChB;IACD,UAAU,EAAE;QACR,IAAI,EAAE,CAAC,EAAE,gCAAgC;QACzC,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,CAAC;QACX,GAAG,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM;KAC5C;IACD,OAAO,EAAE;QACL,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACvB;CACJ,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAAuD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC5G,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;IAClD,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACzD,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,KAAK,CAAC,CAAC;IAChE,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,6DAA6D;IAClF,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,gBAAgB,GAAG,YAAY,IAAI,KAAK,CAAC;IAE/C,iFAAiF;IACjF,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE/G,yFAAyF;IACzF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,QAAQ,KAAK,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE3K,MAAM,uBAAuB,GAA4C,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;QACjF,mFAAmF;QACnF,IAAI,WAAW,GAAoB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC5F,IAAI,KAAK,YAAY,MAAM,EAAE,CAAC;YAC1B,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QACpE,CAAC;QACD,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC/E,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,QAAyB,EAAE,EAAE;QAC/C,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,4EAA4E;IACpG,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,eAAgC,EAAE,EAAE;QAC7D,MAAM,aAAa,GAAG,QAAQ,KAAK,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QACpJ,YAAY,CAAC,aAAa,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,OAAO,IACJ,OAAO,EACH,KAAC,WAAW,IACR,SAAS,EAAE,OAAO,CAAC,OAAO,EAC1B,GAAG,EAAE,GAAG,KACJ,IAAI,EACR,WAAW,EAAE,MAAM,CAAC,2BAA2B,EAC/C,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,EAChD,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,EAC/B,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,GAC1C,YAGN,eAAK,SAAS,EAAE,OAAO,CAAC,SAAS,aAC7B,MAAC,iBAAiB,IAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,UAAU,CAAC,EAAE,aAAa,EAAE,uBAAuB,aACnH,KAAC,SAAS,IAAC,MAAM,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,MAAM,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,GAAI,EAC7F,KAAC,WAAW,kBAAY,KAAK,GAAG,EAC/B,KAAK,YAAY,MAAM,IAAI,KAAC,WAAW,kBAAY,OAAO,GAAG,IAC9C,EAEpB,eAAK,SAAS,EAAE,OAAO,CAAC,GAAG,aACvB,cAAK,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,UAAU,CAAC,WAAW,EAAE,EAAE,GAAI,EAC9F,KAAC,cAAc,IACX,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,SAAS,EAAE;gCACP,KAAK,EAAE,aAAa;gCACpB,IAAI,EAAE,CACF,MAAC,KAAK,2GACuF,GAAG,EAC5F,KAAC,WAAW,cAAE,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,GAAe,8EAC9D,CACX;6BACJ,EACD,OAAO,EAAE;gCACL,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE;gCAC5B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE;6BAChC,EACD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACvB,QAAQ,EAAE,CAAC,GAAW,EAAE,EAAE,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,CAAC,GACnD,EACF,KAAC,cAAc,IACX,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,SAAS,EAAE;gCACP,KAAK,EAAE,WAAW;gCAClB,IAAI,EAAE,CACF,MAAC,KAAK,eACF,KAAC,WAAW,sBAAkB,kEAAuD,KAAC,WAAW,wBAAoB,oHAEjH,CACX;6BACJ,EACD,OAAO,EAAE;gCACL,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE;gCAC1B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE;6BAC/B,EACD,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACtB,QAAQ,EAAE,CAAC,GAAW,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,CAAC,GAChD,IACA,EAGN,eAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,aAC5B,KAAC,aAAa,IAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAC,GAAG,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,GAAI,EAC9G,KAAC,aAAa,IAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAC,GAAG,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,GAAI,EAChH,KAAC,aAAa,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAC,GAAG,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,GAAI,EAC/G,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,GAAI,IACvD,EAGN,eAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,aAC5B,KAAC,aAAa,IAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAC,GAAG,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,GAAI,EAC9G,KAAC,aAAa,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAC,GAAG,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,GAAI,EACrH,KAAC,aAAa,IAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAC,GAAG,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,GAAI,IAC9G,EAEN,cAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,YAC5B,KAAC,aAAa,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,QAAQ,EAAE,mBAAmB,GAAI,GAC/I,IACJ,GACA,CACb,CAAC;AACN,CAAC,CAAC,CAAC;AAOH;;;;;;;GAOG;AACH,SAAS,YAAY,CAAC,GAAW,EAAE,QAAyB;IACxD,MAAM,MAAM,GAAG,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAExD,sCAAsC;IACtC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACtB,GAAG,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACtF,CAAC;IAED,iFAAiF;IACjF,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACtB,IAAI,QAAQ,YAAY,MAAM,EAAE,CAAC;YAC7B,OAAO,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC;IAED,+CAA+C;IAC/C,IAAI,QAAQ,YAAY,MAAM,EAAE,CAAC;QAC7B,OAAO,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpE,CAAC;IACD,OAAO,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AACrC,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAqC,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAErE,MAAM,yBAAyB,GAAG,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,CAAC;IACtF,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;IACnD,MAAM,aAAa,GAAG,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5D,MAAM,QAAQ,GAAG,KAAK,YAAY,MAAM,CAAC;IACzC,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;IAElD,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,EAC1B,SAAS,EAAE,gBAAgB,EAC3B,kBAAkB,QAClB,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,EACrD,SAAS,EACL,KAAK;YACD,CAAC,CAAC;gBACI,KAAK,EAAE,KAAK;gBACZ,IAAI,EAAE,CACF,MAAC,KAAK,wCACmB,KAAC,WAAW,cAAE,YAAY,GAAe,YAC7D,yBAAyB,CAAC,CAAC,CAAC,CACzB,MAAC,KAAK,0DACqC,KAAC,WAAW,cAAE,aAAa,GAAe,aACjF,cAAM,EACN,cAAM,8GAEN,cAAM,EACN,MAAC,WAAW,eACP,UAAU,uBAAkB,KAAK,CAAC,WAAW,EAAE,UAAK,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,IAC1F,IACV,CACX,CAAC,CAAC,CAAC,CACA,MAAC,KAAK,qEAEF,cAAM,EACN,cAAM,qCAEN,cAAM,EACN,MAAC,WAAW,eACP,UAAU,uBAAkB,KAAK,CAAC,WAAW,EAAE,WACtC,IACV,CACX,EACD,cAAM,EACN,cAAM,EACN,KAAC,IAAI,IAAC,GAAG,EAAC,yEAAyE,EAAC,KAAK,EAAC,wBAAwB,GAAG,IACjH,CACX;aACJ;YACH,CAAC,CAAC,SAAS,GAErB,CACL,CAAC;AACN,CAAC,CAAC;AAQF,MAAM,aAAa,GAA0C,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IAEvC,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,GAAW,EAAE,EAAE;QACZ,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;QAC/B,QAAQ,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,KAAK,CAAC;QAC/C,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CACrC,CAAC;IAEF,OAAO,CACH,KAAC,UAAU,IAEP,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EAC/C,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EACtB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,EAChE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EACxB,QAAQ,EAAE,CAAC,OAAO,EAClB,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAClC,QAAQ,EAAE,YAAY,IATjB,GAAG,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,CAU/C,CACL,CAAC;AACN,CAAC,CAAC;AAEF,SAAS,SAAS,CAAC,KAAsD;IACrE,MAAM,CAAC,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAChD,MAAM,GAAG,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;IACtB,OAAO,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC;AACxD,CAAC;AAQD,yDAAyD;AACzD,sDAAsD;AACtD,oDAAoD;AACpD,SAAS,mBAAmB,CAAC,MAAc,EAAE,OAAgB;IACzD,IAAI,OAAO,EAAE,CAAC;QACV,gCAAgC;QAChC,MAAM,WAAW,GAAG,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7C,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,WAAW,EAAE,UAAU,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC;IACxJ,CAAC;IACD,WAAW;IACX,MAAM,KAAK,GAAG,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IACvC,MAAM,GAAG,GAAG,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IACvC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AACzJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAA0C,CAAC,KAAK,EAAE,EAAE;IAC1E,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,mBAAmB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEvG,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,GAAW,EAAE,EAAE;QACZ,MAAM,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAC7B,GAAG,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QAC9B,IAAI,QAAQ,GAAoB,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;QACpE,IAAI,KAAK,YAAY,MAAM,EAAE,CAAC;YAC1B,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QACzD,CAAC;QACD,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,CAAC,CACxC,CAAC;IAEF,OAAO,CACH,KAAC,UAAU,IAEP,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EAC/C,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAC1C,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,YAAY,IATjB,GAAG,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,CAU/C,CACL,CAAC;AACN,CAAC,CAAC;AAOF;;;;GAIG;AACH,MAAM,eAAe,GAAuC,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAElC,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,KAAa,EAAE,EAAE;QACd,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YAChD,OAAO;QACX,CAAC;QAED,IAAI,KAAK,YAAY,MAAM,EAAE,CAAC;YAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;YAC/B,QAAQ,CAAC,CAAC,GAAG,KAAK,CAAC;YACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACvB,CAAC;aAAM,CAAC;YACJ,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;QAC9C,CAAC;IACL,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,CAAC,CACpB,CAAC;IAEF,OAAO,CACH,KAAC,UAAU,IACP,QAAQ,EAAE,KAAK,YAAY,MAAM,EACjC,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,KAAK,EAAE,KAAK,YAAY,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAC5C,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE;YACP,KAAK,EAAE,OAAO;YACd,IAAI,EACA,KAAK,YAAY,MAAM,CAAC,CAAC,CAAC,CACtB,KAAC,KAAK,wQAGE,CACX,CAAC,CAAC,CAAC,SAAS;SACpB,GACH,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["/* eslint-disable jsdoc/require-returns /\r\n/ eslint-disable @typescript-eslint/naming-convention /\r\nimport { forwardRef, useState, useEffect, useCallback, useContext, useMemo } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { ColorPicker as FluentColorPicker, ColorSlider, ColorArea, AlphaSlider, makeStyles, tokens, Body1Strong, ColorSwatch, Body1 } from \"@fluentui/react-components\";\r\nimport type { ColorPickerProps as FluentColorPickerProps } from \"@fluentui/react-components\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { SpinButton } from \"./spinButton\";\r\nimport { TextInput } from \"./textInput\";\r\nimport { NumberDropdown } from \"./dropdown\";\r\nimport { ValidateColorHex } from \"./utils\";\r\nimport { Link } from \"./link\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { Popover } from \"./popover\";\r\n\r\nconst useColorPickerStyles = makeStyles({\r\n container: {\r\n width: \"350px\",\r\n display: \"flex\", // becomes a flexbox\r\n flexDirection: \"column\", // with children in a column\r\n alignItems: \"center\", // centers children horizontally\r\n justifyContent: \"center\", // centers children vertically (if height is set)\r\n gap: tokens.spacingVerticalM,\r\n overflow: \"visible\",\r\n },\r\n row: {\r\n flex: 1, // is a row in the container's flex column\r\n display: \"flex\", // becomes its own flexbox\r\n flexDirection: \"row\", // with children in a row\r\n gap: tokens.spacingHorizontalXL,\r\n alignItems: \"center\", // align items vertically\r\n width: \"100%\",\r\n },\r\n colorPicker: {\r\n flex: 1,\r\n width: \"350px\",\r\n height: \"350px\",\r\n },\r\n previewColor: {\r\n width: \"60px\",\r\n height: \"60px\",\r\n borderRadius: tokens.borderRadiusMedium, // 4px?\r\n border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,\r\n \"@media (forced-colors: active)\": {\r\n forcedColorAdjust: \"none\", // ensures elmement maintains color in high constrast mode\r\n },\r\n },\r\n inputRow: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n flex: 1, // grow and fill available space\r\n justifyContent: \"center\",\r\n gap: \"10px\",\r\n width: \"100%\",\r\n },\r\n inputField: {\r\n flex: 1, // grow and fill available space\r\n width: \"auto\",\r\n minWidth: 0,\r\n gap: tokens.spacingVerticalSNudge, // 6px\r\n },\r\n trigger: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n },\r\n});\r\n\r\nexport type ColorPickerProps<C extends Color3 \| Color4> = {\r\n isLinearMode?: boolean;\r\n} & PrimitiveProps<C>;\r\n\r\nexport const ColorPickerPopup = forwardRef<HTMLButtonElement, ColorPickerProps<Color3 \| Color4>>((props, ref) => {\r\n ColorPickerPopup.displayName = \"ColorPickerPopup\";\r\n const { value, onChange, isLinearMode, ...rest } = props;\r\n const classes = useColorPickerStyles();\r\n const [color, setColor] = useState(value);\r\n const [isLinear, setIsLinear] = useState(isLinearMode ?? false);\r\n const [isFloat, setFloat] = useState(false);\r\n const { size } = useContext(ToolContext);\r\n useEffect(() => {\r\n setColor(value); // Ensures the trigger color updates when props.value changes\r\n }, [value]);\r\n\r\n const isPropertyLinear = isLinearMode ?? false;\r\n\r\n /* Color in gamma space — used for visual elements (picker, preview, trigger) /\r\n const gammaColor = useMemo(() => (isPropertyLinear ? color.toGammaSpace() : color), [color, isPropertyLinear]);\r\n\r\n /* Color in the user-selected display space — used for numeric inputs (RGB, HSV, Hex) /\r\n const displayColor = useMemo(() => (isLinear === isPropertyLinear ? color : isLinear ? color.toLinearSpace() : color.toGammaSpace()), [color, isLinear, isPropertyLinear]);\r\n\r\n const handleColorPickerChange: FluentColorPickerProps[\"onColorChange\"] = (_, data) => {\r\n // The visual picker always operates in gamma space, convert back to property space\r\n let gammaResult: Color3 \| Color4 = Color3.FromHSV(data.color.h, data.color.s, data.color.v);\r\n if (value instanceof Color4) {\r\n gammaResult = Color4.FromColor3(gammaResult, data.color.a ?? 1);\r\n }\r\n handleChange(isPropertyLinear ? gammaResult.toLinearSpace() : gammaResult);\r\n };\r\n\r\n const handleChange = (newColor: Color3 \| Color4) => {\r\n setColor(newColor);\r\n onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker\r\n };\r\n\r\n const handleDisplayChange = (newDisplayColor: Color3 \| Color4) => {\r\n const propertyColor = isLinear === isPropertyLinear ? newDisplayColor : isLinear ? newDisplayColor.toGammaSpace() : newDisplayColor.toLinearSpace();\r\n handleChange(propertyColor);\r\n };\r\n\r\n return (\r\n <Popover\r\n trigger={\r\n <ColorSwatch\r\n className={classes.trigger}\r\n ref={ref}\r\n {...rest}\r\n borderColor={tokens.colorNeutralShadowKeyDarker}\r\n size={size === \"small\" ? \"extra-small\" : \"small\"}\r\n shape=\"rounded\"\r\n color={gammaColor.toHexString()}\r\n value={gammaColor.toHexString().slice(1)}\r\n />\r\n }\r\n >\r\n <div className={classes.container}>\r\n <FluentColorPicker className={classes.colorPicker} color={rgbaToHsv(gammaColor)} onColorChange={handleColorPickerChange}>\r\n <ColorArea inputX={{ \"aria-label\": \"Saturation\" }} inputY={{ \"aria-label\": \"Brightness\" }} />\r\n <ColorSlider aria-label=\"Hue\" />\r\n {color instanceof Color4 && <AlphaSlider aria-label=\"Alpha\" />}\r\n </FluentColorPicker>\r\n {/ Top Row: Preview, Color Space, Data Type /}\r\n <div className={classes.row}>\r\n <div className={classes.previewColor} style={{ backgroundColor: gammaColor.toHexString() }} />\r\n <NumberDropdown\r\n className={classes.inputField}\r\n infoLabel={{\r\n label: \"Color Space\",\r\n info: (\r\n <Body1>\r\n Choose which color space to display numeric values in. This property stores its color in{\" \"}\r\n <Body1Strong>{isPropertyLinear ? \"linear\" : \"gamma\"}</Body1Strong> space. The visual picker always shows gamma (screen-accurate) colors.\r\n </Body1>\r\n ),\r\n }}\r\n options={[\r\n { label: \"Gamma\", value: 0 },\r\n { label: \"Linear\", value: 1 },\r\n ]}\r\n value={isLinear ? 1 : 0}\r\n onChange={(val: number) => setIsLinear(val === 1)}\r\n />\r\n <NumberDropdown\r\n className={classes.inputField}\r\n infoLabel={{\r\n label: \"Data Type\",\r\n info: (\r\n <Body1>\r\n <Body1Strong>Int</Body1Strong> displays RGB channels as integers in the 0–255 range. <Body1Strong>Float</Body1Strong> displays them as decimals\r\n in the 0–1 range. This is display-only and does not affect the stored color.\r\n </Body1>\r\n ),\r\n }}\r\n options={[\r\n { label: \"Int\", value: 0 },\r\n { label: \"Float\", value: 1 },\r\n ]}\r\n value={isFloat ? 1 : 0}\r\n onChange={(val: number) => setFloat(val === 1)}\r\n />\r\n </div>\r\n\r\n {/ Middle Row: Red, Green, Blue, Alpha /}\r\n <div className={classes.inputRow}>\r\n <InputRgbField title=\"Red\" value={displayColor} rgbKey=\"r\" isFloat={isFloat} onChange={handleDisplayChange} />\r\n <InputRgbField title=\"Green\" value={displayColor} rgbKey=\"g\" isFloat={isFloat} onChange={handleDisplayChange} />\r\n <InputRgbField title=\"Blue\" value={displayColor} rgbKey=\"b\" isFloat={isFloat} onChange={handleDisplayChange} />\r\n <InputAlphaField color={color} onChange={handleChange} />\r\n </div>\r\n\r\n {/ Bottom Row: Hue, Saturation, Value /}\r\n <div className={classes.inputRow}>\r\n <InputHsvField title=\"Hue\" value={displayColor} hsvKey=\"h\" isFloat={isFloat} onChange={handleDisplayChange} />\r\n <InputHsvField title=\"Saturation\" value={displayColor} hsvKey=\"s\" isFloat={isFloat} onChange={handleDisplayChange} />\r\n <InputHsvField title=\"Value\" value={displayColor} hsvKey=\"v\" isFloat={isFloat} onChange={handleDisplayChange} />\r\n </div>\r\n\r\n <div className={classes.inputRow}>\r\n <InputHexField title=\"Hexadecimal\" value={displayColor} isLinear={isLinear} ispropertyLinear={isPropertyLinear} onChange={handleDisplayChange} />\r\n </div>\r\n </div>\r\n </Popover>\r\n );\r\n});\r\n\r\nexport type InputHexProps = PrimitiveProps<Color3 \| Color4> & {\r\n isLinear?: boolean;\r\n ispropertyLinear?: boolean;\r\n};\r\n\r\n/\r\n Converts a hex string to the same Color type as the original.\r\n * Supports \"#RGB\", \"#RRGGBB\", and \"#RRGGBBAA\" formats.\r\n * For Color4, honors alpha from \"#RRGGBBAA\" input or preserves the original alpha otherwise.\r\n * @param hex - The hex string to convert, in one of the supported formats.\r\n * @param original - The original color, used to determine whether to return a Color3 or Color4 and to preserve alpha if not specified in hex.\r\n * @returns A new Color3 or Color4 instance representing the hex color\r\n /\r\nfunction colorFromHex(hex: string, original: Color3 \| Color4): Color3 \| Color4 {\r\n const digits = hex.startsWith(\"#\") ? hex.slice(1) : hex;\r\n\r\n // Normalize short hex (RGB => RRGGBB)\r\n if (digits.length === 3) {\r\n hex = `#${digits[0]}${digits[0]}${digits[1]}${digits[1]}${digits[2]}${digits[2]}`;\r\n }\r\n\r\n // 8 hex digits = RRGGBBAA — use Color4.FromHexString which natively handles this\r\n if (digits.length === 8) {\r\n if (original instanceof Color4) {\r\n return Color4.FromHexString(hex);\r\n }\r\n return Color3.FromHexString(hex.slice(0, 7));\r\n }\r\n\r\n // 6 hex digits = RRGGBB (or normalized from 3)\r\n if (original instanceof Color4) {\r\n return Color4.FromColor3(Color3.FromHexString(hex), original.a);\r\n }\r\n return Color3.FromHexString(hex);\r\n}\r\n\r\n/\r\n Component which displays the passed in color's HEX value in the currently selected color space.\r\n * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange.\r\n * @param props - The properties for the InputHexField component.\r\n * @returns\r\n /\r\nexport const InputHexField: FunctionComponent<InputHexProps> = (props) => {\r\n const classes = useColorPickerStyles();\r\n const { title, value, onChange, isLinear, ispropertyLinear } = props;\r\n\r\n const displayMismatchesproperty = (isLinear ?? false) !== (ispropertyLinear ?? false);\r\n const displaySpace = isLinear ? \"linear\" : \"gamma\";\r\n const propertySpace = ispropertyLinear ? \"linear\" : \"gamma\";\r\n const isColor4 = value instanceof Color4;\r\n const colorClass = isColor4 ? \"Color4\" : \"Color3\";\r\n\r\n return (\r\n <TextInput\r\n className={classes.inputField}\r\n value={value.toHexString()}\r\n validator={ValidateColorHex}\r\n validateOnlyOnBlur\r\n onChange={(val) => onChange(colorFromHex(val, value))}\r\n infoLabel={\r\n title\r\n ? {\r\n label: title,\r\n info: (\r\n <Body1>\r\n This hex value is in <Body1Strong>{displaySpace}</Body1Strong> space\r\n {displayMismatchesproperty ? (\r\n <Body1>\r\n , but the property stores its color in <Body1Strong>{propertySpace}</Body1Strong> space.\r\n <br />\r\n <br />\r\n The color picker converts automatically, but if you copy this hex into code you will need to convert it:\r\n <br />\r\n <Body1Strong>\r\n {colorClass}.FromHexString(\"{value.toHexString()}\").{isLinear ? \"toGammaSpace()\" : \"toLinearSpace()\"}\r\n </Body1Strong>\r\n </Body1>\r\n ) : (\r\n <Body1>\r\n , which matches the property's stored color space.\r\n <br />\r\n <br />\r\n To copy this hex into code, use\r\n <br />\r\n <Body1Strong>\r\n {colorClass}.FromHexString(\"{value.toHexString()}\")\r\n </Body1Strong>\r\n </Body1>\r\n )}\r\n <br />\r\n <br />\r\n <Link url=\"https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/\" value=\"Read more in our docs!\" />\r\n </Body1>\r\n ),\r\n }\r\n : undefined\r\n }\r\n />\r\n );\r\n};\r\n\r\ntype RgbKey = \"r\" \| \"g\" \| \"b\";\r\ntype InputRgbFieldProps = PrimitiveProps<Color3 \| Color4> & {\r\n rgbKey: RgbKey;\r\n isFloat: boolean;\r\n};\r\n\r\nconst InputRgbField: FunctionComponent<InputRgbFieldProps> = (props) => {\r\n const { value, onChange, title, rgbKey, isFloat } = props;\r\n const classes = useColorPickerStyles();\r\n\r\n const handleChange = useCallback(\r\n (val: number) => {\r\n const newColor = value.clone();\r\n newColor[rgbKey] = isFloat ? val : val / 255.0;\r\n onChange(newColor);\r\n },\r\n [value, onChange, rgbKey, isFloat]\r\n );\r\n\r\n return (\r\n <SpinButton\r\n key={`${rgbKey}-${isFloat ? \"float\" : \"int\"}`} // ensures remount when swapping between int/float, preserving min/max validation\r\n infoLabel={title ? { label: title } : undefined}\r\n className={classes.inputField}\r\n min={0}\r\n max={isFloat ? 1 : 255}\r\n value={isFloat ? value[rgbKey] : Math.round(value[rgbKey] 255)}\r\n step={isFloat ? 0.01 : 1}\r\n forceInt={!isFloat}\r\n precision={isFloat ? 4 : undefined}\r\n onChange={handleChange}\r\n />\r\n );\r\n};\r\n\r\nfunction rgbaToHsv(color: { r: number; g: number; b: number; a?: number }): { h: number; s: number; v: number; a?: number } {\r\n const c = new Color3(color.r, color.g, color.b);\r\n const hsv = c.toHSV();\r\n return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };\r\n}\r\n\r\ntype HsvKey = \"h\" \| \"s\" \| \"v\";\r\ntype InputHsvFieldProps = PrimitiveProps<Color3 \| Color4> & {\r\n hsvKey: HsvKey;\r\n isFloat: boolean;\r\n};\r\n\r\n// Internal HSV ranges: H ∈ [0,360], S ∈ [0,1], V ∈ [0,1]\r\n// Int mode display: H → 0-360, S → 0-100, V → 0-100\r\n// Float mode display: H → 0-1, S → 0-1, V → 0-1\r\nfunction getHsvDisplayParams(hsvKey: HsvKey, isFloat: boolean) {\r\n if (isFloat) {\r\n // All channels displayed as 0-1\r\n const internalMax = hsvKey === \"h\" ? 360 : 1;\r\n return { max: 1, toDisplay: (v: number) => v / internalMax, toInternal: (v: number) => v * internalMax, step: 0.01, forceInt: false, precision: 4 };\r\n }\r\n // Int mode\r\n const scale = hsvKey === \"h\" ? 1 : 100;\r\n const max = hsvKey === \"h\" ? 360 : 100;\r\n return { max, toDisplay: (v: number) => Math.round(v * scale), toInternal: (v: number) => v / scale, step: 1, forceInt: true, precision: undefined };\r\n}\r\n\r\n/*\r\n 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.\r\n * 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.\r\n * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.\r\n * @param props - The properties for the InputHsvField component.\r\n /\r\nexport const InputHsvField: FunctionComponent<InputHsvFieldProps> = (props) => {\r\n const { value, title, hsvKey, isFloat, onChange } = props;\r\n\r\n const classes = useColorPickerStyles();\r\n const { max, toDisplay, toInternal, step, forceInt, precision } = getHsvDisplayParams(hsvKey, isFloat);\r\n\r\n const handleChange = useCallback(\r\n (val: number) => {\r\n const hsv = rgbaToHsv(value);\r\n hsv[hsvKey] = toInternal(val);\r\n let newColor: Color3 \| Color4 = Color3.FromHSV(hsv.h, hsv.s, hsv.v);\r\n if (value instanceof Color4) {\r\n newColor = Color4.FromColor3(newColor, value.a ?? 1);\r\n }\r\n props.onChange(newColor);\r\n },\r\n [value, onChange, hsvKey, toInternal]\r\n );\r\n\r\n return (\r\n <SpinButton\r\n key={`${hsvKey}-${isFloat ? \"float\" : \"int\"}`} // ensures remount when swapping between int/float, preserving min/max validation\r\n infoLabel={title ? { label: title } : undefined}\r\n className={classes.inputField}\r\n min={0}\r\n max={max}\r\n value={toDisplay(rgbaToHsv(value)[hsvKey])}\r\n step={step}\r\n forceInt={forceInt}\r\n precision={precision}\r\n onChange={handleChange}\r\n />\r\n );\r\n};\r\n\r\ntype InputAlphaProps = {\r\n color: Color3 \| Color4;\r\n onChange: (color: Color4) => void;\r\n};\r\n\r\n/\r\n 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).\r\n * @param props\r\n * @returns\r\n */\r\nconst InputAlphaField: FunctionComponent<InputAlphaProps> = (props) => {\r\n const classes = useColorPickerStyles();\r\n const { color, onChange } = props;\r\n\r\n const handleChange = useCallback(\r\n (value: number) => {\r\n if (Number.isNaN(value) \|\| value < 0 \|\| value > 1) {\r\n return;\r\n }\r\n\r\n if (color instanceof Color4) {\r\n const newColor = color.clone();\r\n newColor.a = value;\r\n onChange(newColor);\r\n } else {\r\n onChange(Color4.FromColor3(color, value));\r\n }\r\n },\r\n [color, onChange]\r\n );\r\n\r\n return (\r\n <SpinButton\r\n disabled={color instanceof Color3}\r\n min={0}\r\n max={1}\r\n className={classes.inputField}\r\n value={color instanceof Color3 ? 1 : color.a}\r\n step={0.01}\r\n onChange={handleChange}\r\n infoLabel={{\r\n label: \"Alpha\",\r\n info:\r\n color instanceof Color3 ? (\r\n <Body1>\r\n Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the property's alpha\r\n property directly, either in code via property.alpha OR via inspector's transparency section.\r\n </Body1>\r\n ) : undefined,\r\n }}\r\n />\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"colorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/colorPicker.tsx"],"names":[],"mappings":";AAAA,0CAA0C;AAC1C,yDAAyD;AACzD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE1F,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAExK,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,yCAA8B;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,oBAAoB,GAAG,UAAU,CAAC;IACpC,SAAS,EAAE;QACP,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,MAAM,EAAE,oBAAoB;QACrC,aAAa,EAAE,QAAQ,EAAE,4BAA4B;QACrD,UAAU,EAAE,QAAQ,EAAE,gCAAgC;QACtD,cAAc,EAAE,QAAQ,EAAE,iDAAiD;QAC3E,GAAG,EAAE,MAAM,CAAC,gBAAgB;QAC5B,QAAQ,EAAE,SAAS;KACtB;IACD,GAAG,EAAE;QACD,IAAI,EAAE,CAAC,EAAE,0CAA0C;QACnD,OAAO,EAAE,MAAM,EAAE,0BAA0B;QAC3C,aAAa,EAAE,KAAK,EAAE,yBAAyB;QAC/C,GAAG,EAAE,MAAM,CAAC,mBAAmB;QAC/B,UAAU,EAAE,QAAQ,EAAE,yBAAyB;QAC/C,KAAK,EAAE,MAAM;KAChB;IACD,WAAW,EAAE;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO;KAClB;IACD,YAAY,EAAE;QACV,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM,CAAC,kBAAkB,EAAE,OAAO;QAChD,MAAM,EAAE,GAAG,MAAM,CAAC,kBAAkB,UAAU,MAAM,CAAC,4BAA4B,EAAE;QACnF,gCAAgC,EAAE;YAC9B,iBAAiB,EAAE,MAAM,EAAE,0DAA0D;SACxF;KACJ;IACD,QAAQ,EAAE;QACN,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,IAAI,EAAE,CAAC,EAAE,gCAAgC;QACzC,cAAc,EAAE,QAAQ;QACxB,GAAG,EAAE,MAAM;QACX,KAAK,EAAE,MAAM;KAChB;IACD,UAAU,EAAE;QACR,IAAI,EAAE,CAAC,EAAE,gCAAgC;QACzC,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,CAAC;QACX,GAAG,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM;KAC5C;IACD,OAAO,EAAE;QACL,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACvB;CACJ,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAAuD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC5G,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;IAClD,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACzD,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,KAAK,CAAC,CAAC;IAChE,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,6DAA6D;IAClF,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,gBAAgB,GAAG,YAAY,IAAI,KAAK,CAAC;IAE/C,iFAAiF;IACjF,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE/G,yFAAyF;IACzF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,QAAQ,KAAK,gBAAgB,EAAE,CAAC;YAChC,OAAO,KAAK,CAAC;QACjB,CAAC;QACD,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;IACnE,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAExC,MAAM,uBAAuB,GAA4C,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;QACjF,mFAAmF;QACnF,IAAI,WAAW,GAAoB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC5F,IAAI,KAAK,YAAY,MAAM,EAAE,CAAC;YAC1B,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QACpE,CAAC;QACD,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC/E,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,QAAyB,EAAE,EAAE;QAC/C,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,4EAA4E;IACpG,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,eAAgC,EAAE,EAAE;QAC7D,MAAM,aAAa,GAAG,QAAQ,KAAK,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QACpJ,YAAY,CAAC,aAAa,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,OAAO,IACJ,OAAO,EACH,KAAC,WAAW,IACR,SAAS,EAAE,OAAO,CAAC,OAAO,EAC1B,GAAG,EAAE,GAAG,KACJ,IAAI,EACR,WAAW,EAAE,MAAM,CAAC,2BAA2B,EAC/C,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,EAChD,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,EAC/B,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,GAC1C,YAGN,eAAK,SAAS,EAAE,OAAO,CAAC,SAAS,aAC7B,MAAC,iBAAiB,IAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,UAAU,CAAC,EAAE,aAAa,EAAE,uBAAuB,aACnH,KAAC,SAAS,IAAC,MAAM,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,MAAM,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,GAAI,EAC7F,KAAC,WAAW,kBAAY,KAAK,GAAG,EAC/B,KAAK,YAAY,MAAM,IAAI,KAAC,WAAW,kBAAY,OAAO,GAAG,IAC9C,EAEpB,eAAK,SAAS,EAAE,OAAO,CAAC,GAAG,aACvB,cAAK,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,UAAU,CAAC,WAAW,EAAE,EAAE,GAAI,EAC9F,KAAC,cAAc,IACX,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,SAAS,EAAE;gCACP,KAAK,EAAE,aAAa;gCACpB,IAAI,EAAE,CACF,MAAC,KAAK,2GACuF,GAAG,EAC5F,KAAC,WAAW,cAAE,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,GAAe,8EAC9D,CACX;6BACJ,EACD,OAAO,EAAE;gCACL,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE;gCAC5B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE;6BAChC,EACD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACvB,QAAQ,EAAE,CAAC,GAAW,EAAE,EAAE,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,CAAC,GACnD,EACF,KAAC,cAAc,IACX,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,SAAS,EAAE;gCACP,KAAK,EAAE,WAAW;gCAClB,IAAI,EAAE,CACF,MAAC,KAAK,eACF,KAAC,WAAW,sBAAkB,kEAAuD,KAAC,WAAW,wBAAoB,oHAEjH,CACX;6BACJ,EACD,OAAO,EAAE;gCACL,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE;gCAC1B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE;6BAC/B,EACD,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACtB,QAAQ,EAAE,CAAC,GAAW,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,CAAC,GAChD,IACA,EAGN,eAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,aAC5B,KAAC,aAAa,IAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAC,GAAG,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,GAAI,EAC9G,KAAC,aAAa,IAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAC,GAAG,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,GAAI,EAChH,KAAC,aAAa,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAC,GAAG,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,GAAI,EAC/G,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,GAAI,IACvD,EAGN,eAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,aAC5B,KAAC,aAAa,IAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAC,GAAG,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,GAAI,EAC9G,KAAC,aAAa,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAC,GAAG,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,GAAI,EACrH,KAAC,aAAa,IAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAC,GAAG,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,GAAI,IAC9G,EAEN,cAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,YAC5B,KAAC,aAAa,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,QAAQ,EAAE,mBAAmB,GAAI,GAC/I,IACJ,GACA,CACb,CAAC;AACN,CAAC,CAAC,CAAC;AAOH;;;;;;;GAOG;AACH,SAAS,YAAY,CAAC,GAAW,EAAE,QAAyB;IACxD,MAAM,MAAM,GAAG,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAExD,sCAAsC;IACtC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACtB,GAAG,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACtF,CAAC;IAED,iFAAiF;IACjF,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACtB,IAAI,QAAQ,YAAY,MAAM,EAAE,CAAC;YAC7B,OAAO,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC;IAED,+CAA+C;IAC/C,IAAI,QAAQ,YAAY,MAAM,EAAE,CAAC;QAC7B,OAAO,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpE,CAAC;IACD,OAAO,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AACrC,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAqC,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAErE,MAAM,yBAAyB,GAAG,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,CAAC;IACtF,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;IACnD,MAAM,aAAa,GAAG,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5D,MAAM,QAAQ,GAAG,KAAK,YAAY,MAAM,CAAC;IACzC,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;IAElD,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,EAC1B,SAAS,EAAE,gBAAgB,EAC3B,kBAAkB,QAClB,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,EACrD,SAAS,EACL,KAAK;YACD,CAAC,CAAC;gBACI,KAAK,EAAE,KAAK;gBACZ,IAAI,EAAE,CACF,MAAC,KAAK,wCACmB,KAAC,WAAW,cAAE,YAAY,GAAe,YAC7D,yBAAyB,CAAC,CAAC,CAAC,CACzB,MAAC,KAAK,0DACqC,KAAC,WAAW,cAAE,aAAa,GAAe,aACjF,cAAM,EACN,cAAM,8GAEN,cAAM,EACN,MAAC,WAAW,eACP,UAAU,uBAAkB,KAAK,CAAC,WAAW,EAAE,UAAK,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,IAC1F,IACV,CACX,CAAC,CAAC,CAAC,CACA,MAAC,KAAK,qEAEF,cAAM,EACN,cAAM,qCAEN,cAAM,EACN,MAAC,WAAW,eACP,UAAU,uBAAkB,KAAK,CAAC,WAAW,EAAE,WACtC,IACV,CACX,EACD,cAAM,EACN,cAAM,EACN,KAAC,IAAI,IAAC,GAAG,EAAC,yEAAyE,EAAC,KAAK,EAAC,wBAAwB,GAAG,IACjH,CACX;aACJ;YACH,CAAC,CAAC,SAAS,GAErB,CACL,CAAC;AACN,CAAC,CAAC;AAQF,MAAM,aAAa,GAA0C,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IAEvC,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,GAAW,EAAE,EAAE;QACZ,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;QAC/B,QAAQ,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,KAAK,CAAC;QAC/C,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CACrC,CAAC;IAEF,OAAO,CACH,KAAC,UAAU,IAEP,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EAC/C,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EACtB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,EAChE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EACxB,QAAQ,EAAE,CAAC,OAAO,EAClB,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAClC,QAAQ,EAAE,YAAY,IATjB,GAAG,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,CAU/C,CACL,CAAC;AACN,CAAC,CAAC;AAEF,SAAS,SAAS,CAAC,KAAsD;IACrE,MAAM,CAAC,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAChD,MAAM,GAAG,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;IACtB,OAAO,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC;AACxD,CAAC;AAQD,yDAAyD;AACzD,sDAAsD;AACtD,oDAAoD;AACpD,SAAS,mBAAmB,CAAC,MAAc,EAAE,OAAgB;IACzD,IAAI,OAAO,EAAE,CAAC;QACV,gCAAgC;QAChC,MAAM,WAAW,GAAG,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7C,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,WAAW,EAAE,UAAU,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC;IACxJ,CAAC;IACD,WAAW;IACX,MAAM,KAAK,GAAG,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IACvC,MAAM,GAAG,GAAG,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IACvC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AACzJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAA0C,CAAC,KAAK,EAAE,EAAE;IAC1E,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,mBAAmB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEvG,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,GAAW,EAAE,EAAE;QACZ,MAAM,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAC7B,GAAG,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QAC9B,IAAI,QAAQ,GAAoB,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;QACpE,IAAI,KAAK,YAAY,MAAM,EAAE,CAAC;YAC1B,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QACzD,CAAC;QACD,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,CAAC,CACxC,CAAC;IAEF,OAAO,CACH,KAAC,UAAU,IAEP,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EAC/C,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAC1C,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,YAAY,IATjB,GAAG,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,CAU/C,CACL,CAAC;AACN,CAAC,CAAC;AAOF;;;;GAIG;AACH,MAAM,eAAe,GAAuC,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAElC,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,KAAa,EAAE,EAAE;QACd,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YAChD,OAAO;QACX,CAAC;QAED,IAAI,KAAK,YAAY,MAAM,EAAE,CAAC;YAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;YAC/B,QAAQ,CAAC,CAAC,GAAG,KAAK,CAAC;YACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACvB,CAAC;aAAM,CAAC;YACJ,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;QAC9C,CAAC;IACL,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,CAAC,CACpB,CAAC;IAEF,OAAO,CACH,KAAC,UAAU,IACP,QAAQ,EAAE,KAAK,YAAY,MAAM,EACjC,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,KAAK,EAAE,KAAK,YAAY,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAC5C,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE;YACP,KAAK,EAAE,OAAO;YACd,IAAI,EACA,KAAK,YAAY,MAAM,CAAC,CAAC,CAAC,CACtB,KAAC,KAAK,wQAGE,CACX,CAAC,CAAC,CAAC,SAAS;SACpB,GACH,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["/* eslint-disable jsdoc/require-returns /\r\n/ eslint-disable @typescript-eslint/naming-convention /\r\nimport { forwardRef, useState, useEffect, useCallback, useContext, useMemo } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { ColorPicker as FluentColorPicker, ColorSlider, ColorArea, AlphaSlider, makeStyles, tokens, Body1Strong, ColorSwatch, Body1 } from \"@fluentui/react-components\";\r\nimport type { ColorPickerProps as FluentColorPickerProps } from \"@fluentui/react-components\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { SpinButton } from \"./spinButton\";\r\nimport { TextInput } from \"./textInput\";\r\nimport { NumberDropdown } from \"./dropdown\";\r\nimport { ValidateColorHex } from \"./utils\";\r\nimport { Link } from \"./link\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { Popover } from \"./popover\";\r\n\r\nconst useColorPickerStyles = makeStyles({\r\n container: {\r\n width: \"350px\",\r\n display: \"flex\", // becomes a flexbox\r\n flexDirection: \"column\", // with children in a column\r\n alignItems: \"center\", // centers children horizontally\r\n justifyContent: \"center\", // centers children vertically (if height is set)\r\n gap: tokens.spacingVerticalM,\r\n overflow: \"visible\",\r\n },\r\n row: {\r\n flex: 1, // is a row in the container's flex column\r\n display: \"flex\", // becomes its own flexbox\r\n flexDirection: \"row\", // with children in a row\r\n gap: tokens.spacingHorizontalXL,\r\n alignItems: \"center\", // align items vertically\r\n width: \"100%\",\r\n },\r\n colorPicker: {\r\n flex: 1,\r\n width: \"350px\",\r\n height: \"350px\",\r\n },\r\n previewColor: {\r\n width: \"60px\",\r\n height: \"60px\",\r\n borderRadius: tokens.borderRadiusMedium, // 4px?\r\n border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,\r\n \"@media (forced-colors: active)\": {\r\n forcedColorAdjust: \"none\", // ensures elmement maintains color in high constrast mode\r\n },\r\n },\r\n inputRow: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n flex: 1, // grow and fill available space\r\n justifyContent: \"center\",\r\n gap: \"10px\",\r\n width: \"100%\",\r\n },\r\n inputField: {\r\n flex: 1, // grow and fill available space\r\n width: \"auto\",\r\n minWidth: 0,\r\n gap: tokens.spacingVerticalSNudge, // 6px\r\n },\r\n trigger: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n },\r\n});\r\n\r\nexport type ColorPickerProps<C extends Color3 \| Color4> = {\r\n isLinearMode?: boolean;\r\n} & PrimitiveProps<C>;\r\n\r\nexport const ColorPickerPopup = forwardRef<HTMLButtonElement, ColorPickerProps<Color3 \| Color4>>((props, ref) => {\r\n ColorPickerPopup.displayName = \"ColorPickerPopup\";\r\n const { value, onChange, isLinearMode, ...rest } = props;\r\n const classes = useColorPickerStyles();\r\n const [color, setColor] = useState(value);\r\n const [isLinear, setIsLinear] = useState(isLinearMode ?? false);\r\n const [isFloat, setFloat] = useState(false);\r\n const { size } = useContext(ToolContext);\r\n useEffect(() => {\r\n setColor(value); // Ensures the trigger color updates when props.value changes\r\n }, [value]);\r\n\r\n const isPropertyLinear = isLinearMode ?? false;\r\n\r\n /* Color in gamma space — used for visual elements (picker, preview, trigger) /\r\n const gammaColor = useMemo(() => (isPropertyLinear ? color.toGammaSpace() : color), [color, isPropertyLinear]);\r\n\r\n /* Color in the user-selected display space — used for numeric inputs (RGB, HSV, Hex) /\r\n const displayColor = useMemo(() => {\r\n if (isLinear === isPropertyLinear) {\r\n return color;\r\n }\r\n return isLinear ? color.toLinearSpace() : color.toGammaSpace();\r\n }, [color, isLinear, isPropertyLinear]);\r\n\r\n const handleColorPickerChange: FluentColorPickerProps[\"onColorChange\"] = (_, data) => {\r\n // The visual picker always operates in gamma space, convert back to property space\r\n let gammaResult: Color3 \| Color4 = Color3.FromHSV(data.color.h, data.color.s, data.color.v);\r\n if (value instanceof Color4) {\r\n gammaResult = Color4.FromColor3(gammaResult, data.color.a ?? 1);\r\n }\r\n handleChange(isPropertyLinear ? gammaResult.toLinearSpace() : gammaResult);\r\n };\r\n\r\n const handleChange = (newColor: Color3 \| Color4) => {\r\n setColor(newColor);\r\n onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker\r\n };\r\n\r\n const handleDisplayChange = (newDisplayColor: Color3 \| Color4) => {\r\n const propertyColor = isLinear === isPropertyLinear ? newDisplayColor : isLinear ? newDisplayColor.toGammaSpace() : newDisplayColor.toLinearSpace();\r\n handleChange(propertyColor);\r\n };\r\n\r\n return (\r\n <Popover\r\n trigger={\r\n <ColorSwatch\r\n className={classes.trigger}\r\n ref={ref}\r\n {...rest}\r\n borderColor={tokens.colorNeutralShadowKeyDarker}\r\n size={size === \"small\" ? \"extra-small\" : \"small\"}\r\n shape=\"rounded\"\r\n color={gammaColor.toHexString()}\r\n value={gammaColor.toHexString().slice(1)}\r\n />\r\n }\r\n >\r\n <div className={classes.container}>\r\n <FluentColorPicker className={classes.colorPicker} color={rgbaToHsv(gammaColor)} onColorChange={handleColorPickerChange}>\r\n <ColorArea inputX={{ \"aria-label\": \"Saturation\" }} inputY={{ \"aria-label\": \"Brightness\" }} />\r\n <ColorSlider aria-label=\"Hue\" />\r\n {color instanceof Color4 && <AlphaSlider aria-label=\"Alpha\" />}\r\n </FluentColorPicker>\r\n {/ Top Row: Preview, Color Space, Data Type /}\r\n <div className={classes.row}>\r\n <div className={classes.previewColor} style={{ backgroundColor: gammaColor.toHexString() }} />\r\n <NumberDropdown\r\n className={classes.inputField}\r\n infoLabel={{\r\n label: \"Color Space\",\r\n info: (\r\n <Body1>\r\n Choose which color space to display numeric values in. This property stores its color in{\" \"}\r\n <Body1Strong>{isPropertyLinear ? \"linear\" : \"gamma\"}</Body1Strong> space. The visual picker always shows gamma (screen-accurate) colors.\r\n </Body1>\r\n ),\r\n }}\r\n options={[\r\n { label: \"Gamma\", value: 0 },\r\n { label: \"Linear\", value: 1 },\r\n ]}\r\n value={isLinear ? 1 : 0}\r\n onChange={(val: number) => setIsLinear(val === 1)}\r\n />\r\n <NumberDropdown\r\n className={classes.inputField}\r\n infoLabel={{\r\n label: \"Data Type\",\r\n info: (\r\n <Body1>\r\n <Body1Strong>Int</Body1Strong> displays RGB channels as integers in the 0–255 range. <Body1Strong>Float</Body1Strong> displays them as decimals\r\n in the 0–1 range. This is display-only and does not affect the stored color.\r\n </Body1>\r\n ),\r\n }}\r\n options={[\r\n { label: \"Int\", value: 0 },\r\n { label: \"Float\", value: 1 },\r\n ]}\r\n value={isFloat ? 1 : 0}\r\n onChange={(val: number) => setFloat(val === 1)}\r\n />\r\n </div>\r\n\r\n {/ Middle Row: Red, Green, Blue, Alpha /}\r\n <div className={classes.inputRow}>\r\n <InputRgbField title=\"Red\" value={displayColor} rgbKey=\"r\" isFloat={isFloat} onChange={handleDisplayChange} />\r\n <InputRgbField title=\"Green\" value={displayColor} rgbKey=\"g\" isFloat={isFloat} onChange={handleDisplayChange} />\r\n <InputRgbField title=\"Blue\" value={displayColor} rgbKey=\"b\" isFloat={isFloat} onChange={handleDisplayChange} />\r\n <InputAlphaField color={color} onChange={handleChange} />\r\n </div>\r\n\r\n {/ Bottom Row: Hue, Saturation, Value /}\r\n <div className={classes.inputRow}>\r\n <InputHsvField title=\"Hue\" value={displayColor} hsvKey=\"h\" isFloat={isFloat} onChange={handleDisplayChange} />\r\n <InputHsvField title=\"Saturation\" value={displayColor} hsvKey=\"s\" isFloat={isFloat} onChange={handleDisplayChange} />\r\n <InputHsvField title=\"Value\" value={displayColor} hsvKey=\"v\" isFloat={isFloat} onChange={handleDisplayChange} />\r\n </div>\r\n\r\n <div className={classes.inputRow}>\r\n <InputHexField title=\"Hexadecimal\" value={displayColor} isLinear={isLinear} isPropertyLinear={isPropertyLinear} onChange={handleDisplayChange} />\r\n </div>\r\n </div>\r\n </Popover>\r\n );\r\n});\r\n\r\nexport type InputHexProps = PrimitiveProps<Color3 \| Color4> & {\r\n isLinear?: boolean;\r\n isPropertyLinear?: boolean;\r\n};\r\n\r\n/\r\n Converts a hex string to the same Color type as the original.\r\n * Supports \"#RGB\", \"#RRGGBB\", and \"#RRGGBBAA\" formats.\r\n * For Color4, honors alpha from \"#RRGGBBAA\" input or preserves the original alpha otherwise.\r\n * @param hex - The hex string to convert, in one of the supported formats.\r\n * @param original - The original color, used to determine whether to return a Color3 or Color4 and to preserve alpha if not specified in hex.\r\n * @returns A new Color3 or Color4 instance representing the hex color\r\n /\r\nfunction colorFromHex(hex: string, original: Color3 \| Color4): Color3 \| Color4 {\r\n const digits = hex.startsWith(\"#\") ? hex.slice(1) : hex;\r\n\r\n // Normalize short hex (RGB => RRGGBB)\r\n if (digits.length === 3) {\r\n hex = `#${digits[0]}${digits[0]}${digits[1]}${digits[1]}${digits[2]}${digits[2]}`;\r\n }\r\n\r\n // 8 hex digits = RRGGBBAA — use Color4.FromHexString which natively handles this\r\n if (digits.length === 8) {\r\n if (original instanceof Color4) {\r\n return Color4.FromHexString(hex);\r\n }\r\n return Color3.FromHexString(hex.slice(0, 7));\r\n }\r\n\r\n // 6 hex digits = RRGGBB (or normalized from 3)\r\n if (original instanceof Color4) {\r\n return Color4.FromColor3(Color3.FromHexString(hex), original.a);\r\n }\r\n return Color3.FromHexString(hex);\r\n}\r\n\r\n/\r\n Component which displays the passed in color's HEX value in the currently selected color space.\r\n * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange.\r\n * @param props - The properties for the InputHexField component.\r\n * @returns\r\n /\r\nexport const InputHexField: FunctionComponent<InputHexProps> = (props) => {\r\n const classes = useColorPickerStyles();\r\n const { title, value, onChange, isLinear, isPropertyLinear } = props;\r\n\r\n const displayMismatchesProperty = (isLinear ?? false) !== (isPropertyLinear ?? false);\r\n const displaySpace = isLinear ? \"linear\" : \"gamma\";\r\n const propertySpace = isPropertyLinear ? \"linear\" : \"gamma\";\r\n const isColor4 = value instanceof Color4;\r\n const colorClass = isColor4 ? \"Color4\" : \"Color3\";\r\n\r\n return (\r\n <TextInput\r\n className={classes.inputField}\r\n value={value.toHexString()}\r\n validator={ValidateColorHex}\r\n validateOnlyOnBlur\r\n onChange={(val) => onChange(colorFromHex(val, value))}\r\n infoLabel={\r\n title\r\n ? {\r\n label: title,\r\n info: (\r\n <Body1>\r\n This hex value is in <Body1Strong>{displaySpace}</Body1Strong> space\r\n {displayMismatchesProperty ? (\r\n <Body1>\r\n , but the property stores its color in <Body1Strong>{propertySpace}</Body1Strong> space.\r\n <br />\r\n <br />\r\n The color picker converts automatically, but if you copy this hex into code you will need to convert it:\r\n <br />\r\n <Body1Strong>\r\n {colorClass}.FromHexString(\"{value.toHexString()}\").{isLinear ? \"toGammaSpace()\" : \"toLinearSpace()\"}\r\n </Body1Strong>\r\n </Body1>\r\n ) : (\r\n <Body1>\r\n , which matches the property's stored color space.\r\n <br />\r\n <br />\r\n To copy this hex into code, use\r\n <br />\r\n <Body1Strong>\r\n {colorClass}.FromHexString(\"{value.toHexString()}\")\r\n </Body1Strong>\r\n </Body1>\r\n )}\r\n <br />\r\n <br />\r\n <Link url=\"https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/\" value=\"Read more in our docs!\" />\r\n </Body1>\r\n ),\r\n }\r\n : undefined\r\n }\r\n />\r\n );\r\n};\r\n\r\ntype RgbKey = \"r\" \| \"g\" \| \"b\";\r\ntype InputRgbFieldProps = PrimitiveProps<Color3 \| Color4> & {\r\n rgbKey: RgbKey;\r\n isFloat: boolean;\r\n};\r\n\r\nconst InputRgbField: FunctionComponent<InputRgbFieldProps> = (props) => {\r\n const { value, onChange, title, rgbKey, isFloat } = props;\r\n const classes = useColorPickerStyles();\r\n\r\n const handleChange = useCallback(\r\n (val: number) => {\r\n const newColor = value.clone();\r\n newColor[rgbKey] = isFloat ? val : val / 255.0;\r\n onChange(newColor);\r\n },\r\n [value, onChange, rgbKey, isFloat]\r\n );\r\n\r\n return (\r\n <SpinButton\r\n key={`${rgbKey}-${isFloat ? \"float\" : \"int\"}`} // ensures remount when swapping between int/float, preserving min/max validation\r\n infoLabel={title ? { label: title } : undefined}\r\n className={classes.inputField}\r\n min={0}\r\n max={isFloat ? 1 : 255}\r\n value={isFloat ? value[rgbKey] : Math.round(value[rgbKey] 255)}\r\n step={isFloat ? 0.01 : 1}\r\n forceInt={!isFloat}\r\n precision={isFloat ? 4 : undefined}\r\n onChange={handleChange}\r\n />\r\n );\r\n};\r\n\r\nfunction rgbaToHsv(color: { r: number; g: number; b: number; a?: number }): { h: number; s: number; v: number; a?: number } {\r\n const c = new Color3(color.r, color.g, color.b);\r\n const hsv = c.toHSV();\r\n return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };\r\n}\r\n\r\ntype HsvKey = \"h\" \| \"s\" \| \"v\";\r\ntype InputHsvFieldProps = PrimitiveProps<Color3 \| Color4> & {\r\n hsvKey: HsvKey;\r\n isFloat: boolean;\r\n};\r\n\r\n// Internal HSV ranges: H ∈ [0,360], S ∈ [0,1], V ∈ [0,1]\r\n// Int mode display: H → 0-360, S → 0-100, V → 0-100\r\n// Float mode display: H → 0-1, S → 0-1, V → 0-1\r\nfunction getHsvDisplayParams(hsvKey: HsvKey, isFloat: boolean) {\r\n if (isFloat) {\r\n // All channels displayed as 0-1\r\n const internalMax = hsvKey === \"h\" ? 360 : 1;\r\n return { max: 1, toDisplay: (v: number) => v / internalMax, toInternal: (v: number) => v * internalMax, step: 0.01, forceInt: false, precision: 4 };\r\n }\r\n // Int mode\r\n const scale = hsvKey === \"h\" ? 1 : 100;\r\n const max = hsvKey === \"h\" ? 360 : 100;\r\n return { max, toDisplay: (v: number) => Math.round(v * scale), toInternal: (v: number) => v / scale, step: 1, forceInt: true, precision: undefined };\r\n}\r\n\r\n/*\r\n 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.\r\n * 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.\r\n * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.\r\n * @param props - The properties for the InputHsvField component.\r\n /\r\nexport const InputHsvField: FunctionComponent<InputHsvFieldProps> = (props) => {\r\n const { value, title, hsvKey, isFloat, onChange } = props;\r\n\r\n const classes = useColorPickerStyles();\r\n const { max, toDisplay, toInternal, step, forceInt, precision } = getHsvDisplayParams(hsvKey, isFloat);\r\n\r\n const handleChange = useCallback(\r\n (val: number) => {\r\n const hsv = rgbaToHsv(value);\r\n hsv[hsvKey] = toInternal(val);\r\n let newColor: Color3 \| Color4 = Color3.FromHSV(hsv.h, hsv.s, hsv.v);\r\n if (value instanceof Color4) {\r\n newColor = Color4.FromColor3(newColor, value.a ?? 1);\r\n }\r\n props.onChange(newColor);\r\n },\r\n [value, onChange, hsvKey, toInternal]\r\n );\r\n\r\n return (\r\n <SpinButton\r\n key={`${hsvKey}-${isFloat ? \"float\" : \"int\"}`} // ensures remount when swapping between int/float, preserving min/max validation\r\n infoLabel={title ? { label: title } : undefined}\r\n className={classes.inputField}\r\n min={0}\r\n max={max}\r\n value={toDisplay(rgbaToHsv(value)[hsvKey])}\r\n step={step}\r\n forceInt={forceInt}\r\n precision={precision}\r\n onChange={handleChange}\r\n />\r\n );\r\n};\r\n\r\ntype InputAlphaProps = {\r\n color: Color3 \| Color4;\r\n onChange: (color: Color4) => void;\r\n};\r\n\r\n/\r\n 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).\r\n * @param props\r\n * @returns\r\n */\r\nconst InputAlphaField: FunctionComponent<InputAlphaProps> = (props) => {\r\n const classes = useColorPickerStyles();\r\n const { color, onChange } = props;\r\n\r\n const handleChange = useCallback(\r\n (value: number) => {\r\n if (Number.isNaN(value) \|\| value < 0 \|\| value > 1) {\r\n return;\r\n }\r\n\r\n if (color instanceof Color4) {\r\n const newColor = color.clone();\r\n newColor.a = value;\r\n onChange(newColor);\r\n } else {\r\n onChange(Color4.FromColor3(color, value));\r\n }\r\n },\r\n [color, onChange]\r\n );\r\n\r\n return (\r\n <SpinButton\r\n disabled={color instanceof Color3}\r\n min={0}\r\n max={1}\r\n className={classes.inputField}\r\n value={color instanceof Color3 ? 1 : color.a}\r\n step={0.01}\r\n onChange={handleChange}\r\n infoLabel={{\r\n label: \"Alpha\",\r\n info:\r\n color instanceof Color3 ? (\r\n <Body1>\r\n Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the property's alpha\r\n property directly, either in code via property.alpha OR via inspector's transparency section.\r\n </Body1>\r\n ) : undefined,\r\n }}\r\n />\r\n );\r\n};\r\n"]}

package/fluent/primitives/textInput.js CHANGED Viewed

@@ -17,8 +17,10 @@ export const TextInput = (props) => {
         }
     }, [props.value]);
     const validateValue = (val) => {
-        const failsValidator = props.validator && !props.validator(val);
-        return !failsValidator;
+        if (!props.validator) {
+            return true;
+        }
+        return props.validator(val);
     };
     const tryCommitValue = (currVal) => {
         // Only commit if valid and different from last committed value

package/fluent/primitives/textInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textInput.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAEvF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAOvD,MAAM,CAAC,MAAM,SAAS,GAAsC,CAAC,KAAK,EAAE,EAAE;IAClE,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;IACpC,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,KAAK,KAAK,kBAAkB,CAAC,OAAO,EAAE,CAAC;YAC7C,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,8CAA8C;YACrE,kBAAkB,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC;QAC7C,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,aAAa,GAAG,CAAC,GAAW,EAAW,EAAE;QAC3C,~~MAAM~~,~~cAAc~~,~~GAAG,~~KAAK,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;~~QAChE~~,~~OAAO,~~CAAC,~~cAAc,~~CAAC;~~IAC3B,CAAC,CAAC;~~IAEF,MAAM,cAAc,GAAG,CAAC,OAAe,EAAE,EAAE;QACvC,+DAA+D;QAC/D,IAAI,aAAa,CAAC,OAAO,CAAC,IAAI,OAAO,KAAK,kBAAkB,CAAC,OAAO,EAAE,CAAC;YACnE,kBAAkB,CAAC,OAAO,GAAG,OAAO,CAAC;YACrC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAC5B,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,IAAuB,EAAE,EAAE;QACnF,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,CAAC,KAAK,CAAC,kBAAkB,EAAE,CAAC;YAC5B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC3D,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,KAAK,CAAC,kBAAkB,EAAE,CAAC;YAC5B,cAAc,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;IACL,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC7D,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,qEAAqE;QACrE,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,kBAAkB,EAAE,CAAC;YACpD,cAAc,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAmC,EAAE,EAAE;QACvD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,IAAI,KAAK,CAAC,kBAAkB,EAAE,CAAC;YAC3B,cAAc,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAEtG,MAAM,EAAE,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;IACjC,OAAO,CACH,eAAK,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,aAC3D,KAAK,CAAC,SAAS,IAAI,KAAC,SAAS,OAAK,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE,EAAE,GAAI,EACnE,KAAC,WAAW,OACJ,KAAK,EACT,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,EACvC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,eAAe,GAC5B,IACA,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent, KeyboardEvent, ChangeEvent, FocusEvent } from \"react\";\r\nimport { useContext, useEffect, useRef, useState } from \"react\";\r\nimport type { InputOnChangeData } from \"@fluentui/react-components\";\r\nimport { Input as FluentInput, mergeClasses, useId } from \"@fluentui/react-components\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { HandleKeyDown, HandleOnBlur, useInputStyles } from \"./utils\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nexport type TextInputProps = PrimitiveProps<string> & {\r\n validator?: (value: string) => boolean;\r\n validateOnlyOnBlur?: boolean;\r\n};\r\n\r\nexport const TextInput: FunctionComponent<TextInputProps> = (props) => {\r\n TextInput.displayName = \"TextInput\";\r\n const classes = useInputStyles();\r\n const [value, setValue] = useState(props.value);\r\n const lastCommittedValue = useRef(props.value);\r\n const { size } = useContext(ToolContext);\r\n useEffect(() => {\r\n if (props.value !== lastCommittedValue.current) {\r\n setValue(props.value); // Update local state when props.value changes\r\n lastCommittedValue.current = props.value;\r\n }\r\n }, [props.value]);\r\n\r\n const validateValue = (val: string): boolean => {\r\n ~~const~~ ~~failsValidator =~~ props.validator && ~~!props.validator(val)~~;\r\n return ~~!failsValidator~~;\r\n };\r\n\r\n const tryCommitValue = (currVal: string) => {\r\n // Only commit if valid and different from last committed value\r\n if (validateValue(currVal) && currVal !== lastCommittedValue.current) {\r\n lastCommittedValue.current = currVal;\r\n props.onChange(currVal);\r\n }\r\n };\r\n\r\n const handleChange = (event: ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {\r\n event.stopPropagation();\r\n setValue(data.value);\r\n if (!props.validateOnlyOnBlur) {\r\n tryCommitValue(data.value);\r\n }\r\n };\r\n\r\n const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\r\n event.stopPropagation();\r\n if (!props.validateOnlyOnBlur) {\r\n tryCommitValue(event.currentTarget.value);\r\n }\r\n };\r\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n HandleKeyDown(event);\r\n // When validateOnlyOnBlur is set, also commit on Enter for better UX\r\n if (event.key === \"Enter\" && props.validateOnlyOnBlur) {\r\n tryCommitValue(event.currentTarget.value);\r\n }\r\n };\r\n\r\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\r\n HandleOnBlur(event);\r\n if (props.validateOnlyOnBlur) {\r\n tryCommitValue(event.currentTarget.value);\r\n }\r\n };\r\n\r\n const mergedClassName = mergeClasses(classes.inputFill, !validateValue(value) ? classes.invalid : \"\");\r\n\r\n const id = useId(\"input-button\");\r\n return (\r\n <div className={mergeClasses(classes.container, props.className)}>\r\n {props.infoLabel && <InfoLabel {...props.infoLabel} htmlFor={id} />}\r\n <FluentInput\r\n {...props}\r\n input={{ className: classes.inputSlot }}\r\n id={id}\r\n size={size}\r\n value={value}\r\n onChange={handleChange}\r\n onKeyUp={handleKeyUp}\r\n onKeyDown={handleKeyDown}\r\n onBlur={handleBlur}\r\n className={mergedClassName}\r\n />\r\n </div>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"textInput.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, KeyboardEvent, ChangeEvent, FocusEvent } from \"react\";\r\nimport { useContext, useEffect, useRef, useState } from \"react\";\r\nimport type { InputOnChangeData } from \"@fluentui/react-components\";\r\nimport { Input as FluentInput, mergeClasses, useId } from \"@fluentui/react-components\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { HandleKeyDown, HandleOnBlur, useInputStyles } from \"./utils\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nexport type TextInputProps = PrimitiveProps<string> & {\r\n validator?: (value: string) => boolean;\r\n validateOnlyOnBlur?: boolean;\r\n};\r\n\r\nexport const TextInput: FunctionComponent<TextInputProps> = (props) => {\r\n TextInput.displayName = \"TextInput\";\r\n const classes = useInputStyles();\r\n const [value, setValue] = useState(props.value);\r\n const lastCommittedValue = useRef(props.value);\r\n const { size } = useContext(ToolContext);\r\n useEffect(() => {\r\n if (props.value !== lastCommittedValue.current) {\r\n setValue(props.value); // Update local state when props.value changes\r\n lastCommittedValue.current = props.value;\r\n }\r\n }, [props.value]);\r\n\r\n const validateValue = (val: string): boolean => {\r\n if (!props.validator) {\r\n return true;\r\n }\r\n return props.validator(val);\r\n };\r\n\r\n const tryCommitValue = (currVal: string) => {\r\n // Only commit if valid and different from last committed value\r\n if (validateValue(currVal) && currVal !== lastCommittedValue.current) {\r\n lastCommittedValue.current = currVal;\r\n props.onChange(currVal);\r\n }\r\n };\r\n\r\n const handleChange = (event: ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {\r\n event.stopPropagation();\r\n setValue(data.value);\r\n if (!props.validateOnlyOnBlur) {\r\n tryCommitValue(data.value);\r\n }\r\n };\r\n\r\n const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\r\n event.stopPropagation();\r\n if (!props.validateOnlyOnBlur) {\r\n tryCommitValue(event.currentTarget.value);\r\n }\r\n };\r\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n HandleKeyDown(event);\r\n // When validateOnlyOnBlur is set, also commit on Enter for better UX\r\n if (event.key === \"Enter\" && props.validateOnlyOnBlur) {\r\n tryCommitValue(event.currentTarget.value);\r\n }\r\n };\r\n\r\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\r\n HandleOnBlur(event);\r\n if (props.validateOnlyOnBlur) {\r\n tryCommitValue(event.currentTarget.value);\r\n }\r\n };\r\n\r\n const mergedClassName = mergeClasses(classes.inputFill, !validateValue(value) ? classes.invalid : \"\");\r\n\r\n const id = useId(\"input-button\");\r\n return (\r\n <div className={mergeClasses(classes.container, props.className)}>\r\n {props.infoLabel && <InfoLabel {...props.infoLabel} htmlFor={id} />}\r\n <FluentInput\r\n {...props}\r\n input={{ className: classes.inputSlot }}\r\n id={id}\r\n size={size}\r\n value={value}\r\n onChange={handleChange}\r\n onKeyUp={handleKeyUp}\r\n onKeyDown={handleKeyDown}\r\n onBlur={handleBlur}\r\n className={mergedClassName}\r\n />\r\n </div>\r\n );\r\n};\r\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@onerjs/shared-ui-components",
-    "version": "8.43.1",
+    "version": "8.43.3",
     "main": "index.js",
     "module": "index.js",
     "types": "index.d.ts",