npm - @babylonjs/shared-ui-components - Versions diffs - 9.0.0 → 9.1.0 - Mend

@babylonjs/shared-ui-components 9.0.0 → 9.1.0

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 (353) hide show

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":"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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, 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"]}
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, useMemo, type FunctionComponent } from \"react\";\r\nimport {\r\n ColorPicker as FluentColorPicker,\r\n ColorSlider,\r\n ColorArea,\r\n AlphaSlider,\r\n makeStyles,\r\n tokens,\r\n Body1Strong,\r\n ColorSwatch,\r\n Body1,\r\n type ColorPickerProps as FluentColorPickerProps,\r\n} 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/comboBox.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { PrimitiveProps } from "./primitive.js";
+import { type PrimitiveProps } from "./primitive.js";
 /**
  * An option object for the ComboBox with separate label and value.
  */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"comboBox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/comboBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,~~EAAE~~,MAAM,4BAA4B,CAAC;~~AAEtH~~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","sourcesContent":["import { useState, useContext, useEffect, forwardRef } 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.valueWidth,\r\n minWidth: CustomTokens.valueWidth,\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 The default open state when open is uncontrolled\r\n /\r\n defaultOpen?: boolean;\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 = forwardRef<HTMLInputElement, ComboBoxProps>((props, ref) => {\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 ref={ref}\r\n defaultOpen={props.defaultOpen}\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"]}
1	+ {"version":3,"file":"comboBox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/comboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useContext, useEffect, forwardRef } from \"react\";\r\nimport { Combobox as FluentComboBox, makeStyles, useComboboxFilter, useId, Option, type OptionOnSelectData, type 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.valueWidth,\r\n minWidth: CustomTokens.valueWidth,\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 The default open state when open is uncontrolled\r\n /\r\n defaultOpen?: boolean;\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 = forwardRef<HTMLInputElement, ComboBoxProps>((props, ref) => {\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 ref={ref}\r\n defaultOpen={props.defaultOpen}\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 CHANGED Viewed

@@ -1,7 +1,7 @@
-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";
+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.
  */

package/fluent/primitives/contextMenu.js CHANGED Viewed

@@ -1,7 +1,7 @@
 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";
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, MenuDivider, MenuGroup, MenuGroupHeader, makeStyles, tokens, } from "@fluentui/react-components";
+import { Button } from "./button.js";
 const useStyles = makeStyles({
     menuPopover: {
         minWidth: "160px",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"contextMenu.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/contextMenu.tsx"],"names":[],"mappings":";~~AACA~~,OAAO,~~EAAE~~,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAC7C~~,OAAO,~~EAAE~~,IAAI,~~EAAE~~,WAAW,~~EAAE~~,WAAW,~~EAAE~~,QAAQ,~~EAAE~~,QAAQ,~~EAAE~~,WAAW,~~EAAE~~,SAAS,~~EAAE~~,eAAe,~~EAAE~~,UAAU,~~EAAE~~,MAAM,~~EAAE~~,MAAM,4BAA4B,CAAC;~~AAG7J~~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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"]}
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, type ReactNode, forwardRef, useState } from \"react\";\r\nimport {\r\n Menu,\r\n MenuTrigger,\r\n MenuPopover,\r\n MenuList,\r\n MenuItem,\r\n MenuDivider,\r\n MenuGroup,\r\n MenuGroupHeader,\r\n makeStyles,\r\n tokens,\r\n type MenuProps as FluentMenuProps,\r\n} 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/dropdown.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import type { FunctionComponent } from "react";
-import type { PrimitiveProps } from "./primitive.js";
+import { type FunctionComponent } from "react";
+import { type PrimitiveProps } from "./primitive.js";
 export type AcceptedDropdownValue = string | number;
 export type DropdownOption<T extends AcceptedDropdownValue> = {
     /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACjH,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,~~EAAE~~,MAAM,OAAO,CAAC;~~AAGxD~~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","sourcesContent":["import { Dropdown as FluentDropdown, makeStyles, mergeClasses, Option, useId } from \"@fluentui/react-components\";\r\nimport { useContext, useEffect, useState ~~} from \"react\";\r\nimport~~ type { FunctionComponent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nconst useDropdownStyles = makeStyles({\r\n dropdown: {\r\n minWidth: 0,\r\n width: \"100%\",\r\n },\r\n container: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n justifyContent: \"center\", // align items vertically\r\n },\r\n dropdownText: { textAlign: \"end\", textOverflow: \"ellipsis\", whiteSpace: \"nowrap\", overflowX: \"hidden\" },\r\n});\r\n\r\nexport type AcceptedDropdownValue = string \| number;\r\nexport type DropdownOption<T extends AcceptedDropdownValue> = {\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: T;\r\n};\r\n\r\nexport type DropdownProps<V extends AcceptedDropdownValue> = PrimitiveProps<V> & {\r\n options: readonly DropdownOption<V>[];\r\n};\r\n\r\n/\r\n Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true\r\n * This component can handle both null and undefined values\r\n * @param props\r\n * @returns dropdown component\r\n */\r\nexport const Dropdown: FunctionComponent<DropdownProps<AcceptedDropdownValue>> = (props) => {\r\n Dropdown.displayName = \"Dropdown\";\r\n const classes = useDropdownStyles();\r\n const { options, value } = props;\r\n const [defaultVal, setDefaultVal] = useState(props.value);\r\n const { size } = useContext(ToolContext);\r\n\r\n useEffect(() => {\r\n setDefaultVal(value);\r\n }, [props.value]);\r\n const id = useId(\"dropdown\");\r\n\r\n const mergedClassName = mergeClasses(classes.container, props.className);\r\n\r\n const optionLabel = options.find((o) => o.value === defaultVal)?.label;\r\n\r\n return (\r\n <div className={mergedClassName}>\r\n {props.infoLabel && <InfoLabel {...props.infoLabel} htmlFor={id} />}\r\n <FluentDropdown\r\n id={id}\r\n disabled={props.disabled}\r\n size={size}\r\n className={classes.dropdown}\r\n button={<span className={classes.dropdownText}>{optionLabel}</span>}\r\n onOptionSelect={(evt, data) => {\r\n const value = typeof props.value === \"number\" ? Number(data.optionValue) : data.optionValue;\r\n if (value !== undefined) {\r\n setDefaultVal(value);\r\n props.onChange(value);\r\n }\r\n }}\r\n selectedOptions={[defaultVal.toString()]}\r\n value={optionLabel}\r\n >\r\n {options.map((option: DropdownOption<AcceptedDropdownValue>) => (\r\n <Option key={option.label} value={option.value.toString()} disabled={false}>\r\n {option.label}\r\n </Option>\r\n ))}\r\n </FluentDropdown>\r\n </div>\r\n );\r\n};\r\n\r\nexport const NumberDropdown = Dropdown as FunctionComponent<DropdownProps<number>>;\r\nexport const StringDropdown = Dropdown as FunctionComponent<DropdownProps<string>>;\r\n"]}
1	+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Dropdown as FluentDropdown, makeStyles, mergeClasses, Option, useId } from \"@fluentui/react-components\";\r\nimport { useContext, useEffect, useState, type FunctionComponent } from \"react\";\r\nimport { type PrimitiveProps } from \"./primitive\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nconst useDropdownStyles = makeStyles({\r\n dropdown: {\r\n minWidth: 0,\r\n width: \"100%\",\r\n },\r\n container: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n justifyContent: \"center\", // align items vertically\r\n },\r\n dropdownText: { textAlign: \"end\", textOverflow: \"ellipsis\", whiteSpace: \"nowrap\", overflowX: \"hidden\" },\r\n});\r\n\r\nexport type AcceptedDropdownValue = string \| number;\r\nexport type DropdownOption<T extends AcceptedDropdownValue> = {\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: T;\r\n};\r\n\r\nexport type DropdownProps<V extends AcceptedDropdownValue> = PrimitiveProps<V> & {\r\n options: readonly DropdownOption<V>[];\r\n};\r\n\r\n/\r\n Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true\r\n * This component can handle both null and undefined values\r\n * @param props\r\n * @returns dropdown component\r\n */\r\nexport const Dropdown: FunctionComponent<DropdownProps<AcceptedDropdownValue>> = (props) => {\r\n Dropdown.displayName = \"Dropdown\";\r\n const classes = useDropdownStyles();\r\n const { options, value } = props;\r\n const [defaultVal, setDefaultVal] = useState(props.value);\r\n const { size } = useContext(ToolContext);\r\n\r\n useEffect(() => {\r\n setDefaultVal(value);\r\n }, [props.value]);\r\n const id = useId(\"dropdown\");\r\n\r\n const mergedClassName = mergeClasses(classes.container, props.className);\r\n\r\n const optionLabel = options.find((o) => o.value === defaultVal)?.label;\r\n\r\n return (\r\n <div className={mergedClassName}>\r\n {props.infoLabel && <InfoLabel {...props.infoLabel} htmlFor={id} />}\r\n <FluentDropdown\r\n id={id}\r\n disabled={props.disabled}\r\n size={size}\r\n className={classes.dropdown}\r\n button={<span className={classes.dropdownText}>{optionLabel}</span>}\r\n onOptionSelect={(evt, data) => {\r\n const value = typeof props.value === \"number\" ? Number(data.optionValue) : data.optionValue;\r\n if (value !== undefined) {\r\n setDefaultVal(value);\r\n props.onChange(value);\r\n }\r\n }}\r\n selectedOptions={[defaultVal.toString()]}\r\n value={optionLabel}\r\n >\r\n {options.map((option: DropdownOption<AcceptedDropdownValue>) => (\r\n <Option key={option.label} value={option.value.toString()} disabled={false}>\r\n {option.label}\r\n </Option>\r\n ))}\r\n </FluentDropdown>\r\n </div>\r\n );\r\n};\r\n\r\nexport const NumberDropdown = Dropdown as FunctionComponent<DropdownProps<number>>;\r\nexport const StringDropdown = Dropdown as FunctionComponent<DropdownProps<string>>;\r\n"]}

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

@@ -1,5 +1,5 @@
-import type { Nullable } from "@babylonjs/core/types.js";
-import type { ImmutablePrimitiveProps, PrimitiveProps } from "./primitive.js";
+import { type Nullable } from "@babylonjs/core/types.js";
+import { type ImmutablePrimitiveProps, type PrimitiveProps } from "./primitive.js";
 type Entity = {
     uniqueId: number;
 };

package/fluent/primitives/entitySelector.js CHANGED Viewed

@@ -60,14 +60,10 @@ export function EntitySelector(props) {
     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(Tooltip, { content: "Unlink", relationship: "label", children: _jsx(Button, { icon: LinkDismissRegular, onClick: () => {
+                    (defaultValue !== undefined ? (_jsx(Tooltip, { content: "Unlink", relationship: "label", children: _jsx(Button, { icon: LinkDismissRegular, onClick: () => {
                                 pulseEnteringEditMode(true);
                                 onChange(defaultValue);
-                            } }) })) : (
-                    // Otherwise, just allow editing to a new value
-                    _jsx(Tooltip, { content: "Edit Link", relationship: "label", children: _jsx(Button, { icon: LinkEditRegular, onClick: () => {
+                            } }) })) : (_jsx(Tooltip, { content: "Edit Link", relationship: "label", children: _jsx(Button, { icon: LinkEditRegular, onClick: () => {
                                 pulseEnteringEditMode(true);
                                 setIsEditing(true);
                             } }) })))] }));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"entitySelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/entitySelector.tsx"],"names":[],"mappings":"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~~;oBAC1B~~,~~wEAAwE;oBACxE~~,KAAC,OAAO,IAAC,OAAO,EAAC,QAAQ,EAAC,YAAY,EAAC,OAAO,YAC1C,KAAC,MAAM,IACH,IAAI,EAAE,kBAAkB,EACxB,OAAO,EAAE,GAAG,EAAE;gCACV,qBAAqB,CAAC,IAAI,CAAC,CAAC;gCAC5B,QAAQ,CAAC,YAAY,CAAC,CAAC;4BAC3B,CAAC,GACH,GACI,CACb,CAAC,CAAC,CAAC~~;oBACA,+CAA+C;oBAC/C~~,KAAC,OAAO,IAAC,OAAO,EAAC,WAAW,EAAC,YAAY,EAAC,OAAO,YAC7C,KAAC,MAAM,IACH,IAAI,EAAE,eAAe,EACrB,OAAO,EAAE,GAAG,EAAE;gCACV,qBAAqB,CAAC,IAAI,CAAC,CAAC;gCAC5B,YAAY,CAAC,IAAI,CAAC,CAAC;4BACvB,CAAC,GACH,GACI,CACb,CAAC,IACJ,CACT,CAAC;IACN,CAAC;SAAM,CAAC;QACJ,6CAA6C;QAC7C,OAAO,KAAC,QAAQ,IAAC,GAAG,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,EAAC,EAAE,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,kBAAkB,GAAI,CAAC;IACrJ,CAAC;AACL,CAAC;AACD,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { ImmutablePrimitiveProps, PrimitiveProps } from \"./primitive\";\r\n\r\nimport { makeStyles, tokens, Tooltip } from \"@fluentui/react-components\";\r\nimport { LinkDismissRegular, LinkEditRegular } from \"@fluentui/react-icons\";\r\nimport { useEffect, useMemo, useRef, useState } from \"react\";\r\n\r\nimport { Button } from \"./button\";\r\nimport { ComboBox } from \"./comboBox\";\r\nimport { Link } from \"./link\";\r\nimport { useImpulse } from \"../hooks/transientStateHooks\";\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?: Nullable<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 const comboBoxRef = useRef<HTMLInputElement>(null);\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)?.toString() \|\| \"\",\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 [enteringEditMode, pulseEnteringEditMode] = useImpulse<true>();\r\n\r\n useEffect(() => {\r\n if (enteringEditMode) {\r\n comboBoxRef.current?.focus();\r\n }\r\n }, [enteringEditMode]);\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 <Tooltip content=\"Unlink\" relationship=\"label\">\r\n <Button\r\n icon={LinkDismissRegular}\r\n onClick={() => {\r\n pulseEnteringEditMode(true);\r\n onChange(defaultValue);\r\n }}\r\n />\r\n </Tooltip>\r\n ) : (\r\n // Otherwise, just allow editing to a new value\r\n <Tooltip content=\"Edit Link\" relationship=\"label\">\r\n <Button\r\n icon={LinkEditRegular}\r\n onClick={() => {\r\n pulseEnteringEditMode(true);\r\n setIsEditing(true);\r\n }}\r\n />\r\n </Tooltip>\r\n ))}\r\n </div>\r\n );\r\n } else {\r\n // Otherwise, show the ComboBox for selection\r\n return <ComboBox ref={comboBoxRef} defaultOpen={enteringEditMode} label=\"\" options={options} value={currentKey} onChange={handleEntitySelect} />;\r\n }\r\n}\r\nEntitySelector.displayName = \"EntitySelector\";\r\n"]}
1	+ {"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, type PrimitiveProps } from \"./primitive\";\r\n\r\nimport { makeStyles, tokens, Tooltip } from \"@fluentui/react-components\";\r\nimport { LinkDismissRegular, LinkEditRegular } from \"@fluentui/react-icons\";\r\nimport { useEffect, useMemo, useRef, useState } from \"react\";\r\n\r\nimport { Button } from \"./button\";\r\nimport { ComboBox } from \"./comboBox\";\r\nimport { Link } from \"./link\";\r\nimport { useImpulse } from \"../hooks/transientStateHooks\";\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?: Nullable<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 const comboBoxRef = useRef<HTMLInputElement>(null);\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)?.toString() \|\| \"\",\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 [enteringEditMode, pulseEnteringEditMode] = useImpulse<true>();\r\n\r\n useEffect(() => {\r\n if (enteringEditMode) {\r\n comboBoxRef.current?.focus();\r\n }\r\n }, [enteringEditMode]);\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 <Tooltip content=\"Unlink\" relationship=\"label\">\r\n <Button\r\n icon={LinkDismissRegular}\r\n onClick={() => {\r\n pulseEnteringEditMode(true);\r\n onChange(defaultValue);\r\n }}\r\n />\r\n </Tooltip>\r\n ) : (\r\n // Otherwise, just allow editing to a new value\r\n <Tooltip content=\"Edit Link\" relationship=\"label\">\r\n <Button\r\n icon={LinkEditRegular}\r\n onClick={() => {\r\n pulseEnteringEditMode(true);\r\n setIsEditing(true);\r\n }}\r\n />\r\n </Tooltip>\r\n ))}\r\n </div>\r\n );\r\n } else {\r\n // Otherwise, show the ComboBox for selection\r\n return <ComboBox ref={comboBoxRef} defaultOpen={enteringEditMode} label=\"\" options={options} value={currentKey} onChange={handleEntitySelect} />;\r\n }\r\n}\r\nEntitySelector.displayName = \"EntitySelector\";\r\n"]}

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

@@ -1,5 +1,5 @@
-import type { FunctionComponent } from "react";
-import type { PrimitiveProps } from "./primitive.js";
+import { type FunctionComponent } from "react";
+import { type PrimitiveProps } from "./primitive.js";
 import { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from "@babylonjs/core/Misc/gradients.js";
 import { GradientBlockColorStep } from "@babylonjs/core/Materials/Node/Blocks/gradientBlock.js";
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"gradient.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/gradient.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { useEffect, useState } from \"react\";\r\nimport { makeStyles, tokens } from \"@fluentui/react-components\";\r\n\r\nimport { SyncedSliderInput } from \"./syncedSlider\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup } from \"./colorPicker\";\r\nimport { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from \"core/Misc/gradients\";\r\nimport { GradientBlockColorStep } from \"core/Materials/Node/Blocks/gradientBlock\";\r\n\r\nconst useGradientStyles = makeStyles({\r\n container: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: tokens.spacingHorizontalXS, // Reduced gap\r\n width: \"100%\",\r\n minWidth: 0,\r\n overflow: \"hidden\",\r\n },\r\n // Wrapper for factor spin buttons - fixed width, doesn't grow\r\n valueWrapper: {\r\n flex: \"0 0 auto\", // Fixed size, no grow, no shrink\r\n },\r\n // Wrapper for color pickers - fixed size since they're just swatches\r\n colorWrapper: {\r\n flex: \"0 0 auto\",\r\n alignContent: \"center\",\r\n },\r\n // Wrapper for the step slider - takes remaining space and can shrink\r\n stepSliderWrapper: {\r\n flex: \"1 1 0\", // Grow to fill available space\r\n minWidth: \"100px\", // Minimum to fit slider + spinbutton\r\n },\r\n});\r\n\r\ntype GradientProps<T extends number \| Color3 \| Color4> = {\r\n value1: T;\r\n value2?: T;\r\n step: number;\r\n};\r\n\r\n/*\r\n Gradient component that displays 1 or 2 color or number inputs next to a slider\r\n * @param props - Component props containing gradient value and change handlers\r\n * @returns A React component\r\n /\r\nconst Gradient: FunctionComponent<PrimitiveProps<GradientProps<number \| Color3 \| Color4>>> = (props) => {\r\n Gradient.displayName = \"Gradient\";\r\n const [gradient, setGradient] = useState(props.value);\r\n const classes = useGradientStyles();\r\n\r\n useEffect(() => {\r\n setGradient(props.value); // Re-render if props.value changes\r\n }, [props.value]);\r\n\r\n const gradientChange = (newGradient: GradientProps<number \| Color3 \| Color4>) => {\r\n setGradient(newGradient);\r\n props.onChange(newGradient);\r\n };\r\n // Only use compact mode when there are numeric values (spinbuttons) taking up space\r\n const hasNumericValues =\r\n !(gradient.value1 instanceof Color3 \|\| gradient.value1 instanceof Color4) \|\|\r\n (gradient.value2 !== undefined && !(gradient.value2 instanceof Color3 \|\| gradient.value2 instanceof Color4));\r\n\r\n return (\r\n <div id=\"gradientContainer\" className={classes.container}>\r\n <div className={gradient.value1 instanceof Color3 \|\| gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper}>\r\n {gradient.value1 instanceof Color3 \|\| gradient.value1 instanceof Color4 ? (\r\n <ColorPickerPopup value={gradient.value1} onChange={(color) => gradientChange({ ...gradient, value1: color })} />\r\n ) : (\r\n <SyncedSliderInput step={0.01} precision={2} value={gradient.value1} onChange={(val) => gradientChange({ ...gradient, value1: val })} compact />\r\n )}\r\n </div>\r\n {gradient.value2 !== undefined && (\r\n <div className={gradient.value2 instanceof Color3 \|\| gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper}>\r\n {gradient.value2 instanceof Color3 \|\| gradient.value2 instanceof Color4 ? (\r\n <ColorPickerPopup value={gradient.value2} onChange={(color) => gradientChange({ ...gradient, value2: color })} />\r\n ) : (\r\n <SyncedSliderInput step={0.01} precision={2} value={gradient.value2} onChange={(val) => gradientChange({ ...gradient, value2: val })} compact />\r\n )}\r\n </div>\r\n )}\r\n\r\n <div className={classes.stepSliderWrapper}>\r\n <SyncedSliderInput\r\n notifyOnlyOnRelease={true}\r\n min={0}\r\n max={1}\r\n step={0.01}\r\n precision={2}\r\n value={gradient.step}\r\n onChange={(val) => gradientChange({ ...gradient, step: val })}\r\n compact={hasNumericValues}\r\n growSlider={!hasNumericValues}\r\n />\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nconst FactorGradientCast = Gradient as FunctionComponent<PrimitiveProps<GradientProps<number>>>;\r\nconst Color3GradientCast = Gradient as FunctionComponent<PrimitiveProps<GradientProps<Color3>>>;\r\nconst Color4GradientCast = Gradient as FunctionComponent<PrimitiveProps<GradientProps<Color4>>>;\r\n\r\n/\r\n Component wrapper for FactorGradient that provides slider inputs for factor1, factor2, and gradient step\r\n * @param props - Component props containing FactorGradient value and change handler\r\n * @returns A React component\r\n /\r\nexport const FactorGradientComponent: FunctionComponent<PrimitiveProps<FactorGradient>> = (props) => {\r\n return (\r\n <FactorGradientCast\r\n {...props}\r\n value={{ value1: props.value.factor1, value2: props.value.factor2, step: props.value.gradient }}\r\n onChange={(gradient) => props.onChange(new FactorGradient(gradient.step, gradient.value1, gradient.value2))}\r\n />\r\n );\r\n};\r\n/\r\n Component wrapper for Color3Gradient that provides color picker and gradient step slider\r\n * @param props - Component props containing Color3Gradient value and change handler\r\n * @returns A React component\r\n /\r\nexport const Color3GradientComponent: FunctionComponent<PrimitiveProps<Color3Gradient>> = (props) => {\r\n return (\r\n <Color3GradientCast\r\n {...props}\r\n value={{ value1: props.value.color, step: props.value.gradient }}\r\n onChange={(gradient) => props.onChange(new Color3Gradient(gradient.step, gradient.value1))}\r\n />\r\n );\r\n};\r\n/\r\n Component wrapper for Color4Gradient that provides color pickers for color1, color2, and gradient step slider\r\n * @param props - Component props containing Color4Gradient value and change handler\r\n * @returns A React component\r\n /\r\nexport const Color4GradientComponent: FunctionComponent<PrimitiveProps<Color4Gradient>> = (props) => {\r\n return (\r\n <Color4GradientCast\r\n {...props}\r\n value={{ value1: props.value.color1, value2: props.value.color2, step: props.value.gradient }}\r\n onChange={(gradient) => props.onChange(new Color4Gradient(gradient.step, gradient.value1, gradient.value2))}\r\n />\r\n );\r\n};\r\n/\r\n Component wrapper for GradientBlockColorStep that provides color picker and step slider\r\n * @param props - Component props containing GradientBlockColorStep value and change handler\r\n * @returns A React component\r\n */\r\nexport const ColorStepGradientComponent: FunctionComponent<PrimitiveProps<GradientBlockColorStep>> = (props) => {\r\n return (\r\n <Color3GradientCast\r\n {...props}\r\n value={{ value1: props.value.color, step: props.value.step }}\r\n onChange={(gradient) => props.onChange(new GradientBlockColorStep(gradient.step, gradient.value1))}\r\n />\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"gradient.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/gradient.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type FunctionComponent, useEffect, useState } from \"react\";\r\nimport { type PrimitiveProps } from \"./primitive\";\r\nimport { makeStyles, tokens } from \"@fluentui/react-components\";\r\n\r\nimport { SyncedSliderInput } from \"./syncedSlider\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup } from \"./colorPicker\";\r\nimport { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from \"core/Misc/gradients\";\r\nimport { GradientBlockColorStep } from \"core/Materials/Node/Blocks/gradientBlock\";\r\n\r\nconst useGradientStyles = makeStyles({\r\n container: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: tokens.spacingHorizontalXS, // Reduced gap\r\n width: \"100%\",\r\n minWidth: 0,\r\n overflow: \"hidden\",\r\n },\r\n // Wrapper for factor spin buttons - fixed width, doesn't grow\r\n valueWrapper: {\r\n flex: \"0 0 auto\", // Fixed size, no grow, no shrink\r\n },\r\n // Wrapper for color pickers - fixed size since they're just swatches\r\n colorWrapper: {\r\n flex: \"0 0 auto\",\r\n alignContent: \"center\",\r\n },\r\n // Wrapper for the step slider - takes remaining space and can shrink\r\n stepSliderWrapper: {\r\n flex: \"1 1 0\", // Grow to fill available space\r\n minWidth: \"100px\", // Minimum to fit slider + spinbutton\r\n },\r\n});\r\n\r\ntype GradientProps<T extends number \| Color3 \| Color4> = {\r\n value1: T;\r\n value2?: T;\r\n step: number;\r\n};\r\n\r\n/*\r\n Gradient component that displays 1 or 2 color or number inputs next to a slider\r\n * @param props - Component props containing gradient value and change handlers\r\n * @returns A React component\r\n /\r\nconst Gradient: FunctionComponent<PrimitiveProps<GradientProps<number \| Color3 \| Color4>>> = (props) => {\r\n Gradient.displayName = \"Gradient\";\r\n const [gradient, setGradient] = useState(props.value);\r\n const classes = useGradientStyles();\r\n\r\n useEffect(() => {\r\n setGradient(props.value); // Re-render if props.value changes\r\n }, [props.value]);\r\n\r\n const gradientChange = (newGradient: GradientProps<number \| Color3 \| Color4>) => {\r\n setGradient(newGradient);\r\n props.onChange(newGradient);\r\n };\r\n // Only use compact mode when there are numeric values (spinbuttons) taking up space\r\n const hasNumericValues =\r\n !(gradient.value1 instanceof Color3 \|\| gradient.value1 instanceof Color4) \|\|\r\n (gradient.value2 !== undefined && !(gradient.value2 instanceof Color3 \|\| gradient.value2 instanceof Color4));\r\n\r\n return (\r\n <div id=\"gradientContainer\" className={classes.container}>\r\n <div className={gradient.value1 instanceof Color3 \|\| gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper}>\r\n {gradient.value1 instanceof Color3 \|\| gradient.value1 instanceof Color4 ? (\r\n <ColorPickerPopup value={gradient.value1} onChange={(color) => gradientChange({ ...gradient, value1: color })} />\r\n ) : (\r\n <SyncedSliderInput step={0.01} precision={2} value={gradient.value1} onChange={(val) => gradientChange({ ...gradient, value1: val })} compact />\r\n )}\r\n </div>\r\n {gradient.value2 !== undefined && (\r\n <div className={gradient.value2 instanceof Color3 \|\| gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper}>\r\n {gradient.value2 instanceof Color3 \|\| gradient.value2 instanceof Color4 ? (\r\n <ColorPickerPopup value={gradient.value2} onChange={(color) => gradientChange({ ...gradient, value2: color })} />\r\n ) : (\r\n <SyncedSliderInput step={0.01} precision={2} value={gradient.value2} onChange={(val) => gradientChange({ ...gradient, value2: val })} compact />\r\n )}\r\n </div>\r\n )}\r\n\r\n <div className={classes.stepSliderWrapper}>\r\n <SyncedSliderInput\r\n notifyOnlyOnRelease={true}\r\n min={0}\r\n max={1}\r\n step={0.01}\r\n precision={2}\r\n value={gradient.step}\r\n onChange={(val) => gradientChange({ ...gradient, step: val })}\r\n compact={hasNumericValues}\r\n growSlider={!hasNumericValues}\r\n />\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nconst FactorGradientCast = Gradient as FunctionComponent<PrimitiveProps<GradientProps<number>>>;\r\nconst Color3GradientCast = Gradient as FunctionComponent<PrimitiveProps<GradientProps<Color3>>>;\r\nconst Color4GradientCast = Gradient as FunctionComponent<PrimitiveProps<GradientProps<Color4>>>;\r\n\r\n/\r\n Component wrapper for FactorGradient that provides slider inputs for factor1, factor2, and gradient step\r\n * @param props - Component props containing FactorGradient value and change handler\r\n * @returns A React component\r\n /\r\nexport const FactorGradientComponent: FunctionComponent<PrimitiveProps<FactorGradient>> = (props) => {\r\n return (\r\n <FactorGradientCast\r\n {...props}\r\n value={{ value1: props.value.factor1, value2: props.value.factor2, step: props.value.gradient }}\r\n onChange={(gradient) => props.onChange(new FactorGradient(gradient.step, gradient.value1, gradient.value2))}\r\n />\r\n );\r\n};\r\n/\r\n Component wrapper for Color3Gradient that provides color picker and gradient step slider\r\n * @param props - Component props containing Color3Gradient value and change handler\r\n * @returns A React component\r\n /\r\nexport const Color3GradientComponent: FunctionComponent<PrimitiveProps<Color3Gradient>> = (props) => {\r\n return (\r\n <Color3GradientCast\r\n {...props}\r\n value={{ value1: props.value.color, step: props.value.gradient }}\r\n onChange={(gradient) => props.onChange(new Color3Gradient(gradient.step, gradient.value1))}\r\n />\r\n );\r\n};\r\n/\r\n Component wrapper for Color4Gradient that provides color pickers for color1, color2, and gradient step slider\r\n * @param props - Component props containing Color4Gradient value and change handler\r\n * @returns A React component\r\n /\r\nexport const Color4GradientComponent: FunctionComponent<PrimitiveProps<Color4Gradient>> = (props) => {\r\n return (\r\n <Color4GradientCast\r\n {...props}\r\n value={{ value1: props.value.color1, value2: props.value.color2, step: props.value.gradient }}\r\n onChange={(gradient) => props.onChange(new Color4Gradient(gradient.step, gradient.value1, gradient.value2))}\r\n />\r\n );\r\n};\r\n/\r\n Component wrapper for GradientBlockColorStep that provides color picker and step slider\r\n * @param props - Component props containing GradientBlockColorStep value and change handler\r\n * @returns A React component\r\n */\r\nexport const ColorStepGradientComponent: FunctionComponent<PrimitiveProps<GradientBlockColorStep>> = (props) => {\r\n return (\r\n <Color3GradientCast\r\n {...props}\r\n value={{ value1: props.value.color, step: props.value.step }}\r\n onChange={(gradient) => props.onChange(new GradientBlockColorStep(gradient.step, gradient.value1))}\r\n />\r\n );\r\n};\r\n"]}

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

@@ -1,4 +1,4 @@
-import type { FunctionComponent, MouseEventHandler } from "react";
+import { type FunctionComponent, type MouseEventHandler } from "react";
 export type InfoLabelProps = {
     htmlFor: string;
     info?: JSX.Element;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"infoLabel.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/infoLabel.tsx"],"names":[],"mappings":";~~AACA~~,OAAO,~~EAAE~~,WAAW,EAAE,MAAM,OAAO,CAAC;~~AACpC~~,OAAO,EAAE,WAAW,EAAE,SAAS,IAAI,eAAe,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACjH,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAiBrD,MAAM,kBAAkB,GAAG,UAAU,CAAC;IAClC,SAAS,EAAE;QACP,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,YAAY;KAC1B;IACD,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,CAAC;KACd;IACD,SAAS,EAAE;QACP,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KAC3B;IACD,QAAQ,EAAE;QACN,MAAM,EAAE,SAAS;KACpB;CACJ,CAAC,CAAC;AACH;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAsC,CAAC,KAAK,EAAE,EAAE;IAClE,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;IACpC,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,MAAM,WAAW,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IAE3C,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAAG,KAAK,CAAC,IAAI,GAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnG,MAAM,cAAc,GAAG,WAAW,IAAI,KAAK,CAAC,aAAa,CAAC;IAE1D,2CAA2C;IAC3C,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,CAAa,EAAE,EAAE;QACd,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,aAAa,EAAE,CAAC;YACnC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC;IACL,CAAC,EACD,CAAC,KAAK,CAAC,aAAa,CAAC,CACxB,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,CACjB,KAAC,eAAe,IACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,YAAY,CAAC,KAAK,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EACvF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,EACrE,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,OAAO,EAAE,WAAW,YAEpB,KAAC,WAAW,IAAC,SAAS,EAAE,OAAO,CAAC,SAAS,YAAG,KAAK,CAAC,KAAK,GAAe,GACxD,CACrB,CAAC,CAAC,CAAC,CACA,cAAK,SAAS,EAAE,YAAY,CAAC,KAAK,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,OAAO,EAAE,WAAW,YAClJ,KAAC,WAAW,IAAC,SAAS,EAAE,OAAO,CAAC,SAAS,YAAG,KAAK,CAAC,KAAK,GAAe,GACpE,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent, MouseEvent, MouseEventHandler ~~} from \"react\";\r\nimport {~~ useCallback } from \"react\";\r\nimport { Body1Strong, InfoLabel as FluentInfoLabel, makeStyles, mergeClasses } from \"@fluentui/react-components\";\r\nimport { useKeyState } from \"../hooks/keyboardHooks\";\r\n\r\nexport type InfoLabelProps = {\r\n htmlFor: string; // required ID of the element whose label we are applying\r\n info?: JSX.Element;\r\n label: string;\r\n className?: string;\r\n /*\r\n When true, applies flex layout styling to the label slot for proper truncation in flex containers\r\n /\r\n flexLabel?: boolean;\r\n /\r\n Handler for right-click context menu. Also triggers on Ctrl+click.\r\n /\r\n onContextMenu?: MouseEventHandler;\r\n};\r\nexport type InfoLabelParentProps = Omit<InfoLabelProps, \"htmlFor\">;\r\nconst useInfoLabelStyles = makeStyles({\r\n infoPopup: {\r\n whiteSpace: \"normal\",\r\n wordBreak: \"break-word\",\r\n },\r\n labelSlot: {\r\n display: \"flex\",\r\n minWidth: 0,\r\n },\r\n labelText: {\r\n whiteSpace: \"nowrap\",\r\n overflow: \"hidden\",\r\n textOverflow: \"ellipsis\",\r\n },\r\n copyable: {\r\n cursor: \"pointer\",\r\n },\r\n});\r\n/\r\n Renders a label with an optional popup containing more info\r\n * @param props\r\n * @returns\r\n */\r\nexport const InfoLabel: FunctionComponent<InfoLabelProps> = (props) => {\r\n InfoLabel.displayName = \"InfoLabel\";\r\n const classes = useInfoLabelStyles();\r\n\r\n const ctrlPressed = useKeyState(\"Control\");\r\n\r\n const infoContent = props.info ? <div className={classes.infoPopup}>{props.info}</div> : undefined;\r\n\r\n const showCopyCursor = ctrlPressed && props.onContextMenu;\r\n\r\n // Handle Ctrl+click as context menu action\r\n const handleClick = useCallback(\r\n (e: MouseEvent) => {\r\n if (e.ctrlKey && props.onContextMenu) {\r\n props.onContextMenu(e);\r\n }\r\n },\r\n [props.onContextMenu]\r\n );\r\n\r\n return infoContent ? (\r\n <FluentInfoLabel\r\n htmlFor={props.htmlFor}\r\n info={infoContent}\r\n className={mergeClasses(props.className, showCopyCursor ? classes.copyable : undefined)}\r\n label={props.flexLabel ? { className: classes.labelSlot } : undefined}\r\n onContextMenu={props.onContextMenu}\r\n onClick={handleClick}\r\n >\r\n <Body1Strong className={classes.labelText}>{props.label}</Body1Strong>\r\n </FluentInfoLabel>\r\n ) : (\r\n <div className={mergeClasses(props.className, showCopyCursor ? classes.copyable : undefined)} onContextMenu={props.onContextMenu} onClick={handleClick}>\r\n <Body1Strong className={classes.labelText}>{props.label}</Body1Strong>\r\n </div>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"infoLabel.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/infoLabel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmE,WAAW,EAAE,MAAM,OAAO,CAAC;AACrG,OAAO,EAAE,WAAW,EAAE,SAAS,IAAI,eAAe,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACjH,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAiBrD,MAAM,kBAAkB,GAAG,UAAU,CAAC;IAClC,SAAS,EAAE;QACP,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,YAAY;KAC1B;IACD,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,CAAC;KACd;IACD,SAAS,EAAE;QACP,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KAC3B;IACD,QAAQ,EAAE;QACN,MAAM,EAAE,SAAS;KACpB;CACJ,CAAC,CAAC;AACH;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAsC,CAAC,KAAK,EAAE,EAAE;IAClE,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;IACpC,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,MAAM,WAAW,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IAE3C,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAAG,KAAK,CAAC,IAAI,GAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnG,MAAM,cAAc,GAAG,WAAW,IAAI,KAAK,CAAC,aAAa,CAAC;IAE1D,2CAA2C;IAC3C,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,CAAa,EAAE,EAAE;QACd,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,aAAa,EAAE,CAAC;YACnC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC;IACL,CAAC,EACD,CAAC,KAAK,CAAC,aAAa,CAAC,CACxB,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,CACjB,KAAC,eAAe,IACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,YAAY,CAAC,KAAK,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EACvF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,EACrE,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,OAAO,EAAE,WAAW,YAEpB,KAAC,WAAW,IAAC,SAAS,EAAE,OAAO,CAAC,SAAS,YAAG,KAAK,CAAC,KAAK,GAAe,GACxD,CACrB,CAAC,CAAC,CAAC,CACA,cAAK,SAAS,EAAE,YAAY,CAAC,KAAK,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,OAAO,EAAE,WAAW,YAClJ,KAAC,WAAW,IAAC,SAAS,EAAE,OAAO,CAAC,SAAS,YAAG,KAAK,CAAC,KAAK,GAAe,GACpE,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type FunctionComponent, type MouseEvent, type MouseEventHandler, useCallback } from \"react\";\r\nimport { Body1Strong, InfoLabel as FluentInfoLabel, makeStyles, mergeClasses } from \"@fluentui/react-components\";\r\nimport { useKeyState } from \"../hooks/keyboardHooks\";\r\n\r\nexport type InfoLabelProps = {\r\n htmlFor: string; // required ID of the element whose label we are applying\r\n info?: JSX.Element;\r\n label: string;\r\n className?: string;\r\n /*\r\n When true, applies flex layout styling to the label slot for proper truncation in flex containers\r\n /\r\n flexLabel?: boolean;\r\n /\r\n Handler for right-click context menu. Also triggers on Ctrl+click.\r\n /\r\n onContextMenu?: MouseEventHandler;\r\n};\r\nexport type InfoLabelParentProps = Omit<InfoLabelProps, \"htmlFor\">;\r\nconst useInfoLabelStyles = makeStyles({\r\n infoPopup: {\r\n whiteSpace: \"normal\",\r\n wordBreak: \"break-word\",\r\n },\r\n labelSlot: {\r\n display: \"flex\",\r\n minWidth: 0,\r\n },\r\n labelText: {\r\n whiteSpace: \"nowrap\",\r\n overflow: \"hidden\",\r\n textOverflow: \"ellipsis\",\r\n },\r\n copyable: {\r\n cursor: \"pointer\",\r\n },\r\n});\r\n/\r\n Renders a label with an optional popup containing more info\r\n * @param props\r\n * @returns\r\n */\r\nexport const InfoLabel: FunctionComponent<InfoLabelProps> = (props) => {\r\n InfoLabel.displayName = \"InfoLabel\";\r\n const classes = useInfoLabelStyles();\r\n\r\n const ctrlPressed = useKeyState(\"Control\");\r\n\r\n const infoContent = props.info ? <div className={classes.infoPopup}>{props.info}</div> : undefined;\r\n\r\n const showCopyCursor = ctrlPressed && props.onContextMenu;\r\n\r\n // Handle Ctrl+click as context menu action\r\n const handleClick = useCallback(\r\n (e: MouseEvent) => {\r\n if (e.ctrlKey && props.onContextMenu) {\r\n props.onContextMenu(e);\r\n }\r\n },\r\n [props.onContextMenu]\r\n );\r\n\r\n return infoContent ? (\r\n <FluentInfoLabel\r\n htmlFor={props.htmlFor}\r\n info={infoContent}\r\n className={mergeClasses(props.className, showCopyCursor ? classes.copyable : undefined)}\r\n label={props.flexLabel ? { className: classes.labelSlot } : undefined}\r\n onContextMenu={props.onContextMenu}\r\n onClick={handleClick}\r\n >\r\n <Body1Strong className={classes.labelText}>{props.label}</Body1Strong>\r\n </FluentInfoLabel>\r\n ) : (\r\n <div className={mergeClasses(props.className, showCopyCursor ? classes.copyable : undefined)} onContextMenu={props.onContextMenu} onClick={handleClick}>\r\n <Body1Strong className={classes.labelText}>{props.label}</Body1Strong>\r\n </div>\r\n );\r\n};\r\n"]}

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

@@ -1,5 +1,5 @@
-import type { SpinnerProps } from "@fluentui/react-components";
-import type { ComponentProps, ComponentType, ElementRef } from "react";
+import { type SpinnerProps } from "@fluentui/react-components";
+import { type ComponentProps, type ComponentType, type ElementRef } from "react";
 type LazyComponentProps = {
     spinnerSize?: SpinnerProps["size"];
     spinnerLabel?: string;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"lazyComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/lazyComponent.tsx"],"names":[],"mappings":";~~AAGA~~,OAAO,~~EAAE~~,OAAO,EAAE,MAAM,4BAA4B,CAAC;~~AACrD~~,OAAO,~~EAAE~~,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAOnD~~;;;;;;GAMG;AACH,MAAM,UAAU,iBAAiB,CAAwC,iBAA4C,EAAE,YAAiC;IAGpJ,gEAAgE;IAChE,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE;QAClC,MAAM,SAAS,GAAG,MAAM,iBAAiB,EAAE,CAAC;QAC5C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,OAAO,UAAU,CAAiE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;QAC7F,MAAM,EAAE,WAAW,GAAG,YAAY,EAAE,WAAW,EAAE,YAAY,GAAG,YAAY,EAAE,YAAY,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QAE9G,MAAM,cAAc,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,CAAC;QAExC,OAAO,CACH,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,OAAO,IAAC,GAAG,EAAE,GAAsC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,GAAI,YAChH,KAAC,aAAa,OAAM,cAA6C,GAAI,GAC9D,CACd,CAAC;IACN,CAAC,CAAC,CAAC;AACP,CAAC","sourcesContent":["import type { SpinnerProps } from \"@fluentui/react-components\";\r\nimport type { ComponentProps, ComponentType, ElementRef, Ref ~~} from \"react\";\r\n\r\nimport { Spinner } from \"@fluentui/react-components\";\r\nimport {~~ forwardRef, lazy, Suspense } from \"react\";\r\n\r\ntype LazyComponentProps = {\r\n spinnerSize?: SpinnerProps[\"size\"];\r\n spinnerLabel?: string;\r\n};\r\n\r\n/*\r\n Creates a lazy component wrapper that only calls the async function to get the underlying component when the lazy component is actually mounted.\r\n * This allows deferring imports until they are needed. While the underlying component is being loaded, a spinner is displayed.\r\n * @param getComponentAsync A function that returns a promise resolving to the component.\r\n * @param defaultProps Options for the loading spinner.\r\n * @returns A React component that displays a spinner while loading the async component.\r\n */\r\nexport function MakeLazyComponent<ComponentT extends ComponentType<any>>(getComponentAsync: () => Promise<ComponentT>, defaultProps?: LazyComponentProps) {\r\n type WrappedComponentProps = ComponentProps<ComponentT> & LazyComponentProps;\r\n\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n const LazyComponent = lazy(async () => {\r\n const component = await getComponentAsync();\r\n return { default: component };\r\n });\r\n\r\n return forwardRef<ElementRef<typeof Spinner \| ComponentT>, WrappedComponentProps>((props, ref) => {\r\n const { spinnerSize = defaultProps?.spinnerSize, spinnerLabel = defaultProps?.spinnerLabel, ...rest } = props;\r\n\r\n const componentProps = { ...rest, ref };\r\n\r\n return (\r\n <Suspense fallback={<Spinner ref={ref as Ref<ElementRef<typeof Spinner>>} size={spinnerSize} label={spinnerLabel} />}>\r\n <LazyComponent {...(componentProps as ComponentProps<ComponentT>)} />\r\n </Suspense>\r\n );\r\n });\r\n}\r\n"]}
1	+ {"version":3,"file":"lazyComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/lazyComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAsE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOvH;;;;;;GAMG;AACH,MAAM,UAAU,iBAAiB,CAAwC,iBAA4C,EAAE,YAAiC;IAGpJ,gEAAgE;IAChE,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE;QAClC,MAAM,SAAS,GAAG,MAAM,iBAAiB,EAAE,CAAC;QAC5C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,OAAO,UAAU,CAAiE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;QAC7F,MAAM,EAAE,WAAW,GAAG,YAAY,EAAE,WAAW,EAAE,YAAY,GAAG,YAAY,EAAE,YAAY,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QAE9G,MAAM,cAAc,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,CAAC;QAExC,OAAO,CACH,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,OAAO,IAAC,GAAG,EAAE,GAAsC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,GAAI,YAChH,KAAC,aAAa,OAAM,cAA6C,GAAI,GAC9D,CACd,CAAC;IACN,CAAC,CAAC,CAAC;AACP,CAAC","sourcesContent":["import { type SpinnerProps, Spinner } from \"@fluentui/react-components\";\r\nimport { type ComponentProps, type ComponentType, type ElementRef, type Ref, forwardRef, lazy, Suspense } from \"react\";\r\n\r\ntype LazyComponentProps = {\r\n spinnerSize?: SpinnerProps[\"size\"];\r\n spinnerLabel?: string;\r\n};\r\n\r\n/*\r\n Creates a lazy component wrapper that only calls the async function to get the underlying component when the lazy component is actually mounted.\r\n * This allows deferring imports until they are needed. While the underlying component is being loaded, a spinner is displayed.\r\n * @param getComponentAsync A function that returns a promise resolving to the component.\r\n * @param defaultProps Options for the loading spinner.\r\n * @returns A React component that displays a spinner while loading the async component.\r\n */\r\nexport function MakeLazyComponent<ComponentT extends ComponentType<any>>(getComponentAsync: () => Promise<ComponentT>, defaultProps?: LazyComponentProps) {\r\n type WrappedComponentProps = ComponentProps<ComponentT> & LazyComponentProps;\r\n\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n const LazyComponent = lazy(async () => {\r\n const component = await getComponentAsync();\r\n return { default: component };\r\n });\r\n\r\n return forwardRef<ElementRef<typeof Spinner \| ComponentT>, WrappedComponentProps>((props, ref) => {\r\n const { spinnerSize = defaultProps?.spinnerSize, spinnerLabel = defaultProps?.spinnerLabel, ...rest } = props;\r\n\r\n const componentProps = { ...rest, ref };\r\n\r\n return (\r\n <Suspense fallback={<Spinner ref={ref as Ref<ElementRef<typeof Spinner>>} size={spinnerSize} label={spinnerLabel} />}>\r\n <LazyComponent {...(componentProps as ComponentProps<ComponentT>)} />\r\n </Suspense>\r\n );\r\n });\r\n}\r\n"]}

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

@@ -1,4 +1,4 @@
-import type { ImmutablePrimitiveProps } from "./primitive.js";
+import { type ImmutablePrimitiveProps } from "./primitive.js";
 export type LinkProps = ImmutablePrimitiveProps<string> & {
     /**
      * Used if you want to handle the link click yourself

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

	@@ -1 +1 @@
1	- {"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,QAAQ,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAoBjF,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAkD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3F,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACrD,gEAAgE;IAChE,MAAM,aAAa,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAE1D,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,aAAa,cAAE,KAAK,CAAC,KAAK,GAAiB,IACnC,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, Caption1, 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 /Force link size /\r\n size?: \"small\" \| \"medium\";\r\n};\r\n\r\nexport const Link = forwardRef<HTMLAnchorElement, PropsWithChildren<LinkProps>>((props, ref) => {\r\n const { target, url, onLink, size, ...rest } = props;\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n const TextComponent = size === \"small\" ? Caption1 : Body1;\r\n\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 <TextComponent>{props.value}</TextComponent>\r\n </FluentLink>\r\n );\r\n});\r\nLink.displayName = \"Link\";\r\n"]}
1	+ {"version":3,"file":"link.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,UAAU,EAAE,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAoBjF,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAkD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3F,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACrD,gEAAgE;IAChE,MAAM,aAAa,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAE1D,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,aAAa,cAAE,KAAK,CAAC,KAAK,GAAiB,IACnC,CAChB,CAAC;AACN,CAAC,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC","sourcesContent":["import { type PropsWithChildren, forwardRef } from \"react\";\r\n\r\nimport { type ImmutablePrimitiveProps } from \"./primitive\";\r\n\r\nimport { Body1, Caption1, 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 /Force link size /\r\n size?: \"small\" \| \"medium\";\r\n};\r\n\r\nexport const Link = forwardRef<HTMLAnchorElement, PropsWithChildren<LinkProps>>((props, ref) => {\r\n const { target, url, onLink, size, ...rest } = props;\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n const TextComponent = size === \"small\" ? Caption1 : Body1;\r\n\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 <TextComponent>{props.value}</TextComponent>\r\n </FluentLink>\r\n );\r\n});\r\nLink.displayName = \"Link\";\r\n"]}

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

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 /**
  * Represents an item in a list
  */