@babylonjs/shared-ui-components 8.44.1 → 8.45.1

package/fluent/primitives/colorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/colorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsdoc/require-returns */\r\n/* eslint-disable @typescript-eslint/naming-convention */\r\nimport { forwardRef, useState, useEffect, useCallback, useContext } 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});\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 handleColorPickerChange: FluentColorPickerProps[\"onColorChange\"] = (_, data) => {\r\n        let color: Color3 | Color4 = Color3.FromHSV(data.color.h, data.color.s, data.color.v);\r\n        if (value instanceof Color4) {\r\n            color = Color4.FromColor3(color, data.color.a ?? 1);\r\n        }\r\n        handleChange(color);\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    return (\r\n        <Popover\r\n            trigger={\r\n                <ColorSwatch\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={color.toHexString()}\r\n                    value={color.toHexString().slice(1)}\r\n                />\r\n            }\r\n        >\r\n            <div className={classes.container}>\r\n                <FluentColorPicker className={classes.colorPicker} color={rgbaToHsv(color)} 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, Gamma Hex, Linear Hex */}\r\n                <div className={classes.row}>\r\n                    <div className={classes.previewColor} style={{ backgroundColor: color.toHexString() }} />\r\n                    <NumberDropdown\r\n                        className={classes.inputField}\r\n                        infoLabel={{\r\n                            label: \"Color Space\",\r\n                            info: <Body1>Today this is not mutable as the color space is determined by the entity. Soon we will allow swapping</Body1>,\r\n                        }}\r\n                        options={[\r\n                            { label: \"Gamma\", value: 0 },\r\n                            { label: \"Linear\", value: 1 },\r\n                        ]}\r\n                        disabled={true}\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: <Body1>We will introduce this functionality soon!</Body1>,\r\n                        }}\r\n                        options={[\r\n                            { label: \"Int\", value: 0 },\r\n                            { label: \"Float\", value: 1 },\r\n                        ]}\r\n                        disabled={true}\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={color} rgbKey=\"r\" onChange={handleChange} />\r\n                    <InputRgbField title=\"Green\" value={color} rgbKey=\"g\" onChange={handleChange} />\r\n                    <InputRgbField title=\"Blue\" value={color} rgbKey=\"b\" onChange={handleChange} />\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={color} hsvKey=\"h\" max={360} onChange={handleChange} />\r\n                    <InputHsvField title=\"Saturation\" value={color} hsvKey=\"s\" max={100} scale={100} onChange={handleChange} />\r\n                    <InputHsvField title=\"Value\" value={color} hsvKey=\"v\" max={100} scale={100} onChange={handleChange} />\r\n                </div>\r\n\r\n                <div className={classes.inputRow}>\r\n                    <InputHexField title=\"Hexadecimal\" linearHex={isLinear} isLinearMode={isLinear} value={color} onChange={handleChange} />\r\n                </div>\r\n            </div>\r\n        </Popover>\r\n    );\r\n});\r\n\r\nexport type InputHexProps = PrimitiveProps<Color3 | Color4> & {\r\n    linearHex?: boolean;\r\n    isLinearMode?: boolean;\r\n};\r\n/**\r\n * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space\r\n * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange\r\n *\r\n * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space\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, linearHex, isLinearMode } = props;\r\n\r\n    return (\r\n        <TextInput\r\n            disabled={linearHex ? !isLinearMode : false}\r\n            className={classes.inputField}\r\n            value={linearHex ? value.toLinearSpace().toHexString() : value.toHexString()}\r\n            validator={ValidateColorHex}\r\n            onChange={(val) => (linearHex ? onChange(Color3.FromHexString(val).toGammaSpace()) : onChange(Color3.FromHexString(val)))}\r\n            infoLabel={\r\n                title\r\n                    ? {\r\n                          label: title,\r\n                          // If not representing a linearHex, no info is needed.\r\n                          info: !props.linearHex ? undefined : !isLinearMode ? ( // If representing a linear hex but we are in gammaMode, simple message explaining why linearHex is disabled\r\n                              <> This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view </>\r\n                          ) : (\r\n                              // If representing a linear hex and we are in linearMode, give information about how to use these hex values\r\n                              <>\r\n                                  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\r\n                                  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\r\n                                  gamma space so that the color chosen here will match the color seen in your entity.\r\n                                  <br />\r\n                                  If you want to copy/paste the HEX into your code, you can either use\r\n                                  <Body1Strong>Color3.FromHexString(LINEAR_HEX)</Body1Strong>\r\n                                  <br />\r\n                                  or\r\n                                  <br />\r\n                                  <Body1Strong>Color3.FromHexString(GAMMA_HEX).toLinearSpace()</Body1Strong>\r\n                                  <br />\r\n                                  <br />\r\n                                  <Link url=\"https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/\" value=\"Read more in our docs!\" />\r\n                              </>\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};\r\n\r\nconst InputRgbField: FunctionComponent<InputRgbFieldProps> = (props) => {\r\n    const { value, onChange, title, rgbKey } = 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] = val / 255.0; // Convert to 0-1 range\r\n            onChange(newColor);\r\n        },\r\n        [value, onChange, rgbKey]\r\n    );\r\n\r\n    return (\r\n        <SpinButton\r\n            title={title}\r\n            infoLabel={title ? { label: title } : undefined}\r\n            className={classes.inputField}\r\n            min={0}\r\n            max={255}\r\n            value={Math.round(value[rgbKey] * 255)}\r\n            forceInt\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    max: number;\r\n    scale?: number;\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, max, onChange, scale = 1 } = props;\r\n\r\n    const classes = useColorPickerStyles();\r\n\r\n    const handleChange = useCallback(\r\n        (val: number) => {\r\n            // Convert current color to HSV, update the new hsv value, then call onChange prop\r\n            const hsv = rgbaToHsv(value);\r\n            hsv[hsvKey] = val / scale;\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, scale]\r\n    );\r\n\r\n    return (\r\n        <SpinButton\r\n            infoLabel={title ? { label: title } : undefined}\r\n            title={title}\r\n            className={classes.inputField}\r\n            min={0}\r\n            max={max}\r\n            value={Math.round(rgbaToHsv(value)[hsvKey] * scale)}\r\n            forceInt\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                return newColor;\r\n            } else {\r\n                return Color4.FromColor3(color, value);\r\n            }\r\n        },\r\n        [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                        <>\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 entity's alpha\r\n                            property directly, either in code via entity.alpha OR via inspector's transparency section.\r\n                        </>\r\n                    ) : undefined,\r\n            }}\r\n        />\r\n    );\r\n};\r\n"]}
+{"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,MAAM,OAAO,CAAC;AAEjF,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,4CAA8B;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,uBAAuB,GAA4C,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;QACjF,IAAI,KAAK,GAAoB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACtF,IAAI,KAAK,YAAY,MAAM,EAAE,CAAC;YAC1B,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QACxD,CAAC;QACD,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,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,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,KAAK,CAAC,WAAW,EAAE,EAC1B,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,GACrC,YAGN,eAAK,SAAS,EAAE,OAAO,CAAC,SAAS,aAC7B,MAAC,iBAAiB,IAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,uBAAuB,aAC9G,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,KAAK,CAAC,WAAW,EAAE,EAAE,GAAI,EACzF,KAAC,cAAc,IACX,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,SAAS,EAAE;gCACP,KAAK,EAAE,aAAa;gCACpB,IAAI,EAAE,KAAC,KAAK,wHAA8G;6BAC7H,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,QAAQ,EAAE,IAAI,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,KAAC,KAAK,6DAAmD;6BAClE,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,QAAQ,EAAE,IAAI,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,KAAK,EAAE,MAAM,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,GAAI,EAC9E,KAAC,aAAa,IAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,GAAI,EAChF,KAAC,aAAa,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,GAAI,EAC/E,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,KAAK,EAAE,MAAM,EAAC,GAAG,EAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,YAAY,GAAI,EACxF,KAAC,aAAa,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC,GAAG,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,YAAY,GAAI,EAC3G,KAAC,aAAa,IAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC,GAAG,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,YAAY,GAAI,IACpG,EAEN,cAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,YAC5B,KAAC,aAAa,IAAC,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,GAAI,GACtH,IACJ,GACA,CACb,CAAC;AACN,CAAC,CAAC,CAAC;AAMH;;;;;;;GAOG;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,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAElE,OAAO,CACH,KAAC,SAAS,IACN,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,EAC3C,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,EAC5E,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EACzH,SAAS,EACL,KAAK;YACD,CAAC,CAAC;gBACI,KAAK,EAAE,KAAK;gBACZ,sDAAsD;gBACtD,IAAI,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,4GAA4G;gBAC/J,iKAAqI,CACxI,CAAC,CAAC,CAAC;gBACA,4GAA4G;gBAC5G,uZAII,cAAM,0EAEN,KAAC,WAAW,mDAA+C,EAC3D,cAAM,QAEN,cAAM,EACN,KAAC,WAAW,kEAA8D,EAC1E,cAAM,EACN,cAAM,EACN,KAAC,IAAI,IAAC,GAAG,EAAC,yEAAyE,EAAC,KAAK,EAAC,wBAAwB,GAAG,IACtH,CACN;aACJ;YACH,CAAC,CAAC,SAAS,GAErB,CACL,CAAC;AACN,CAAC,CAAC;AAOF,MAAM,aAAa,GAA0C,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACjD,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,GAAG,GAAG,KAAK,CAAC,CAAC,uBAAuB;QACvD,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAC5B,CAAC;IAEF,OAAO,CACH,KAAC,UAAU,IACP,KAAK,EAAE,KAAK,EACZ,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,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,EACtC,QAAQ,QACR,QAAQ,EAAE,YAAY,GACxB,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;AASD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAA0C,CAAC,KAAK,EAAE,EAAE;IAC1E,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;IAEjE,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IAEvC,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,GAAW,EAAE,EAAE;QACZ,kFAAkF;QAClF,MAAM,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAC7B,GAAG,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,KAAK,CAAC;QAC1B,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,KAAK,CAAC,CACnC,CAAC;IAEF,OAAO,CACH,KAAC,UAAU,IACP,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EAC/C,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,EACnD,QAAQ,QACR,QAAQ,EAAE,YAAY,GACxB,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,OAAO,QAAQ,CAAC;QACpB,CAAC;aAAM,CAAC;YACJ,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC3C,CAAC;IACL,CAAC,EACD,CAAC,QAAQ,CAAC,CACb,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,kRAGG,CACN,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 } 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 handleColorPickerChange: FluentColorPickerProps[\"onColorChange\"] = (_, data) => {\r\n        let color: Color3 | Color4 = Color3.FromHSV(data.color.h, data.color.s, data.color.v);\r\n        if (value instanceof Color4) {\r\n            color = Color4.FromColor3(color, data.color.a ?? 1);\r\n        }\r\n        handleChange(color);\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    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={color.toHexString()}\r\n                    value={color.toHexString().slice(1)}\r\n                />\r\n            }\r\n        >\r\n            <div className={classes.container}>\r\n                <FluentColorPicker className={classes.colorPicker} color={rgbaToHsv(color)} 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, Gamma Hex, Linear Hex */}\r\n                <div className={classes.row}>\r\n                    <div className={classes.previewColor} style={{ backgroundColor: color.toHexString() }} />\r\n                    <NumberDropdown\r\n                        className={classes.inputField}\r\n                        infoLabel={{\r\n                            label: \"Color Space\",\r\n                            info: <Body1>Today this is not mutable as the color space is determined by the entity. Soon we will allow swapping</Body1>,\r\n                        }}\r\n                        options={[\r\n                            { label: \"Gamma\", value: 0 },\r\n                            { label: \"Linear\", value: 1 },\r\n                        ]}\r\n                        disabled={true}\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: <Body1>We will introduce this functionality soon!</Body1>,\r\n                        }}\r\n                        options={[\r\n                            { label: \"Int\", value: 0 },\r\n                            { label: \"Float\", value: 1 },\r\n                        ]}\r\n                        disabled={true}\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={color} rgbKey=\"r\" onChange={handleChange} />\r\n                    <InputRgbField title=\"Green\" value={color} rgbKey=\"g\" onChange={handleChange} />\r\n                    <InputRgbField title=\"Blue\" value={color} rgbKey=\"b\" onChange={handleChange} />\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={color} hsvKey=\"h\" max={360} onChange={handleChange} />\r\n                    <InputHsvField title=\"Saturation\" value={color} hsvKey=\"s\" max={100} scale={100} onChange={handleChange} />\r\n                    <InputHsvField title=\"Value\" value={color} hsvKey=\"v\" max={100} scale={100} onChange={handleChange} />\r\n                </div>\r\n\r\n                <div className={classes.inputRow}>\r\n                    <InputHexField title=\"Hexadecimal\" linearHex={isLinear} isLinearMode={isLinear} value={color} onChange={handleChange} />\r\n                </div>\r\n            </div>\r\n        </Popover>\r\n    );\r\n});\r\n\r\nexport type InputHexProps = PrimitiveProps<Color3 | Color4> & {\r\n    linearHex?: boolean;\r\n    isLinearMode?: boolean;\r\n};\r\n/**\r\n * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space\r\n * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange\r\n *\r\n * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space\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, linearHex, isLinearMode } = props;\r\n\r\n    return (\r\n        <TextInput\r\n            disabled={linearHex ? !isLinearMode : false}\r\n            className={classes.inputField}\r\n            value={linearHex ? value.toLinearSpace().toHexString() : value.toHexString()}\r\n            validator={ValidateColorHex}\r\n            onChange={(val) => (linearHex ? onChange(Color3.FromHexString(val).toGammaSpace()) : onChange(Color3.FromHexString(val)))}\r\n            infoLabel={\r\n                title\r\n                    ? {\r\n                          label: title,\r\n                          // If not representing a linearHex, no info is needed.\r\n                          info: !props.linearHex ? undefined : !isLinearMode ? ( // If representing a linear hex but we are in gammaMode, simple message explaining why linearHex is disabled\r\n                              <> This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view </>\r\n                          ) : (\r\n                              // If representing a linear hex and we are in linearMode, give information about how to use these hex values\r\n                              <>\r\n                                  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\r\n                                  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\r\n                                  gamma space so that the color chosen here will match the color seen in your entity.\r\n                                  <br />\r\n                                  If you want to copy/paste the HEX into your code, you can either use\r\n                                  <Body1Strong>Color3.FromHexString(LINEAR_HEX)</Body1Strong>\r\n                                  <br />\r\n                                  or\r\n                                  <br />\r\n                                  <Body1Strong>Color3.FromHexString(GAMMA_HEX).toLinearSpace()</Body1Strong>\r\n                                  <br />\r\n                                  <br />\r\n                                  <Link url=\"https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/\" value=\"Read more in our docs!\" />\r\n                              </>\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};\r\n\r\nconst InputRgbField: FunctionComponent<InputRgbFieldProps> = (props) => {\r\n    const { value, onChange, title, rgbKey } = 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] = val / 255.0; // Convert to 0-1 range\r\n            onChange(newColor);\r\n        },\r\n        [value, onChange, rgbKey]\r\n    );\r\n\r\n    return (\r\n        <SpinButton\r\n            title={title}\r\n            infoLabel={title ? { label: title } : undefined}\r\n            className={classes.inputField}\r\n            min={0}\r\n            max={255}\r\n            value={Math.round(value[rgbKey] * 255)}\r\n            forceInt\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    max: number;\r\n    scale?: number;\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, max, onChange, scale = 1 } = props;\r\n\r\n    const classes = useColorPickerStyles();\r\n\r\n    const handleChange = useCallback(\r\n        (val: number) => {\r\n            // Convert current color to HSV, update the new hsv value, then call onChange prop\r\n            const hsv = rgbaToHsv(value);\r\n            hsv[hsvKey] = val / scale;\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, scale]\r\n    );\r\n\r\n    return (\r\n        <SpinButton\r\n            infoLabel={title ? { label: title } : undefined}\r\n            title={title}\r\n            className={classes.inputField}\r\n            min={0}\r\n            max={max}\r\n            value={Math.round(rgbaToHsv(value)[hsvKey] * scale)}\r\n            forceInt\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                return newColor;\r\n            } else {\r\n                return Color4.FromColor3(color, value);\r\n            }\r\n        },\r\n        [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                        <>\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 entity's alpha\r\n                            property directly, either in code via entity.alpha OR via inspector's transparency section.\r\n                        </>\r\n                    ) : undefined,\r\n            }}\r\n        />\r\n    );\r\n};\r\n"]}

package/fluent/primitives/comboBox.js

@@ -19,6 +19,11 @@ const useStyles = makeStyles({
     input: {
         minWidth: 0,
     },
+    listbox: {
+        width: "fit-content",
+        minWidth: "fit-content",
+        maxWidth: "350px",
+    },
 });
 /**
  * Wrapper around a Fluent ComboBox that allows for filtering options.
@@ -48,6 +53,6 @@ export const ComboBox = (props) => {
         setQuery(data.optionText ?? "");
         data.optionValue && props.onChange(data.optionValue);
     };
-    return (_jsxs("div", { className: styles.root, children: [_jsx("label", { id: comboId, children: props.label }), _jsx(FluentComboBox, { size: size, root: { className: styles.comboBox }, input: { className: styles.input }, onOptionSelect: onOptionSelect, "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
+    return (_jsxs("div", { className: styles.root, children: [_jsx("label", { id: comboId, children: props.label }), _jsx(FluentComboBox, { size: size, root: { className: styles.comboBox }, input: { className: styles.input }, listbox: { className: styles.listbox }, onOptionSelect: onOptionSelect, "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
 };
 //# sourceMappingURL=comboBox.js.map

package/fluent/primitives/comboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"comboBox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/comboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { useState, useContext, useEffect } from \"react\";\r\nimport { Combobox as FluentComboBox, makeStyles, useComboboxFilter, useId, Option } from \"@fluentui/react-components\";\r\nimport type { OptionOnSelectData, SelectionEvents } from \"@fluentui/react-components\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { CustomTokens } from \"./utils\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nconst useStyles = makeStyles({\r\n    root: {\r\n        display: \"grid\",\r\n        gridTemplateRows: \"repeat(1fr)\",\r\n        justifyItems: \"start\",\r\n        gap: \"2px\",\r\n        maxWidth: \"400px\",\r\n    },\r\n    comboBox: {\r\n        width: CustomTokens.inputWidth,\r\n        minWidth: CustomTokens.inputWidth,\r\n        boxSizing: \"border-box\",\r\n    },\r\n    input: {\r\n        minWidth: 0,\r\n    },\r\n});\r\n\r\n/**\r\n * An option object for the ComboBox with separate label and value.\r\n */\r\nexport type ComboBoxOption = {\r\n    /**\r\n     * Defines the visible part of the option\r\n     */\r\n    label: string;\r\n    /**\r\n     * Defines the value part of the option\r\n     */\r\n    value: string;\r\n};\r\n\r\nexport type ComboBoxProps = PrimitiveProps<string> & {\r\n    /**\r\n     * Label for the ComboBox\r\n     */\r\n    label: string;\r\n    /**\r\n     * Options to display as label/value pairs\r\n     */\r\n    options: ComboBoxOption[];\r\n};\r\n\r\n/**\r\n * Wrapper around a Fluent ComboBox that allows for filtering options.\r\n * @param props\r\n * @returns\r\n */\r\nexport const ComboBox: FunctionComponent<ComboBoxProps> = (props) => {\r\n    ComboBox.displayName = \"ComboBox\";\r\n    const comboId = useId();\r\n    const styles = useStyles();\r\n    const { size } = useContext(ToolContext);\r\n\r\n    // Find the label for the current value\r\n    const getLabel = (value: string) => props.options.find((opt) => opt.value === value)?.label ?? \"\";\r\n\r\n    const [query, setQuery] = useState(getLabel(props.value ?? \"\"));\r\n\r\n    useEffect(() => {\r\n        setQuery(getLabel(props.value ?? \"\"));\r\n    }, [props.value, props.options]);\r\n\r\n    // Convert to Fluent's { children, value } format\r\n    const normalizedOptions = props.options.map((opt) => ({ children: opt.label, value: opt.value }));\r\n\r\n    const children = useComboboxFilter(query, normalizedOptions, {\r\n        noOptionsMessage: \"No items match your search.\",\r\n        optionToReactKey: (option) => option.value,\r\n        optionToText: (option) => option.children,\r\n        renderOption: (option) => (\r\n            <Option key={option.value} value={option.value} text={option.children}>\r\n                {option.children}\r\n            </Option>\r\n        ),\r\n    });\r\n\r\n    const onOptionSelect = (_e: SelectionEvents, data: OptionOnSelectData) => {\r\n        setQuery(data.optionText ?? \"\");\r\n        data.optionValue && props.onChange(data.optionValue);\r\n    };\r\n\r\n    return (\r\n        <div className={styles.root}>\r\n            <label id={comboId}>{props.label}</label>\r\n            <FluentComboBox\r\n                size={size}\r\n                root={{ className: styles.comboBox }}\r\n                input={{ className: styles.input }}\r\n                onOptionSelect={onOptionSelect}\r\n                aria-labelledby={comboId}\r\n                placeholder=\"Search..\"\r\n                onChange={(ev) => setQuery(ev.target.value)}\r\n                value={query}\r\n            >\r\n                {children}\r\n            </FluentComboBox>\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"comboBox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/comboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { useState, useContext, useEffect } from \"react\";\r\nimport { Combobox as FluentComboBox, makeStyles, useComboboxFilter, useId, Option } from \"@fluentui/react-components\";\r\nimport type { OptionOnSelectData, SelectionEvents } from \"@fluentui/react-components\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { CustomTokens } from \"./utils\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nconst useStyles = makeStyles({\r\n    root: {\r\n        display: \"grid\",\r\n        gridTemplateRows: \"repeat(1fr)\",\r\n        justifyItems: \"start\",\r\n        gap: \"2px\",\r\n        maxWidth: \"400px\",\r\n    },\r\n    comboBox: {\r\n        width: CustomTokens.inputWidth,\r\n        minWidth: CustomTokens.inputWidth,\r\n        boxSizing: \"border-box\",\r\n    },\r\n    input: {\r\n        minWidth: 0,\r\n    },\r\n    listbox: {\r\n        width: \"fit-content\",\r\n        minWidth: \"fit-content\",\r\n        maxWidth: \"350px\",\r\n    },\r\n});\r\n\r\n/**\r\n * An option object for the ComboBox with separate label and value.\r\n */\r\nexport type ComboBoxOption = {\r\n    /**\r\n     * Defines the visible part of the option\r\n     */\r\n    label: string;\r\n    /**\r\n     * Defines the value part of the option\r\n     */\r\n    value: string;\r\n};\r\n\r\nexport type ComboBoxProps = PrimitiveProps<string> & {\r\n    /**\r\n     * Label for the ComboBox\r\n     */\r\n    label: string;\r\n    /**\r\n     * Options to display as label/value pairs\r\n     */\r\n    options: ComboBoxOption[];\r\n};\r\n\r\n/**\r\n * Wrapper around a Fluent ComboBox that allows for filtering options.\r\n * @param props\r\n * @returns\r\n */\r\nexport const ComboBox: FunctionComponent<ComboBoxProps> = (props) => {\r\n    ComboBox.displayName = \"ComboBox\";\r\n    const comboId = useId();\r\n    const styles = useStyles();\r\n    const { size } = useContext(ToolContext);\r\n\r\n    // Find the label for the current value\r\n    const getLabel = (value: string) => props.options.find((opt) => opt.value === value)?.label ?? \"\";\r\n\r\n    const [query, setQuery] = useState(getLabel(props.value ?? \"\"));\r\n\r\n    useEffect(() => {\r\n        setQuery(getLabel(props.value ?? \"\"));\r\n    }, [props.value, props.options]);\r\n\r\n    // Convert to Fluent's { children, value } format\r\n    const normalizedOptions = props.options.map((opt) => ({ children: opt.label, value: opt.value }));\r\n\r\n    const children = useComboboxFilter(query, normalizedOptions, {\r\n        noOptionsMessage: \"No items match your search.\",\r\n        optionToReactKey: (option) => option.value,\r\n        optionToText: (option) => option.children,\r\n        renderOption: (option) => (\r\n            <Option key={option.value} value={option.value} text={option.children}>\r\n                {option.children}\r\n            </Option>\r\n        ),\r\n    });\r\n\r\n    const onOptionSelect = (_e: SelectionEvents, data: OptionOnSelectData) => {\r\n        setQuery(data.optionText ?? \"\");\r\n        data.optionValue && props.onChange(data.optionValue);\r\n    };\r\n\r\n    return (\r\n        <div className={styles.root}>\r\n            <label id={comboId}>{props.label}</label>\r\n            <FluentComboBox\r\n                size={size}\r\n                root={{ className: styles.comboBox }}\r\n                input={{ className: styles.input }}\r\n                listbox={{ className: styles.listbox }}\r\n                onOptionSelect={onOptionSelect}\r\n                aria-labelledby={comboId}\r\n                placeholder=\"Search..\"\r\n                onChange={(ev) => setQuery(ev.target.value)}\r\n                value={query}\r\n            >\r\n                {children}\r\n            </FluentComboBox>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/contextMenu.d.ts

@@ -0,0 +1,105 @@
+import type { ReactElement } from "react";
+import type { MenuProps as FluentMenuProps } from "@fluentui/react-components";
+import type { FluentIcon } from "@fluentui/react-icons";
+import type { BasePrimitiveProps } from "./primitive.js";
+/**
+ * Represents a single menu item in the context menu.
+ */
+export type ContextMenuItemProps = {
+    /**
+     * Unique key for the menu item.
+     */
+    key: string;
+    /**
+     * The text label displayed for the menu item.
+     */
+    label: string;
+    /**
+     * Optional icon to display alongside the menu item.
+     */
+    icon?: FluentIcon;
+    /**
+     * Called when the menu item is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Whether the menu item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Optional secondary text displayed alongside the label.
+     */
+    secondaryContent?: string;
+};
+/**
+ * Represents a divider in the context menu.
+ */
+export type ContextMenuDividerProps = {
+    /**
+     * Unique key for the divider.
+     */
+    key: string;
+    /**
+     * Indicates this is a divider item.
+     */
+    type: "divider";
+};
+/**
+ * Represents a group of menu items with an optional header.
+ */
+export type ContextMenuGroupProps = {
+    /**
+     * Unique key for the group.
+     */
+    key: string;
+    /**
+     * Indicates this is a group item.
+     */
+    type: "group";
+    /**
+     * Optional header text for the group.
+     */
+    header?: string;
+    /**
+     * The menu items within the group.
+     */
+    items: ContextMenuItem[];
+};
+/**
+ * Union type representing all possible menu items.
+ */
+export type ContextMenuItem = ContextMenuItemProps | ContextMenuDividerProps | ContextMenuGroupProps;
+type ContextMenuWithIconProps = {
+    /**
+     * Icon to use as the trigger button.
+     */
+    icon: FluentIcon;
+    trigger?: never;
+};
+type ContextMenuWithTriggerProps = {
+    icon?: never;
+    /**
+     * Custom trigger element for opening the menu.
+     */
+    trigger: ReactElement;
+};
+export type ContextMenuProps = BasePrimitiveProps & (ContextMenuWithIconProps | ContextMenuWithTriggerProps) & {
+    /**
+     * Array of menu items to display.
+     */
+    items: ContextMenuItem[];
+    /**
+     * Positioning of the menu relative to the trigger.
+     */
+    positioning?: FluentMenuProps["positioning"];
+    /**
+     * Called when the menu open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * A wrapper around Fluent UI's Menu component providing a simplified API for context menus.
+ * Supports menu items with icons, dividers, and grouped items.
+ */
+export declare const ContextMenu: import("react").ForwardRefExoticComponent<ContextMenuProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/fluent/primitives/contextMenu.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, MenuDivider, MenuGroup, MenuGroupHeader, makeStyles, tokens } from "@fluentui/react-components";
+import { Button } from "shared-ui-components/fluent/primitives/button";
+const useStyles = makeStyles({
+    menuPopover: {
+        minWidth: "160px",
+    },
+    menuItem: {
+        cursor: "pointer",
+    },
+    menuItemIcon: {
+        color: tokens.colorNeutralForeground2,
+    },
+});
+const IsDivider = (item) => {
+    return "type" in item && item.type === "divider";
+};
+const IsGroup = (item) => {
+    return "type" in item && item.type === "group";
+};
+const RenderMenuItem = (item, classes) => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const Icon = item.icon;
+    return (_jsx(MenuItem, { className: classes.menuItem, icon: Icon ? _jsx(Icon, { className: classes.menuItemIcon }) : undefined, onClick: item.onClick, disabled: item.disabled, secondaryContent: item.secondaryContent, children: item.label }, item.key));
+};
+const RenderMenuItems = (items, classes) => {
+    return items.map((item) => {
+        if (IsDivider(item)) {
+            return _jsx(MenuDivider, {}, item.key);
+        }
+        if (IsGroup(item)) {
+            return (_jsxs(MenuGroup, { children: [item.header && _jsx(MenuGroupHeader, { children: item.header }), RenderMenuItems(item.items, classes)] }, item.key));
+        }
+        return RenderMenuItem(item, classes);
+    });
+};
+/**
+ * A wrapper around Fluent UI's Menu component providing a simplified API for context menus.
+ * Supports menu items with icons, dividers, and grouped items.
+ */
+export const ContextMenu = forwardRef((props, ref) => {
+    const { items, onOpenChange, disabled } = props;
+    const [open, setOpen] = useState(false);
+    const classes = useStyles();
+    const handleOpenChange = (_, data) => {
+        setOpen(data.open);
+        onOpenChange?.(data.open);
+    };
+    return (_jsxs(Menu, { openOnContext: true, open: open, onOpenChange: handleOpenChange, children: [_jsx(MenuTrigger, { disableButtonEnhancement: true, children: props.trigger ?? (_jsx(Button, { ref: ref, icon: props.icon, onClick: (e) => {
+                        e?.stopPropagation();
+                        setOpen(true);
+                    }, disabled: disabled })) }), _jsx(MenuPopover, { className: classes.menuPopover, children: _jsx(MenuList, { children: RenderMenuItems(items, classes) }) })] }));
+});
+ContextMenu.displayName = "ContextMenu";
+//# sourceMappingURL=contextMenu.js.map

package/fluent/primitives/contextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextMenu.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/contextMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\r\nimport { forwardRef, useState } from \"react\";\r\nimport { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, MenuDivider, MenuGroup, MenuGroupHeader, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport type { MenuProps as FluentMenuProps } from \"@fluentui/react-components\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\nimport { Button } from \"shared-ui-components/fluent/primitives/button\";\r\nimport type { BasePrimitiveProps } from \"./primitive\";\r\n\r\nconst useStyles = makeStyles({\r\n    menuPopover: {\r\n        minWidth: \"160px\",\r\n    },\r\n    menuItem: {\r\n        cursor: \"pointer\",\r\n    },\r\n    menuItemIcon: {\r\n        color: tokens.colorNeutralForeground2,\r\n    },\r\n});\r\n\r\n/**\r\n * Represents a single menu item in the context menu.\r\n */\r\nexport type ContextMenuItemProps = {\r\n    /**\r\n     * Unique key for the menu item.\r\n     */\r\n    key: string;\r\n    /**\r\n     * The text label displayed for the menu item.\r\n     */\r\n    label: string;\r\n    /**\r\n     * Optional icon to display alongside the menu item.\r\n     */\r\n    icon?: FluentIcon;\r\n    /**\r\n     * Called when the menu item is clicked.\r\n     */\r\n    onClick?: () => void;\r\n    /**\r\n     * Whether the menu item is disabled.\r\n     */\r\n    disabled?: boolean;\r\n    /**\r\n     * Optional secondary text displayed alongside the label.\r\n     */\r\n    secondaryContent?: string;\r\n};\r\n\r\n/**\r\n * Represents a divider in the context menu.\r\n */\r\nexport type ContextMenuDividerProps = {\r\n    /**\r\n     * Unique key for the divider.\r\n     */\r\n    key: string;\r\n    /**\r\n     * Indicates this is a divider item.\r\n     */\r\n    type: \"divider\";\r\n};\r\n\r\n/**\r\n * Represents a group of menu items with an optional header.\r\n */\r\nexport type ContextMenuGroupProps = {\r\n    /**\r\n     * Unique key for the group.\r\n     */\r\n    key: string;\r\n    /**\r\n     * Indicates this is a group item.\r\n     */\r\n    type: \"group\";\r\n    /**\r\n     * Optional header text for the group.\r\n     */\r\n    header?: string;\r\n    /**\r\n     * The menu items within the group.\r\n     */\r\n    items: ContextMenuItem[];\r\n};\r\n\r\n/**\r\n * Union type representing all possible menu items.\r\n */\r\nexport type ContextMenuItem = ContextMenuItemProps | ContextMenuDividerProps | ContextMenuGroupProps;\r\n\r\ntype ContextMenuWithIconProps = {\r\n    /**\r\n     * Icon to use as the trigger button.\r\n     */\r\n    icon: FluentIcon;\r\n    trigger?: never;\r\n};\r\n\r\ntype ContextMenuWithTriggerProps = {\r\n    icon?: never;\r\n    /**\r\n     * Custom trigger element for opening the menu.\r\n     */\r\n    trigger: ReactElement;\r\n};\r\n\r\nexport type ContextMenuProps = BasePrimitiveProps &\r\n    (ContextMenuWithIconProps | ContextMenuWithTriggerProps) & {\r\n        /**\r\n         * Array of menu items to display.\r\n         */\r\n        items: ContextMenuItem[];\r\n        /**\r\n         * Positioning of the menu relative to the trigger.\r\n         */\r\n        positioning?: FluentMenuProps[\"positioning\"];\r\n        /**\r\n         * Called when the menu open state changes.\r\n         */\r\n        onOpenChange?: (open: boolean) => void;\r\n    };\r\n\r\nconst IsDivider = (item: ContextMenuItem): item is ContextMenuDividerProps => {\r\n    return \"type\" in item && item.type === \"divider\";\r\n};\r\n\r\nconst IsGroup = (item: ContextMenuItem): item is ContextMenuGroupProps => {\r\n    return \"type\" in item && item.type === \"group\";\r\n};\r\n\r\nconst RenderMenuItem = (item: ContextMenuItemProps, classes: ReturnType<typeof useStyles>) => {\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    const Icon = item.icon;\r\n    return (\r\n        <MenuItem\r\n            key={item.key}\r\n            className={classes.menuItem}\r\n            icon={Icon ? <Icon className={classes.menuItemIcon} /> : undefined}\r\n            onClick={item.onClick}\r\n            disabled={item.disabled}\r\n            secondaryContent={item.secondaryContent}\r\n        >\r\n            {item.label}\r\n        </MenuItem>\r\n    );\r\n};\r\n\r\nconst RenderMenuItems = (items: ContextMenuItem[], classes: ReturnType<typeof useStyles>): ReactNode[] => {\r\n    return items.map((item) => {\r\n        if (IsDivider(item)) {\r\n            return <MenuDivider key={item.key} />;\r\n        }\r\n\r\n        if (IsGroup(item)) {\r\n            return (\r\n                <MenuGroup key={item.key}>\r\n                    {item.header && <MenuGroupHeader>{item.header}</MenuGroupHeader>}\r\n                    {RenderMenuItems(item.items, classes)}\r\n                </MenuGroup>\r\n            );\r\n        }\r\n\r\n        return RenderMenuItem(item, classes);\r\n    });\r\n};\r\n\r\n/**\r\n * A wrapper around Fluent UI's Menu component providing a simplified API for context menus.\r\n * Supports menu items with icons, dividers, and grouped items.\r\n */\r\nexport const ContextMenu = forwardRef<HTMLButtonElement, ContextMenuProps>((props, ref) => {\r\n    const { items, onOpenChange, disabled } = props;\r\n    const [open, setOpen] = useState(false);\r\n    const classes = useStyles();\r\n\r\n    const handleOpenChange = (_: unknown, data: { open: boolean }) => {\r\n        setOpen(data.open);\r\n        onOpenChange?.(data.open);\r\n    };\r\n\r\n    return (\r\n        <Menu openOnContext open={open} onOpenChange={handleOpenChange}>\r\n            <MenuTrigger disableButtonEnhancement>\r\n                {props.trigger ?? (\r\n                    <Button\r\n                        ref={ref}\r\n                        icon={props.icon}\r\n                        onClick={(e) => {\r\n                            e?.stopPropagation();\r\n                            setOpen(true);\r\n                        }}\r\n                        disabled={disabled}\r\n                    />\r\n                )}\r\n            </MenuTrigger>\r\n            <MenuPopover className={classes.menuPopover}>\r\n                <MenuList>{RenderMenuItems(items, classes)}</MenuList>\r\n            </MenuPopover>\r\n        </Menu>\r\n    );\r\n});\r\n\r\nContextMenu.displayName = \"ContextMenu\";\r\n"]}

package/fluent/primitives/entitySelector.d.ts

@@ -1,12 +1,12 @@
 import type { Nullable } from "@babylonjs/core/types.js";
-import type { PrimitiveProps } from "./primitive.js";
+import type { ImmutablePrimitiveProps, PrimitiveProps } from "./primitive.js";
 type Entity = {
     uniqueId: number;
 };
 /**
  * Props for the EntitySelector component
  */
-export type EntitySelectorProps<T extends Entity> = PrimitiveProps<Nullable<T>> & {
+export type EntitySelectorProps<T extends Entity> = (PrimitiveProps<Nullable<T>> | ImmutablePrimitiveProps<Nullable<T>>) & {
     /**
      * Function to get the list of entities to choose from
      */
@@ -19,6 +19,14 @@ export type EntitySelectorProps<T extends Entity> = PrimitiveProps<Nullable<T>>
      * Optional filter function to filter which entities are shown
      */
     filter?: (entity: T) => boolean;
+    /**
+     * Callback when the entity link is clicked
+     */
+    onLink: (entity: T) => void;
+    /**
+     * Optional default value that enables clearing the current linked entity
+     */
+    defaultValue?: T;
 };
 /**
  * A generic primitive component with a ComboBox for selecting from a list of entities.

package/fluent/primitives/entitySelector.js

@@ -1,6 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { LinkDismissRegular, LinkEditRegular } from "@fluentui/react-icons";
 import { ComboBox } from "./comboBox.js";
+import { Link } from "./link.js";
+import { Button } from "./button.js";
+import { makeStyles, tokens, Tooltip } from "@fluentui/react-components";
+const useStyles = makeStyles({
+    linkDiv: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+        minWidth: 0,
+        overflow: "hidden",
+    },
+    link: {
+        minWidth: 0,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+});
 /**
  * A generic primitive component with a ComboBox for selecting from a list of entities.
  * Supports entities with duplicate names by using uniqueId for identity.
@@ -8,7 +28,9 @@ import { ComboBox } from "./comboBox.js";
  * @returns EntitySelector component
  */
 export function EntitySelector(props) {
-    const { value, onChange, getEntities, getName, filter } = props;
+    const { value, onLink, getEntities, getName, filter, defaultValue } = props;
+    const onChange = props.onChange;
+    const classes = useStyles();
     // Build options with uniqueId as key
     const options = useMemo(() => {
         return getEntities()
@@ -19,13 +41,27 @@ export function EntitySelector(props) {
         }))
             .sort((a, b) => a.label.localeCompare(b.label));
     }, [getEntities, getName, filter]);
+    const [isEditing, setIsEditing] = useState(false);
     const handleEntitySelect = (key) => {
         const entity = getEntities().find((e) => e.uniqueId.toString() === key);
-        onChange(entity ?? null);
+        onChange?.(entity ?? null);
+        setIsEditing(false);
     };
     // Get current entity key for display
     const currentKey = value ? value.uniqueId.toString() : "";
-    return _jsx(ComboBox, { label: "", options: options, value: currentKey, onChange: handleEntitySelect });
+    if (value && !isEditing) {
+        // If there is a value and we are not editing, show the link view
+        return (_jsxs("div", { className: classes.linkDiv, children: [_jsx(Tooltip, { content: getName(value), relationship: "label", children: _jsx(Link, { className: classes.link, value: getName(value), onLink: () => onLink(value) }) }), onChange &&
+                    (defaultValue !== undefined ? (
+                    // If the defaultValue is specified, then allow resetting to the default
+                    _jsx(Button, { icon: LinkDismissRegular, onClick: () => onChange(defaultValue) })) : (
+                    // Otherwise, just allow editing to a new value
+                    _jsx(Button, { icon: LinkEditRegular, onClick: () => setIsEditing(true) })))] }));
+    }
+    else {
+        // Otherwise, show the ComboBox for selection
+        return _jsx(ComboBox, { label: "", options: options, value: currentKey, onChange: handleEntitySelect });
+    }
 }
 EntitySelector.displayName = "EntitySelector";
 //# sourceMappingURL=entitySelector.js.map

package/fluent/primitives/entitySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"entitySelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/entitySelector.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAqBtC;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAmB,KAA6B;IAC1E,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEhE,qCAAqC;IACrC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,OAAO,WAAW,EAAE;aACf,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;aACjE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YACd,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC;YACtB,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE;SACpC,CAAC,CAAC;aACF,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAEnC,MAAM,kBAAkB,GAAG,CAAC,GAAW,EAAE,EAAE;QACvC,MAAM,MAAM,GAAG,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,KAAK,GAAG,CAAC,CAAC;QACxE,QAAQ,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,qCAAqC;IACrC,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAE1D,OAAO,KAAC,QAAQ,IAAC,KAAK,EAAC,EAAE,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,kBAAkB,GAAI,CAAC;AACpG,CAAC;AACD,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nimport { useMemo } from \"react\";\r\nimport { ComboBox } from \"./comboBox\";\r\n\r\ntype Entity = { uniqueId: number };\r\n/**\r\n * Props for the EntitySelector component\r\n */\r\nexport type EntitySelectorProps<T extends Entity> = PrimitiveProps<Nullable<T>> & {\r\n    /**\r\n     * Function to get the list of entities to choose from\r\n     */\r\n    getEntities: () => T[];\r\n    /**\r\n     * Function to get the display name from an entity\r\n     */\r\n    getName: (entity: T) => string;\r\n    /**\r\n     * Optional filter function to filter which entities are shown\r\n     */\r\n    filter?: (entity: T) => boolean;\r\n};\r\n\r\n/**\r\n * A generic primitive component with a ComboBox for selecting from a list of entities.\r\n * Supports entities with duplicate names by using uniqueId for identity.\r\n * @param props ChooseEntityProps\r\n * @returns EntitySelector component\r\n */\r\nexport function EntitySelector<T extends Entity>(props: EntitySelectorProps<T>): JSX.Element {\r\n    const { value, onChange, getEntities, getName, filter } = props;\r\n\r\n    // Build options with uniqueId as key\r\n    const options = useMemo(() => {\r\n        return getEntities()\r\n            .filter((e) => e.uniqueId !== undefined && (!filter || filter(e)))\r\n            .map((entity) => ({\r\n                label: getName(entity),\r\n                value: entity.uniqueId.toString(),\r\n            }))\r\n            .sort((a, b) => a.label.localeCompare(b.label));\r\n    }, [getEntities, getName, filter]);\r\n\r\n    const handleEntitySelect = (key: string) => {\r\n        const entity = getEntities().find((e) => e.uniqueId.toString() === key);\r\n        onChange(entity ?? null);\r\n    };\r\n\r\n    // Get current entity key for display\r\n    const currentKey = value ? value.uniqueId.toString() : \"\";\r\n\r\n    return <ComboBox label=\"\" options={options} value={currentKey} onChange={handleEntitySelect} />;\r\n}\r\nEntitySelector.displayName = \"EntitySelector\";\r\n"]}
+{"version":3,"file":"entitySelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/entitySelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { ImmutablePrimitiveProps, PrimitiveProps } from \"./primitive\";\r\n\r\nimport { useMemo, useState } from \"react\";\r\nimport { LinkDismissRegular, LinkEditRegular } from \"@fluentui/react-icons\";\r\nimport { ComboBox } from \"./comboBox\";\r\nimport { Link } from \"./link\";\r\nimport { Button } from \"./button\";\r\nimport { makeStyles, tokens, Tooltip } from \"@fluentui/react-components\";\r\n\r\ntype Entity = { uniqueId: number };\r\n\r\n/**\r\n * Props for the EntitySelector component\r\n */\r\nexport type EntitySelectorProps<T extends Entity> = (PrimitiveProps<Nullable<T>> | ImmutablePrimitiveProps<Nullable<T>>) & {\r\n    /**\r\n     * Function to get the list of entities to choose from\r\n     */\r\n    getEntities: () => T[];\r\n    /**\r\n     * Function to get the display name from an entity\r\n     */\r\n    getName: (entity: T) => string;\r\n    /**\r\n     * Optional filter function to filter which entities are shown\r\n     */\r\n    filter?: (entity: T) => boolean;\r\n    /**\r\n     * Callback when the entity link is clicked\r\n     */\r\n    onLink: (entity: T) => void;\r\n    /**\r\n     * Optional default value that enables clearing the current linked entity\r\n     */\r\n    defaultValue?: T;\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n    linkDiv: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        alignItems: \"center\",\r\n        gap: tokens.spacingHorizontalS,\r\n        minWidth: 0,\r\n        overflow: \"hidden\",\r\n    },\r\n    link: {\r\n        minWidth: 0,\r\n        overflow: \"hidden\",\r\n        textOverflow: \"ellipsis\",\r\n        whiteSpace: \"nowrap\",\r\n    },\r\n});\r\n\r\n/**\r\n * A generic primitive component with a ComboBox for selecting from a list of entities.\r\n * Supports entities with duplicate names by using uniqueId for identity.\r\n * @param props ChooseEntityProps\r\n * @returns EntitySelector component\r\n */\r\nexport function EntitySelector<T extends Entity>(props: EntitySelectorProps<T>): JSX.Element {\r\n    const { value, onLink, getEntities, getName, filter, defaultValue } = props;\r\n\r\n    const onChange = (props as PrimitiveProps<Nullable<T>>).onChange as PrimitiveProps<Nullable<T>>[\"onChange\"] | undefined;\r\n\r\n    const classes = useStyles();\r\n\r\n    // Build options with uniqueId as key\r\n    const options = useMemo(() => {\r\n        return getEntities()\r\n            .filter((e) => e.uniqueId !== undefined && (!filter || filter(e)))\r\n            .map((entity) => ({\r\n                label: getName(entity),\r\n                value: entity.uniqueId.toString(),\r\n            }))\r\n            .sort((a, b) => a.label.localeCompare(b.label));\r\n    }, [getEntities, getName, filter]);\r\n\r\n    const [isEditing, setIsEditing] = useState(false);\r\n\r\n    const handleEntitySelect = (key: string) => {\r\n        const entity = getEntities().find((e) => e.uniqueId.toString() === key);\r\n        onChange?.(entity ?? null);\r\n        setIsEditing(false);\r\n    };\r\n\r\n    // Get current entity key for display\r\n    const currentKey = value ? value.uniqueId.toString() : \"\";\r\n\r\n    if (value && !isEditing) {\r\n        // If there is a value and we are not editing, show the link view\r\n        return (\r\n            <div className={classes.linkDiv}>\r\n                <Tooltip content={getName(value)} relationship=\"label\">\r\n                    <Link className={classes.link} value={getName(value)} onLink={() => onLink(value)} />\r\n                </Tooltip>\r\n                {/* Only allow changing the linked entity if an onChange handler is provided */}\r\n                {onChange &&\r\n                    (defaultValue !== undefined ? (\r\n                        // If the defaultValue is specified, then allow resetting to the default\r\n                        <Button icon={LinkDismissRegular} onClick={() => onChange(defaultValue)} />\r\n                    ) : (\r\n                        // Otherwise, just allow editing to a new value\r\n                        <Button icon={LinkEditRegular} onClick={() => setIsEditing(true)} />\r\n                    ))}\r\n            </div>\r\n        );\r\n    } else {\r\n        // Otherwise, show the ComboBox for selection\r\n        return <ComboBox label=\"\" options={options} value={currentKey} onChange={handleEntitySelect} />;\r\n    }\r\n}\r\nEntitySelector.displayName = \"EntitySelector\";\r\n"]}

package/fluent/primitives/link.d.ts

@@ -1,4 +1,3 @@
-import type { FunctionComponent, PropsWithChildren } from "react";
 import type { ImmutablePrimitiveProps } from "./primitive.js";
 export type LinkProps = ImmutablePrimitiveProps<string> & {
     /**
@@ -14,4 +13,22 @@ export type LinkProps = ImmutablePrimitiveProps<string> & {
      */
     target?: "current" | "new";
 };
-export declare const Link: FunctionComponent<PropsWithChildren<LinkProps>>;
+export declare const Link: import("react").ForwardRefExoticComponent<import("./primitive.js").BasePrimitiveProps & {
+    value: string;
+    infoLabel?: import("./infoLabel.js").InfoLabelParentProps;
+} & {
+    /**
+     * Used if you want to handle the link click yourself
+     */
+    onLink?: () => void;
+    /**
+     * The URL the link points to
+     */
+    url?: string;
+    /**
+     * Defines whether to open the link in current tab or new tab. Default is new
+     */
+    target?: "current" | "new";
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/fluent/primitives/link.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Body1, Link as FluentLink } from "@fluentui/react-components";
-export const Link = (props) => {
+export const Link = forwardRef((props, ref) => {
     const { target, url, onLink, ...rest } = props;
-    return (_jsxs(FluentLink, { inline: true, target: target === "current" ? "_self" : "_blank", rel: "noopener noreferrer", href: url, onClick: onLink ?? undefined, ...rest, children: [props.children, _jsx(Body1, { children: props.value })] }));
-};
+    return (_jsxs(FluentLink, { ref: ref, inline: true, target: target === "current" ? "_self" : "_blank", rel: "noopener noreferrer", href: url, onClick: onLink ?? undefined, ...rest, children: [props.children, _jsx(Body1, { wrap: false, truncate: true, children: props.value })] }));
+});
+Link.displayName = "Link";
 //# sourceMappingURL=link.js.map

package/fluent/primitives/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/link.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAkBvE,MAAM,CAAC,MAAM,IAAI,GAAoD,CAAC,KAAK,EAAE,EAAE;IAC3E,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC/C,OAAO,CACH,MAAC,UAAU,IAAC,MAAM,QAAC,MAAM,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAC,qBAAqB,EAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,IAAI,SAAS,KAAM,IAAI,aAC5I,KAAK,CAAC,QAAQ,EACf,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,IACnB,CAChB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent, PropsWithChildren } from \"react\";\r\nimport { Body1, Link as FluentLink } from \"@fluentui/react-components\";\r\nimport type { ImmutablePrimitiveProps } from \"./primitive\";\r\n\r\nexport type LinkProps = ImmutablePrimitiveProps<string> & {\r\n    /**\r\n     * Used if you want to handle the link click yourself\r\n     */\r\n    onLink?: () => void;\r\n    /**\r\n     * The URL the link points to\r\n     */\r\n    url?: string;\r\n    /**\r\n     * Defines whether to open the link in current tab or new tab. Default is new\r\n     */\r\n    target?: \"current\" | \"new\";\r\n};\r\n\r\nexport const Link: FunctionComponent<PropsWithChildren<LinkProps>> = (props) => {\r\n    const { target, url, onLink, ...rest } = props;\r\n    return (\r\n        <FluentLink inline target={target === \"current\" ? \"_self\" : \"_blank\"} rel=\"noopener noreferrer\" href={url} onClick={onLink ?? undefined} {...rest}>\r\n            {props.children}\r\n            <Body1>{props.value}</Body1>\r\n        </FluentLink>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/link.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAiBvE,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAkD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3F,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC/C,OAAO,CACH,MAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,QAAC,MAAM,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAC,qBAAqB,EAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,IAAI,SAAS,KAAM,IAAI,aACtJ,KAAK,CAAC,QAAQ,EACf,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,kBACvB,KAAK,CAAC,KAAK,GACR,IACC,CAChB,CAAC;AACN,CAAC,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC","sourcesContent":["import type { PropsWithChildren } from \"react\";\r\n\r\nimport type { ImmutablePrimitiveProps } from \"./primitive\";\r\n\r\nimport { forwardRef } from \"react\";\r\nimport { Body1, Link as FluentLink } from \"@fluentui/react-components\";\r\n\r\nexport type LinkProps = ImmutablePrimitiveProps<string> & {\r\n    /**\r\n     * Used if you want to handle the link click yourself\r\n     */\r\n    onLink?: () => void;\r\n    /**\r\n     * The URL the link points to\r\n     */\r\n    url?: string;\r\n    /**\r\n     * Defines whether to open the link in current tab or new tab. Default is new\r\n     */\r\n    target?: \"current\" | \"new\";\r\n};\r\n\r\nexport const Link = forwardRef<HTMLAnchorElement, PropsWithChildren<LinkProps>>((props, ref) => {\r\n    const { target, url, onLink, ...rest } = props;\r\n    return (\r\n        <FluentLink ref={ref} inline target={target === \"current\" ? \"_self\" : \"_blank\"} rel=\"noopener noreferrer\" href={url} onClick={onLink ?? undefined} {...rest}>\r\n            {props.children}\r\n            <Body1 wrap={false} truncate>\r\n                {props.value}\r\n            </Body1>\r\n        </FluentLink>\r\n    );\r\n});\r\nLink.displayName = \"Link\";\r\n"]}

package/fluent/primitives/materialSelector.d.ts

@@ -3,6 +3,7 @@ import type { Scene } from "@babylonjs/core/scene.js";
 import type { Nullable } from "@babylonjs/core/types.js";
 import type { Material } from "@babylonjs/core/Materials/material.js";
 import type { PrimitiveProps } from "./primitive.js";
+import type { EntitySelectorProps } from "./entitySelector.js";
 export type MaterialSelectorProps = PrimitiveProps<Nullable<Material>> & {
     /**
      * The scene to get materials from
@@ -12,7 +13,7 @@ export type MaterialSelectorProps = PrimitiveProps<Nullable<Material>> & {
      * Optional filter function to filter which materials are shown
      */
     filter?: (material: Material) => boolean;
-};
+} & Omit<EntitySelectorProps<Material>, "getEntities" | "getName">;
 /**
  * A primitive component with a ComboBox for selecting from existing scene materials.
  * @param props MaterialSelectorProps

package/fluent/primitives/materialSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"materialSelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/materialSelector.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAalD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6C,CAAC,KAAK,EAAE,EAAE;IAChF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;IAClD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3E,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,QAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAEvE,OAAO,KAAC,cAAc,OAAK,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACrF,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport type { Scene } from \"core/scene\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { Material } from \"core/Materials/material\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nimport { useCallback } from \"react\";\r\nimport { EntitySelector } from \"./entitySelector\";\r\n\r\nexport type MaterialSelectorProps = PrimitiveProps<Nullable<Material>> & {\r\n    /**\r\n     * The scene to get materials from\r\n     */\r\n    scene: Scene;\r\n    /**\r\n     * Optional filter function to filter which materials are shown\r\n     */\r\n    filter?: (material: Material) => boolean;\r\n};\r\n\r\n/**\r\n * A primitive component with a ComboBox for selecting from existing scene materials.\r\n * @param props MaterialSelectorProps\r\n * @returns MaterialSelector component\r\n */\r\nexport const MaterialSelector: FunctionComponent<MaterialSelectorProps> = (props) => {\r\n    MaterialSelector.displayName = \"MaterialSelector\";\r\n    const { scene, ...rest } = props;\r\n\r\n    const getMaterials = useCallback(() => scene.materials, [scene.materials]);\r\n    const getName = useCallback((material: Material) => material.name, []);\r\n\r\n    return <EntitySelector {...rest} getEntities={getMaterials} getName={getName} />;\r\n};\r\n"]}
+{"version":3,"file":"materialSelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/materialSelector.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAalD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6C,CAAC,KAAK,EAAE,EAAE;IAChF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;IAClD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3E,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,QAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAEvE,OAAO,KAAC,cAAc,OAAK,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACrF,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport type { Scene } from \"core/scene\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { Material } from \"core/Materials/material\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport type { EntitySelectorProps } from \"./entitySelector\";\r\n\r\nimport { useCallback } from \"react\";\r\nimport { EntitySelector } from \"./entitySelector\";\r\n\r\nexport type MaterialSelectorProps = PrimitiveProps<Nullable<Material>> & {\r\n    /**\r\n     * The scene to get materials from\r\n     */\r\n    scene: Scene;\r\n    /**\r\n     * Optional filter function to filter which materials are shown\r\n     */\r\n    filter?: (material: Material) => boolean;\r\n} & Omit<EntitySelectorProps<Material>, \"getEntities\" | \"getName\">;\r\n\r\n/**\r\n * A primitive component with a ComboBox for selecting from existing scene materials.\r\n * @param props MaterialSelectorProps\r\n * @returns MaterialSelector component\r\n */\r\nexport const MaterialSelector: FunctionComponent<MaterialSelectorProps> = (props) => {\r\n    MaterialSelector.displayName = \"MaterialSelector\";\r\n    const { scene, ...rest } = props;\r\n\r\n    const getMaterials = useCallback(() => scene.materials, [scene.materials]);\r\n    const getName = useCallback((material: Material) => material.name, []);\r\n\r\n    return <EntitySelector {...rest} getEntities={getMaterials} getName={getName} />;\r\n};\r\n"]}

package/fluent/primitives/nodeSelector.d.ts

@@ -3,6 +3,7 @@ import type { Scene } from "@babylonjs/core/scene.js";
 import type { Nullable } from "@babylonjs/core/types.js";
 import type { Node } from "@babylonjs/core/node.js";
 import type { PrimitiveProps } from "./primitive.js";
+import type { EntitySelectorProps } from "./entitySelector.js";
 export type NodeSelectorProps = PrimitiveProps<Nullable<Node>> & {
     /**
      * The scene to get nodes from
@@ -12,7 +13,7 @@ export type NodeSelectorProps = PrimitiveProps<Nullable<Node>> & {
      * Optional filter function to filter which nodes are shown
      */
     filter?: (node: Node) => boolean;
-};
+} & Omit<EntitySelectorProps<Node>, "getEntities" | "getName">;
 /**
  * A primitive component with a ComboBox for selecting from existing scene nodes.
  * @param props NodeSelectorProps