npm - @babylonjs/shared-ui-components - Versions diffs - 8.30.2 → 8.30.4 - Mend

@babylonjs/shared-ui-components 8.30.2 → 8.30.4

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

package/fluent/primitives/dropdown.js CHANGED Viewed

@@ -1,9 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Dropdown as FluentDropdown, makeStyles, Option } from "@fluentui/react-components";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown as FluentDropdown, makeStyles, mergeClasses, Option, useId } from "@fluentui/react-components";
 import { useEffect, useState } from "react";
 import { CustomTokens, UniformWidthStyling } from "./utils.js";
+import { InfoLabel } from "./infoLabel.js";
 const useDropdownStyles = makeStyles({
     dropdown: { ...UniformWidthStyling, minWidth: CustomTokens.inputWidth },
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center", // align items vertically
+        gap: "4px",
+    },
 });
 /**
  * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true
@@ -12,19 +19,22 @@ const useDropdownStyles = makeStyles({
  * @returns dropdown component
  */
 export const Dropdown = (props) => {
+    Dropdown.displayName = "Dropdown";
     const classes = useDropdownStyles();
     const { options, value } = props;
     const [defaultVal, setDefaultVal] = useState(props.value);
     useEffect(() => {
         setDefaultVal(value);
     }, [props.value]);
-    return (_jsx(FluentDropdown, { disabled: props.disabled, size: "medium", className: classes.dropdown, onOptionSelect: (evt, data) => {
-            const value = typeof props.value === "number" ? Number(data.optionValue) : data.optionValue;
-            if (value !== undefined) {
-                setDefaultVal(value);
-                props.onChange(value);
-            }
-        }, selectedOptions: [defaultVal.toString()], value: options.find((o) => o.value === defaultVal)?.label, children: options.map((option) => (_jsx(Option, { className: classes.dropdown, value: option.value.toString(), disabled: false, children: option.label }, option.label))) }));
+    const id = useId("dropdown");
+    const mergedClassName = mergeClasses(classes.dropdown, props.className);
+    return (_jsxs("div", { className: classes.container, children: [props.infoLabel && _jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), _jsx(FluentDropdown, { id: id, disabled: props.disabled, size: "medium", className: mergedClassName, onOptionSelect: (evt, data) => {
+                    const value = typeof props.value === "number" ? Number(data.optionValue) : data.optionValue;
+                    if (value !== undefined) {
+                        setDefaultVal(value);
+                        props.onChange(value);
+                    }
+                }, selectedOptions: [defaultVal.toString()], value: options.find((o) => o.value === defaultVal)?.label, children: options.map((option) => (_jsx(Option, { className: classes.dropdown, value: option.value.toString(), disabled: false, children: option.label }, option.label))) })] }));
 };
 export const NumberDropdown = Dropdown;
 export const StringDropdown = Dropdown;

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,MAAM,EAAE,MAAM,4BAA4B,CAAC;~~AAC5F~~,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;~~AAE5D~~,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,QAAQ,EAAE,EAAE,GAAG,mBAAmB,EAAE,QAAQ,EAAE,YAAY,CAAC,UAAU,EAAE;~~CAC1E~~,CAAC,CAAC;AAkBH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4D,CAAC,KAAK,EAAE,EAAE;IACvF,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;~~IAElB~~,OAAO,CACH,KAAC,cAAc,IACX,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,~~OAAO~~,~~CAAC~~,~~QAAQ,EAC3B,~~cAAc,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;~~YAC1B~~,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;~~YAC5F~~,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;~~gBACtB~~,aAAa,CAAC,KAAK,CAAC,CAAC;~~gBACrB~~,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;~~YAC1B~~,CAAC;~~QACL~~,CAAC,EACD,eAAe,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,EACxC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,EAAE,KAAK,YAExD,OAAO,CAAC,GAAG,CAAC,CAAC,MAA6C,EAAE,EAAE,CAAC,CAC5D,KAAC,MAAM,IAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAqB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,YAClG,MAAM,CAAC,KAAK,IADyB,MAAM,CAAC,KAAK,CAE7C,CACZ,CAAC,GACW,~~CACpB~~,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAoD,CAAC;AACnF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAoD,CAAC","sourcesContent":["import { Dropdown as FluentDropdown, makeStyles, Option } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { CustomTokens, UniformWidthStyling } from \"./utils\";\r\n\r\nconst useDropdownStyles = makeStyles({\r\n dropdown: { ...UniformWidthStyling, minWidth: CustomTokens.inputWidth },\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 const classes = useDropdownStyles();\r\n const { options, value } = props;\r\n const [defaultVal, setDefaultVal] = useState(props.value);\r\n\r\n useEffect(() => {\r\n setDefaultVal(value);\r\n }, [props.value]);\r\n\r\n return (\r\n <FluentDropdown\r\n disabled={props.disabled}\r\n size=\"medium\"\r\n className={~~classes.dropdown~~}\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={options.find((o) => o.value === defaultVal)?.label}\r\n >\r\n {options.map((option: DropdownOption<AcceptedDropdownValue>) => (\r\n <Option className={classes.dropdown} key={option.label} value={option.value.toString()} disabled={false}>\r\n {option.label}\r\n </Option>\r\n ))}\r\n </FluentDropdown>\r\n );\r\n};\r\n\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":";AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACjH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,QAAQ,EAAE,EAAE,GAAG,mBAAmB,EAAE,QAAQ,EAAE,YAAY,CAAC,UAAU,EAAE;IACvE,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,QAAQ,EAAE,yBAAyB;QACnD,GAAG,EAAE,KAAK;KACb;CACJ,CAAC,CAAC;AAkBH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4D,CAAC,KAAK,EAAE,EAAE;IACvF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;IAClC,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAClB,MAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;IAE7B,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAExE,OAAO,CACH,eAAK,SAAS,EAAE,OAAO,CAAC,SAAS,aAC5B,KAAK,CAAC,SAAS,IAAI,KAAC,SAAS,OAAK,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE,EAAE,GAAI,EACnE,KAAC,cAAc,IACX,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,eAAe,EAC1B,cAAc,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;oBAC1B,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;oBAC5F,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;wBACtB,aAAa,CAAC,KAAK,CAAC,CAAC;wBACrB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;oBAC1B,CAAC;gBACL,CAAC,EACD,eAAe,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,EACxC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,EAAE,KAAK,YAExD,OAAO,CAAC,GAAG,CAAC,CAAC,MAA6C,EAAE,EAAE,CAAC,CAC5D,KAAC,MAAM,IAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAqB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,YAClG,MAAM,CAAC,KAAK,IADyB,MAAM,CAAC,KAAK,CAE7C,CACZ,CAAC,GACW,IACf,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAoD,CAAC;AACnF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAoD,CAAC","sourcesContent":["import { Dropdown as FluentDropdown, makeStyles, mergeClasses, Option, useId } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { CustomTokens, UniformWidthStyling } from \"./utils\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\n\r\nconst useDropdownStyles = makeStyles({\r\n dropdown: { ...UniformWidthStyling, minWidth: CustomTokens.inputWidth },\r\n container: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n justifyContent: \"center\", // align items vertically\r\n gap: \"4px\",\r\n },\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\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.dropdown, props.className);\r\n\r\n return (\r\n <div className={classes.container}>\r\n {props.infoLabel && <InfoLabel {...props.infoLabel} htmlFor={id} />}\r\n <FluentDropdown\r\n id={id}\r\n disabled={props.disabled}\r\n size=\"medium\"\r\n className={mergedClassName}\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={options.find((o) => o.value === defaultVal)?.label}\r\n >\r\n {options.map((option: DropdownOption<AcceptedDropdownValue>) => (\r\n <Option className={classes.dropdown} 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/gradient.js CHANGED Viewed

@@ -37,6 +37,7 @@ const useGradientStyles = makeStyles({
  * @returns A React component
  */
 const Gradient = (props) => {
+    Gradient.displayName = "Gradient";
     const [gradient, setGradient] = useState(props.value);
     const classes = useGradientStyles();
     useEffect(() => {

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.spacingHorizontalS,\r\n width: \"100%\",\r\n },\r\n // Wrapper for each slider to control its size\r\n valueWrapper: {\r\n flex: \"0 1 auto\", // Don't grow, can shrink, size based on content\r\n alignContent: \"center\",\r\n minWidth: \"80px\", // Minimum width to keep usable\r\n maxWidth: \"100px\", // Maximum width to prevent them from getting too wide\r\n },\r\n // Wrapper for color pickers - much smaller since they're just swatches\r\n colorWrapper: {\r\n alignContent: \"center\",\r\n // No flex properties - just take natural size\r\n },\r\n // Wrapper for the step slider to take remaining space\r\n stepSliderWrapper: {\r\n flex: \"1 0 auto\", // Can grow, don't shrink, size based on content\r\n minWidth: \"100px\",\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 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 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} value={gradient.value1} onChange={(val) => gradientChange({ ...gradient, value1: val })} />\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} value={gradient.value2} onChange={(val) => gradientChange({ ...gradient, value2: val })} />\r\n )}\r\n </div>\r\n )}\r\n\r\n <div className={classes.stepSliderWrapper}>\r\n <SyncedSliderInput notifyOnlyOnRelease={true} min={0} max={1} step={0.01} value={gradient.step} onChange={(val) => gradientChange({ ...gradient, step: val })} />\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 } 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.spacingHorizontalS,\r\n width: \"100%\",\r\n },\r\n // Wrapper for each slider to control its size\r\n valueWrapper: {\r\n flex: \"0 1 auto\", // Don't grow, can shrink, size based on content\r\n alignContent: \"center\",\r\n minWidth: \"80px\", // Minimum width to keep usable\r\n maxWidth: \"100px\", // Maximum width to prevent them from getting too wide\r\n },\r\n // Wrapper for color pickers - much smaller since they're just swatches\r\n colorWrapper: {\r\n alignContent: \"center\",\r\n // No flex properties - just take natural size\r\n },\r\n // Wrapper for the step slider to take remaining space\r\n stepSliderWrapper: {\r\n flex: \"1 0 auto\", // Can grow, don't shrink, size based on content\r\n minWidth: \"100px\",\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 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} value={gradient.value1} onChange={(val) => gradientChange({ ...gradient, value1: val })} />\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} value={gradient.value2} onChange={(val) => gradientChange({ ...gradient, value2: val })} />\r\n )}\r\n </div>\r\n )}\r\n\r\n <div className={classes.stepSliderWrapper}>\r\n <SyncedSliderInput notifyOnlyOnRelease={true} min={0} max={1} step={0.01} value={gradient.step} onChange={(val) => gradientChange({ ...gradient, step: val })} />\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.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { Body1, InfoLabel as FluentInfoLabel } from "@fluentui/react-components"
  * @returns
  */
 export const InfoLabel = (props) => {
+    InfoLabel.displayName = "InfoLabel";
     return (_jsx(FluentInfoLabel, { htmlFor: props.htmlFor, info: props.info, children: _jsx(Body1, { children: props.label }) }));
 };
 //# sourceMappingURL=infoLabel.js.map

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,KAAK,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAC;AASjF;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAsC,CAAC,KAAK,EAAE,EAAE;IAClE,OAAO,CACH,KAAC,eAAe,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,YACrD,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,GACd,CACrB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { Body1, InfoLabel as FluentInfoLabel } from \"@fluentui/react-components\";\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};\r\nexport type InfoLabelParentProps = Omit<InfoLabelProps, \"htmlFor\">;\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 return (\r\n <FluentInfoLabel htmlFor={props.htmlFor} info={props.info}>\r\n <Body1>{props.label}</Body1>\r\n </FluentInfoLabel>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"infoLabel.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/infoLabel.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAC;AASjF;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAsC,CAAC,KAAK,EAAE,EAAE;IAClE,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;IACpC,OAAO,CACH,KAAC,eAAe,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,YACrD,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,GACd,CACrB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { Body1, InfoLabel as FluentInfoLabel } from \"@fluentui/react-components\";\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};\r\nexport type InfoLabelParentProps = Omit<InfoLabelProps, \"htmlFor\">;\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 return (\r\n <FluentInfoLabel htmlFor={props.htmlFor} info={props.info}>\r\n <Body1>{props.label}</Body1>\r\n </FluentInfoLabel>\r\n );\r\n};\r\n"]}

package/fluent/primitives/messageBar.js CHANGED Viewed

@@ -9,6 +9,7 @@ const useClasses = makeStyles({
     },
 });
 export const MessageBar = (props) => {
+    MessageBar.displayName = "MessageBar";
     const { message, title: header, intent, docLink } = props;
     const classes = useClasses();
     return (_jsx("div", { className: classes.container, children: _jsx(FluentMessageBar, { intent: intent, layout: "multiline", children: _jsxs(MessageBarBody, { children: [_jsx(MessageBarTitle, { children: header }), message, docLink && (_jsxs(_Fragment, { children: [" - ", _jsx(Link, { href: docLink, target: "_blank", rel: "noopener noreferrer", children: "Learn More" })] }))] }) }) }));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"messageBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/messageBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEjI,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,UAAU,GAAG,UAAU,CAAC;IAC1B,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM;KACvC;CACJ,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,CACH,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAC7B,KAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAC,WAAW,YAChD,MAAC,cAAc,eACX,KAAC,eAAe,cAAE,MAAM,GAAmB,EAC1C,OAAO,EACP,OAAO,IAAI,CACR,8BACK,KAAK,EACN,KAAC,IAAI,IAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,2BAEvD,IACR,CACN,IACY,GACF,GACjB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { MessageBar as FluentMessageBar, MessageBarTitle, MessageBarBody, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Link } from \"./link\";\r\n\r\nconst useClasses = makeStyles({\r\n container: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: tokens.spacingVerticalS, // 8px\r\n },\r\n});\r\n\r\ntype MessageBarProps = {\r\n message: string;\r\n title: string;\r\n docLink?: string;\r\n intent: \"info\" \| \"success\" \| \"warning\" \| \"error\";\r\n};\r\nexport const MessageBar: FunctionComponent<MessageBarProps> = (props) => {\r\n const { message, title: header, intent, docLink } = props;\r\n const classes = useClasses();\r\n\r\n return (\r\n <div className={classes.container}>\r\n <FluentMessageBar intent={intent} layout=\"multiline\">\r\n <MessageBarBody>\r\n <MessageBarTitle>{header}</MessageBarTitle>\r\n {message}\r\n {docLink && (\r\n <>\r\n {\" - \"}\r\n <Link href={docLink} target=\"_blank\" rel=\"noopener noreferrer\">\r\n Learn More\r\n </Link>\r\n </>\r\n )}\r\n </MessageBarBody>\r\n </FluentMessageBar>\r\n </div>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"messageBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/messageBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEjI,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,UAAU,GAAG,UAAU,CAAC;IAC1B,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM;KACvC;CACJ,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;IACtC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,CACH,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAC7B,KAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAC,WAAW,YAChD,MAAC,cAAc,eACX,KAAC,eAAe,cAAE,MAAM,GAAmB,EAC1C,OAAO,EACP,OAAO,IAAI,CACR,8BACK,KAAK,EACN,KAAC,IAAI,IAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,2BAEvD,IACR,CACN,IACY,GACF,GACjB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { MessageBar as FluentMessageBar, MessageBarTitle, MessageBarBody, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Link } from \"./link\";\r\n\r\nconst useClasses = makeStyles({\r\n container: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: tokens.spacingVerticalS, // 8px\r\n },\r\n});\r\n\r\ntype MessageBarProps = {\r\n message: string;\r\n title: string;\r\n docLink?: string;\r\n intent: \"info\" \| \"success\" \| \"warning\" \| \"error\";\r\n};\r\nexport const MessageBar: FunctionComponent<MessageBarProps> = (props) => {\r\n MessageBar.displayName = \"MessageBar\";\r\n const { message, title: header, intent, docLink } = props;\r\n const classes = useClasses();\r\n\r\n return (\r\n <div className={classes.container}>\r\n <FluentMessageBar intent={intent} layout=\"multiline\">\r\n <MessageBarBody>\r\n <MessageBarTitle>{header}</MessageBarTitle>\r\n {message}\r\n {docLink && (\r\n <>\r\n {\" - \"}\r\n <Link href={docLink} target=\"_blank\" rel=\"noopener noreferrer\">\r\n Learn More\r\n </Link>\r\n </>\r\n )}\r\n </MessageBarBody>\r\n </FluentMessageBar>\r\n </div>\r\n );\r\n};\r\n"]}

package/fluent/primitives/positionedPopover.js CHANGED Viewed

@@ -7,6 +7,7 @@ import { useState, useEffect } from "react";
  * @returns The positioned popover component
  */
 export const PositionedPopover = (props) => {
+    PositionedPopover.displayName = "PositionedPopover";
     const [open, setOpen] = useState(false);
     useEffect(() => {
         setOpen(props.visible);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"positionedPopover.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/positionedPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAGrF,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAS5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiE,CAAC,KAAK,EAAE,EAAE;IACrG,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACX,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,gBAAgB,GAAG,CAAC,CAAoB,EAAE,IAAsB,EAAE,EAAE;QACtE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACb,KAAK,CAAC,IAAI,EAAE,CAAC;QACjB,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,OAAO,IACJ,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE;YACT,QAAQ,EAAE,OAAO,EAAE,wDAAwD;YAC3E,QAAQ,EAAE,eAAe,EAAE,qEAAqE;YAChG,iBAAiB,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,mFAAmF;SACvI,EACD,SAAS,EAAE,KAAK,aAEhB,KAAC,cAAc,cAEX,cACI,KAAK,EAAE;wBACH,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,GAAG,KAAK,CAAC,CAAC,IAAI;wBACpB,GAAG,EAAE,GAAG,KAAK,CAAC,CAAC,IAAI;wBACnB,UAAU,EAAE,QAAQ;qBACvB,GACH,GACW,EACjB,KAAC,cAAc,cAAE,KAAK,CAAC,QAAQ,GAAkB,IAC3C,CACb,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Popover, PopoverSurface, PopoverTrigger } from \"@fluentui/react-components\";\r\nimport type { OnOpenChangeData, OpenPopoverEvents } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\nimport { useState, useEffect } from \"react\";\r\n\r\ntype PositionedPopoverProps = {\r\n x: number;\r\n y: number;\r\n visible: boolean;\r\n hide: () => void;\r\n};\r\n\r\n/*\r\n PositionedPopover component that shows a popover at specific coordinates\r\n * @param props - The component props\r\n * @returns The positioned popover component\r\n /\r\nexport const PositionedPopover: FunctionComponent<PropsWithChildren<PositionedPopoverProps>> = (props) => {\r\n const [open, setOpen] = useState(false);\r\n\r\n useEffect(() => {\r\n setOpen(props.visible);\r\n }, [props.visible, props.x, props.y]);\r\n\r\n const handleOpenChange = (_: OpenPopoverEvents, data: OnOpenChangeData) => {\r\n setOpen(data.open);\r\n\r\n if (!data.open) {\r\n props.hide();\r\n }\r\n };\r\n\r\n return (\r\n <Popover\r\n open={open}\r\n onOpenChange={handleOpenChange}\r\n positioning={{\r\n position: \"below\", // Places the popover directly below the trigger element\r\n autoSize: \"height-always\", //Automatically adjusts the popover height to fit within the viewport\r\n fallbackPositions: [\"above\", \"after\", \"before\"], //If the primary position doesn't fit, automatically tries these positions in order\r\n }}\r\n withArrow={false} // Removes arrow that points to trigger element\r\n >\r\n <PopoverTrigger>\r\n {/ Use the invisible div as the trigger location*/}\r\n <div\r\n style={{\r\n position: \"absolute\",\r\n left: `${props.x}px`,\r\n top: `${props.y}px`,\r\n visibility: \"hidden\",\r\n }}\r\n />\r\n </PopoverTrigger>\r\n <PopoverSurface>{props.children}</PopoverSurface>\r\n </Popover>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"positionedPopover.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/positionedPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAGrF,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAS5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiE,CAAC,KAAK,EAAE,EAAE;IACrG,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;IACpD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACX,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,gBAAgB,GAAG,CAAC,CAAoB,EAAE,IAAsB,EAAE,EAAE;QACtE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACb,KAAK,CAAC,IAAI,EAAE,CAAC;QACjB,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,OAAO,IACJ,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE;YACT,QAAQ,EAAE,OAAO,EAAE,wDAAwD;YAC3E,QAAQ,EAAE,eAAe,EAAE,qEAAqE;YAChG,iBAAiB,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,mFAAmF;SACvI,EACD,SAAS,EAAE,KAAK,aAEhB,KAAC,cAAc,cAEX,cACI,KAAK,EAAE;wBACH,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,GAAG,KAAK,CAAC,CAAC,IAAI;wBACpB,GAAG,EAAE,GAAG,KAAK,CAAC,CAAC,IAAI;wBACnB,UAAU,EAAE,QAAQ;qBACvB,GACH,GACW,EACjB,KAAC,cAAc,cAAE,KAAK,CAAC,QAAQ,GAAkB,IAC3C,CACb,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Popover, PopoverSurface, PopoverTrigger } from \"@fluentui/react-components\";\r\nimport type { OnOpenChangeData, OpenPopoverEvents } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\nimport { useState, useEffect } from \"react\";\r\n\r\ntype PositionedPopoverProps = {\r\n x: number;\r\n y: number;\r\n visible: boolean;\r\n hide: () => void;\r\n};\r\n\r\n/*\r\n PositionedPopover component that shows a popover at specific coordinates\r\n * @param props - The component props\r\n * @returns The positioned popover component\r\n /\r\nexport const PositionedPopover: FunctionComponent<PropsWithChildren<PositionedPopoverProps>> = (props) => {\r\n PositionedPopover.displayName = \"PositionedPopover\";\r\n const [open, setOpen] = useState(false);\r\n\r\n useEffect(() => {\r\n setOpen(props.visible);\r\n }, [props.visible, props.x, props.y]);\r\n\r\n const handleOpenChange = (_: OpenPopoverEvents, data: OnOpenChangeData) => {\r\n setOpen(data.open);\r\n\r\n if (!data.open) {\r\n props.hide();\r\n }\r\n };\r\n\r\n return (\r\n <Popover\r\n open={open}\r\n onOpenChange={handleOpenChange}\r\n positioning={{\r\n position: \"below\", // Places the popover directly below the trigger element\r\n autoSize: \"height-always\", //Automatically adjusts the popover height to fit within the viewport\r\n fallbackPositions: [\"above\", \"after\", \"before\"], //If the primary position doesn't fit, automatically tries these positions in order\r\n }}\r\n withArrow={false} // Removes arrow that points to trigger element\r\n >\r\n <PopoverTrigger>\r\n {/ Use the invisible div as the trigger location*/}\r\n <div\r\n style={{\r\n position: \"absolute\",\r\n left: `${props.x}px`,\r\n top: `${props.y}px`,\r\n visibility: \"hidden\",\r\n }}\r\n />\r\n </PopoverTrigger>\r\n <PopoverSurface>{props.children}</PopoverSurface>\r\n </Popover>\r\n );\r\n};\r\n"]}

package/fluent/primitives/searchBar.js CHANGED Viewed

@@ -7,6 +7,7 @@ const useStyles = makeStyles({
     },
 });
 export const SearchBar = forwardRef((props, ref) => {
+    SearchBar.displayName = "SearchBar";
     const classes = useStyles();
     const onChange = (_, data) => {
         props.onChange(data.value);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"searchBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/searchBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,IAAI,eAAe,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE7F,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,QAAQ,EAAE,MAAM;KACnB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAgC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC9E,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,QAAQ,GAAgE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;QACtF,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,KAAK,cACF,KAAC,eAAe,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAI,GACxG,CACX,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import { Field, SearchBox as FluentSearchBox, makeStyles } from \"@fluentui/react-components\";\r\nimport type { InputOnChangeData, SearchBoxChangeEvent } from \"@fluentui/react-components\";\r\nimport { forwardRef } from \"react\";\r\n\r\ntype SearchProps = {\r\n onChange: (val: string) => void;\r\n placeholder?: string;\r\n};\r\nconst useStyles = makeStyles({\r\n search: {\r\n minWidth: \"50px\",\r\n },\r\n});\r\n\r\nexport const SearchBar = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {\r\n const classes = useStyles();\r\n const onChange: (ev: SearchBoxChangeEvent, data: InputOnChangeData) => void = (_, data) => {\r\n props.onChange(data.value);\r\n };\r\n\r\n return (\r\n <Field>\r\n <FluentSearchBox ref={ref} className={classes.search} placeholder={props.placeholder} onChange={onChange} />\r\n </Field>\r\n );\r\n});\r\n"]}
1	+ {"version":3,"file":"searchBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/searchBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,IAAI,eAAe,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE7F,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,QAAQ,EAAE,MAAM;KACnB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAgC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC9E,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;IAEpC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,QAAQ,GAAgE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;QACtF,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,KAAK,cACF,KAAC,eAAe,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAI,GACxG,CACX,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import { Field, SearchBox as FluentSearchBox, makeStyles } from \"@fluentui/react-components\";\r\nimport type { InputOnChangeData, SearchBoxChangeEvent } from \"@fluentui/react-components\";\r\nimport { forwardRef } from \"react\";\r\n\r\ntype SearchProps = {\r\n onChange: (val: string) => void;\r\n placeholder?: string;\r\n};\r\nconst useStyles = makeStyles({\r\n search: {\r\n minWidth: \"50px\",\r\n },\r\n});\r\n\r\nexport const SearchBar = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {\r\n SearchBar.displayName = \"SearchBar\";\r\n\r\n const classes = useStyles();\r\n const onChange: (ev: SearchBoxChangeEvent, data: InputOnChangeData) => void = (_, data) => {\r\n props.onChange(data.value);\r\n };\r\n\r\n return (\r\n <Field>\r\n <FluentSearchBox ref={ref} className={classes.search} placeholder={props.placeholder} onChange={onChange} />\r\n </Field>\r\n );\r\n});\r\n"]}

package/fluent/primitives/searchBox.js CHANGED Viewed

@@ -64,6 +64,7 @@ const useSearchBoxStyles = makeStyles({
  * @returns The search box component
  */
 export const SearchBox = (props) => {
+    SearchBox.displayName = "SearchBox";
     const classes = useSearchBoxStyles();
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [items, setItems] = useState(props.items);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"searchBox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/searchBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { SearchBar } from \"./searchBar\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { useState, useEffect } from \"react\";\r\n\r\ntype SearchBoxProps = {\r\n items: string[];\r\n onItemSelected: (item: string) => void;\r\n title?: string;\r\n};\r\n\r\nconst useSearchBoxStyles = makeStyles({\r\n searchBox: {\r\n width: \"300px\",\r\n height: \"400px\",\r\n backgroundColor: tokens.colorNeutralBackground1,\r\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke1}`,\r\n borderRadius: tokens.borderRadiusMedium,\r\n boxShadow: tokens.shadow16,\r\n display: \"grid\",\r\n gridTemplateRows: \"auto auto 1fr\",\r\n overflow: \"hidden\", // Prevent content overflow\r\n },\r\n title: {\r\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\r\n margin: tokens.spacingVerticalXS,\r\n paddingBottom: tokens.spacingVerticalXS,\r\n color: tokens.colorNeutralForeground1,\r\n gridRow: \"1\",\r\n fontSize: tokens.fontSizeBase300,\r\n fontWeight: tokens.fontWeightSemibold,\r\n },\r\n filterContainer: {\r\n margin: tokens.spacingVerticalXS,\r\n paddingBottom: tokens.spacingVerticalXS,\r\n gridRow: \"2\",\r\n },\r\n list: {\r\n gridRow: \"3\",\r\n overflowY: \"auto\",\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n maxHeight: \"100%\",\r\n },\r\n listItem: {\r\n marginLeft: tokens.spacingHorizontalXS,\r\n marginRight: tokens.spacingHorizontalXS,\r\n cursor: \"pointer\",\r\n color: tokens.colorNeutralForeground1,\r\n marginTop: tokens.spacingVerticalXXS,\r\n marginBottom: tokens.spacingVerticalXXS,\r\n padding: tokens.spacingVerticalXS,\r\n borderRadius: tokens.borderRadiusSmall,\r\n\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n \":hover\": {\r\n backgroundColor: tokens.colorNeutralBackground2Hover,\r\n },\r\n },\r\n listItemSelected: {\r\n backgroundColor: tokens.colorBrandBackground,\r\n color: tokens.colorNeutralForegroundOnBrand,\r\n\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n \":hover\": {\r\n backgroundColor: tokens.colorBrandBackgroundHover,\r\n },\r\n },\r\n});\r\n\r\n/*\r\n SearchBox component that displays a popup with search functionality\r\n * @param props - The component props\r\n * @returns The search box component\r\n */\r\nexport const SearchBox: FunctionComponent<SearchBoxProps> = (props) => {\r\n const classes = useSearchBoxStyles();\r\n const [selectedIndex, setSelectedIndex] = useState(0);\r\n const [items, setItems] = useState(props.items);\r\n // In future could replace this with a fluent component like menuList or comboBox depending on desired UX\r\n const onKeyDown = (evt: React.KeyboardEvent) => {\r\n if (items.length === 0) {\r\n return;\r\n }\r\n if (evt.code === \"Enter\") {\r\n props.onItemSelected(items[selectedIndex]);\r\n return;\r\n }\r\n\r\n if (evt.code === \"ArrowDown\") {\r\n setSelectedIndex((prev) => Math.min(prev + 1, items.length - 1));\r\n return;\r\n }\r\n\r\n if (evt.code === \"ArrowUp\") {\r\n setSelectedIndex((prev) => Math.max(prev - 1, 0));\r\n return;\r\n }\r\n };\r\n\r\n const onFilterChange = (filter: string) => {\r\n const filteredItems = props.items.filter((item) => item.toLowerCase().includes(filter.toLowerCase()));\r\n setItems(filteredItems);\r\n };\r\n\r\n useEffect(() => {\r\n setItems(props.items);\r\n }, [props.items]);\r\n\r\n return (\r\n <div className={classes.searchBox} onKeyDown={onKeyDown}>\r\n {props.title ? <div className={classes.title}>{props.title}</div> : null}\r\n <div className={classes.filterContainer}>\r\n <SearchBar onChange={onFilterChange} placeholder=\"Search...\" />\r\n </div>\r\n <div role=\"listbox\" className={classes.list}>\r\n {items.map((item, index) => (\r\n <div\r\n role=\"option\"\r\n key={item}\r\n className={`${classes.listItem} ${index === selectedIndex ? classes.listItemSelected : \"\"}`}\r\n onClick={() => props.onItemSelected(item)}\r\n >\r\n {item}\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"searchBox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/searchBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { SearchBar } from \"./searchBar\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { useState, useEffect } from \"react\";\r\n\r\ntype SearchBoxProps = {\r\n items: string[];\r\n onItemSelected: (item: string) => void;\r\n title?: string;\r\n};\r\n\r\nconst useSearchBoxStyles = makeStyles({\r\n searchBox: {\r\n width: \"300px\",\r\n height: \"400px\",\r\n backgroundColor: tokens.colorNeutralBackground1,\r\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke1}`,\r\n borderRadius: tokens.borderRadiusMedium,\r\n boxShadow: tokens.shadow16,\r\n display: \"grid\",\r\n gridTemplateRows: \"auto auto 1fr\",\r\n overflow: \"hidden\", // Prevent content overflow\r\n },\r\n title: {\r\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\r\n margin: tokens.spacingVerticalXS,\r\n paddingBottom: tokens.spacingVerticalXS,\r\n color: tokens.colorNeutralForeground1,\r\n gridRow: \"1\",\r\n fontSize: tokens.fontSizeBase300,\r\n fontWeight: tokens.fontWeightSemibold,\r\n },\r\n filterContainer: {\r\n margin: tokens.spacingVerticalXS,\r\n paddingBottom: tokens.spacingVerticalXS,\r\n gridRow: \"2\",\r\n },\r\n list: {\r\n gridRow: \"3\",\r\n overflowY: \"auto\",\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n maxHeight: \"100%\",\r\n },\r\n listItem: {\r\n marginLeft: tokens.spacingHorizontalXS,\r\n marginRight: tokens.spacingHorizontalXS,\r\n cursor: \"pointer\",\r\n color: tokens.colorNeutralForeground1,\r\n marginTop: tokens.spacingVerticalXXS,\r\n marginBottom: tokens.spacingVerticalXXS,\r\n padding: tokens.spacingVerticalXS,\r\n borderRadius: tokens.borderRadiusSmall,\r\n\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n \":hover\": {\r\n backgroundColor: tokens.colorNeutralBackground2Hover,\r\n },\r\n },\r\n listItemSelected: {\r\n backgroundColor: tokens.colorBrandBackground,\r\n color: tokens.colorNeutralForegroundOnBrand,\r\n\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n \":hover\": {\r\n backgroundColor: tokens.colorBrandBackgroundHover,\r\n },\r\n },\r\n});\r\n\r\n/*\r\n SearchBox component that displays a popup with search functionality\r\n * @param props - The component props\r\n * @returns The search box component\r\n */\r\nexport const SearchBox: FunctionComponent<SearchBoxProps> = (props) => {\r\n SearchBox.displayName = \"SearchBox\";\r\n\r\n const classes = useSearchBoxStyles();\r\n const [selectedIndex, setSelectedIndex] = useState(0);\r\n const [items, setItems] = useState(props.items);\r\n // In future could replace this with a fluent component like menuList or comboBox depending on desired UX\r\n const onKeyDown = (evt: React.KeyboardEvent) => {\r\n if (items.length === 0) {\r\n return;\r\n }\r\n if (evt.code === \"Enter\") {\r\n props.onItemSelected(items[selectedIndex]);\r\n return;\r\n }\r\n\r\n if (evt.code === \"ArrowDown\") {\r\n setSelectedIndex((prev) => Math.min(prev + 1, items.length - 1));\r\n return;\r\n }\r\n\r\n if (evt.code === \"ArrowUp\") {\r\n setSelectedIndex((prev) => Math.max(prev - 1, 0));\r\n return;\r\n }\r\n };\r\n\r\n const onFilterChange = (filter: string) => {\r\n const filteredItems = props.items.filter((item) => item.toLowerCase().includes(filter.toLowerCase()));\r\n setItems(filteredItems);\r\n };\r\n\r\n useEffect(() => {\r\n setItems(props.items);\r\n }, [props.items]);\r\n\r\n return (\r\n <div className={classes.searchBox} onKeyDown={onKeyDown}>\r\n {props.title ? <div className={classes.title}>{props.title}</div> : null}\r\n <div className={classes.filterContainer}>\r\n <SearchBar onChange={onFilterChange} placeholder=\"Search...\" />\r\n </div>\r\n <div role=\"listbox\" className={classes.list}>\r\n {items.map((item, index) => (\r\n <div\r\n role=\"option\"\r\n key={item}\r\n className={`${classes.listItem} ${index === selectedIndex ? classes.listItemSelected : \"\"}`}\r\n onClick={() => props.onItemSelected(item)}\r\n >\r\n {item}\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}

package/fluent/primitives/spinButton.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SpinButton as FluentSpinButton, useId } from "@fluentui/react-components";
+import { SpinButton as FluentSpinButton, mergeClasses, useId } from "@fluentui/react-components";
 import { useEffect, useState, useRef } from "react";
 import { InfoLabel } from "./infoLabel.js";
 import { HandleKeyDown, HandleOnBlur, useInputStyles } from "./utils.js";
 export const SpinButton = (props) => {
+    SpinButton.displayName = "SpinButton";
     const classes = useInputStyles();
     const { min, max } = props;
     const [value, setValue] = useState(props.value);
@@ -46,7 +47,8 @@ export const SpinButton = (props) => {
         }
     };
     const id = useId("spin-button");
-    return (_jsxs("div", { children: [props.infoLabel && _jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), _jsx(FluentSpinButton, { ...props, step: step, id: id, size: "medium", precision: CalculatePrecision(step ?? 1.01), displayValue: props.unit ? `${PrecisionRound(value, CalculatePrecision(step ?? 1.01))} ${props.unit}` : undefined, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: `${!validateValue(value) ? classes.invalid : classes.valid}` })] }));
+    const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
+    return (_jsxs("div", { className: classes.container, children: [props.infoLabel && _jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), _jsx(FluentSpinButton, { ...props, step: step, id: id, size: "medium", precision: CalculatePrecision(step ?? 1.01), displayValue: props.unit ? `${PrecisionRound(value, CalculatePrecision(step ?? 1.01))} ${props.unit}` : undefined, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
 };
 /**
  * Fluent's CalculatePrecision function

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spinButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;~~AAGnF~~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~~0BACK~~,KAAK,CAAC,SAAS,IAAI,KAAC,SAAS,OAAK,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE,EAAE,GAAI,EACnE,KAAC,gBAAgB,OACT,KAAK,EACT,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,kBAAkB,CAAC,IAAI,IAAI,IAAI,CAAC,EAC3C,YAAY,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,kBAAkB,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,EACjH,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,YAAY,EACpB,SAAS,EAAE,~~GAAG~~,~~CAAC~~,~~aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,GACzE,~~IACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAa;IAC5C;;;;;OAKG,CAAC,MAAM,MAAM,GAAG,yBAAyB,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IACjE,IAAI,CAAC,MAAM,EAAE,CAAC;QACV,OAAO,CAAC,CAAC;IACb,CAAC;IACD,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QACZ,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAC7B,CAAC;IACD,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QACZ,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAC5B,CAAC;IACD,OAAO,CAAC,CAAC;AACb,CAAC;AACD;;;;;;;;GAQG;AACH,SAAS,cAAc,CAAC,KAAa,EAAE,SAAiB;IACpD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IACpC,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AACzC,CAAC","sourcesContent":["import { SpinButton as FluentSpinButton, useId } from \"@fluentui/react-components\";\r\nimport type { SpinButtonOnChangeData, SpinButtonChangeEvent } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, KeyboardEvent } from \"react\";\r\nimport { useEffect, useState, useRef } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { HandleKeyDown, HandleOnBlur, useInputStyles } from \"./utils\";\r\n\r\nexport type SpinButtonProps = PrimitiveProps<number> & {\r\n min?: number;\r\n max?: number;\r\n /** Determines how much the spinbutton increments with the arrow keys. Note this also determines the precision value (# of decimals in display value)\r\n * i.e. if step = 1, precision = 0. step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2. /\r\n step?: number;\r\n unit?: string;\r\n forceInt?: boolean;\r\n validator?: (value: number) => boolean;\r\n};\r\n\r\nexport const SpinButton: FunctionComponent<SpinButtonProps> = (props) => {\r\n const classes = useInputStyles();\r\n\r\n const { min, max } = props;\r\n\r\n const [value, setValue] = useState(props.value);\r\n const lastCommittedValue = useRef(props.value);\r\n // step and forceInt are not mutually exclusive since there could be cases where you want to forceInt but have spinButton jump >1 int per spin\r\n const step = props.step != undefined ? props.step : props.forceInt ? 1 : undefined;\r\n\r\n useEffect(() => {\r\n if (props.value !== lastCommittedValue.current) {\r\n lastCommittedValue.current = props.value;\r\n setValue(props.value); // Update local state when props.value changes\r\n }\r\n }, [props.value]);\r\n\r\n const validateValue = (numericValue: number): boolean => {\r\n const outOfBounds = (min !== undefined && numericValue < min) \|\| (max !== undefined && numericValue > max);\r\n const failsValidator = props.validator && !props.validator(numericValue);\r\n const failsIntCheck = props.forceInt ? !Number.isInteger(numericValue) : false;\r\n const invalid = !!outOfBounds \|\| !!failsValidator \|\| isNaN(numericValue) \|\| !!failsIntCheck;\r\n return !invalid;\r\n };\r\n\r\n const tryCommitValue = (currVal: number) => {\r\n // Only commit if valid and different from last committed value\r\n if (validateValue(currVal) && currVal !== lastCommittedValue.current) {\r\n lastCommittedValue.current = currVal;\r\n props.onChange(currVal);\r\n }\r\n };\r\n\r\n const handleChange = (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n event.stopPropagation(); // Prevent event propagation\r\n if (data.value != null && !Number.isNaN(data.value)) {\r\n setValue(data.value);\r\n tryCommitValue(data.value);\r\n }\r\n };\r\n\r\n const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\r\n event.stopPropagation(); // Prevent event propagation\r\n\r\n if (event.key !== \"Enter\") {\r\n const currVal = parseFloat((event.target as any).value); // Cannot use currentTarget.value as it won't have the most recently typed value\r\n setValue(currVal);\r\n tryCommitValue(currVal);\r\n }\r\n };\r\n\r\n const id = useId(\"spin-button\");\r\n return (\r\n <div>\r\n {props.infoLabel && <InfoLabel {...props.infoLabel} htmlFor={id} />}\r\n <FluentSpinButton\r\n {...props}\r\n step={step}\r\n id={id}\r\n size=\"medium\"\r\n precision={CalculatePrecision(step ?? 1.01)}\r\n displayValue={props.unit ? `${PrecisionRound(value, CalculatePrecision(step ?? 1.01))} ${props.unit}` : undefined}\r\n value={value}\r\n onChange={handleChange}\r\n onKeyUp={handleKeyUp}\r\n onKeyDown={HandleKeyDown}\r\n onBlur={HandleOnBlur}\r\n className={~~`${!validateValue(value) ? classes.invalid : classes.valid~~}`}\r\n />\r\n </div>\r\n );\r\n};\r\n\r\n/\r\n Fluent's CalculatePrecision function\r\n * https://github.com/microsoft/fluentui/blob/dcbf775d37938eacffa37922fc0b43a3cdd5753f/packages/utilities/src/math.ts#L91C1\r\n \r\n Calculates a number's precision based on the number of trailing\r\n * zeros if the number does not have a decimal indicated by a negative\r\n * precision. Otherwise, it calculates the number of digits after\r\n * the decimal point indicated by a positive precision.\r\n \r\n @param value - the value to determine the precision of\r\n * @returns the calculated precision\r\n /\r\nexport function CalculatePrecision(value: number) {\r\n /\r\n Group 1:\r\n * [1-9]([0]+$) matches trailing zeros\r\n * Group 2:\r\n * \\.([0-9]) matches all digits after a decimal point.\r\n / const groups = /[1-9]([0]+$)\|\\.([0-9])/.exec(String(value));\r\n if (!groups) {\r\n return 0;\r\n }\r\n if (groups[1]) {\r\n return -groups[1].length;\r\n }\r\n if (groups[2]) {\r\n return groups[2].length;\r\n }\r\n return 0;\r\n}\r\n/\r\n Fluent's PrecisionRound function\r\n * https://github.com/microsoft/fluentui/blob/dcbf775d37938eacffa37922fc0b43a3cdd5753f/packages/utilities/src/math.ts#L116\r\n \r\n Rounds a number to a certain level of precision. Accepts negative precision.\r\n * @param value - The value that is being rounded.\r\n * @param precision - The number of decimal places to round the number to\r\n * @returns The rounded number.\r\n /\r\nfunction PrecisionRound(value: number, precision: number) {\r\n const exp = Math.pow(10, precision);\r\n return Math.round(value exp) / exp;\r\n}\r\n"]}
1	+ {"version":3,"file":"spinButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SpinButton as FluentSpinButton, mergeClasses, useId } from \"@fluentui/react-components\";\r\nimport type { SpinButtonOnChangeData, SpinButtonChangeEvent } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, KeyboardEvent } from \"react\";\r\nimport { useEffect, useState, useRef } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { HandleKeyDown, HandleOnBlur, useInputStyles } from \"./utils\";\r\n\r\nexport type SpinButtonProps = PrimitiveProps<number> & {\r\n min?: number;\r\n max?: number;\r\n /** Determines how much the spinbutton increments with the arrow keys. Note this also determines the precision value (# of decimals in display value)\r\n * i.e. if step = 1, precision = 0. step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2. /\r\n step?: number;\r\n unit?: string;\r\n forceInt?: boolean;\r\n validator?: (value: number) => boolean;\r\n};\r\n\r\nexport const SpinButton: FunctionComponent<SpinButtonProps> = (props) => {\r\n SpinButton.displayName = \"SpinButton\";\r\n const classes = useInputStyles();\r\n\r\n const { min, max } = props;\r\n\r\n const [value, setValue] = useState(props.value);\r\n const lastCommittedValue = useRef(props.value);\r\n // step and forceInt are not mutually exclusive since there could be cases where you want to forceInt but have spinButton jump >1 int per spin\r\n const step = props.step != undefined ? props.step : props.forceInt ? 1 : undefined;\r\n\r\n useEffect(() => {\r\n if (props.value !== lastCommittedValue.current) {\r\n lastCommittedValue.current = props.value;\r\n setValue(props.value); // Update local state when props.value changes\r\n }\r\n }, [props.value]);\r\n\r\n const validateValue = (numericValue: number): boolean => {\r\n const outOfBounds = (min !== undefined && numericValue < min) \|\| (max !== undefined && numericValue > max);\r\n const failsValidator = props.validator && !props.validator(numericValue);\r\n const failsIntCheck = props.forceInt ? !Number.isInteger(numericValue) : false;\r\n const invalid = !!outOfBounds \|\| !!failsValidator \|\| isNaN(numericValue) \|\| !!failsIntCheck;\r\n return !invalid;\r\n };\r\n\r\n const tryCommitValue = (currVal: number) => {\r\n // Only commit if valid and different from last committed value\r\n if (validateValue(currVal) && currVal !== lastCommittedValue.current) {\r\n lastCommittedValue.current = currVal;\r\n props.onChange(currVal);\r\n }\r\n };\r\n\r\n const handleChange = (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n event.stopPropagation(); // Prevent event propagation\r\n if (data.value != null && !Number.isNaN(data.value)) {\r\n setValue(data.value);\r\n tryCommitValue(data.value);\r\n }\r\n };\r\n\r\n const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\r\n event.stopPropagation(); // Prevent event propagation\r\n\r\n if (event.key !== \"Enter\") {\r\n const currVal = parseFloat((event.target as any).value); // Cannot use currentTarget.value as it won't have the most recently typed value\r\n setValue(currVal);\r\n tryCommitValue(currVal);\r\n }\r\n };\r\n\r\n const id = useId(\"spin-button\");\r\n const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : \"\", props.className);\r\n\r\n return (\r\n <div className={classes.container}>\r\n {props.infoLabel && <InfoLabel {...props.infoLabel} htmlFor={id} />}\r\n <FluentSpinButton\r\n {...props}\r\n step={step}\r\n id={id}\r\n size=\"medium\"\r\n precision={CalculatePrecision(step ?? 1.01)}\r\n displayValue={props.unit ? `${PrecisionRound(value, CalculatePrecision(step ?? 1.01))} ${props.unit}` : undefined}\r\n value={value}\r\n onChange={handleChange}\r\n onKeyUp={handleKeyUp}\r\n onKeyDown={HandleKeyDown}\r\n onBlur={HandleOnBlur}\r\n className={mergedClassName}\r\n />\r\n </div>\r\n );\r\n};\r\n\r\n/\r\n Fluent's CalculatePrecision function\r\n * https://github.com/microsoft/fluentui/blob/dcbf775d37938eacffa37922fc0b43a3cdd5753f/packages/utilities/src/math.ts#L91C1\r\n \r\n Calculates a number's precision based on the number of trailing\r\n * zeros if the number does not have a decimal indicated by a negative\r\n * precision. Otherwise, it calculates the number of digits after\r\n * the decimal point indicated by a positive precision.\r\n \r\n @param value - the value to determine the precision of\r\n * @returns the calculated precision\r\n /\r\nexport function CalculatePrecision(value: number) {\r\n /\r\n Group 1:\r\n * [1-9]([0]+$) matches trailing zeros\r\n * Group 2:\r\n * \\.([0-9]) matches all digits after a decimal point.\r\n / const groups = /[1-9]([0]+$)\|\\.([0-9])/.exec(String(value));\r\n if (!groups) {\r\n return 0;\r\n }\r\n if (groups[1]) {\r\n return -groups[1].length;\r\n }\r\n if (groups[2]) {\r\n return groups[2].length;\r\n }\r\n return 0;\r\n}\r\n/\r\n Fluent's PrecisionRound function\r\n * https://github.com/microsoft/fluentui/blob/dcbf775d37938eacffa37922fc0b43a3cdd5753f/packages/utilities/src/math.ts#L116\r\n \r\n Rounds a number to a certain level of precision. Accepts negative precision.\r\n * @param value - The value that is being rounded.\r\n * @param precision - The number of decimal places to round the number to\r\n * @returns The rounded number.\r\n /\r\nfunction PrecisionRound(value: number, precision: number) {\r\n const exp = Math.pow(10, precision);\r\n return Math.round(value exp) / exp;\r\n}\r\n"]}

package/fluent/primitives/switch.js CHANGED Viewed

@@ -15,6 +15,7 @@ const useSwitchStyles = makeStyles({
  * @returns Switch component
  */
 export const Switch = (props) => {
+    Switch.displayName = "Switch";
     const classes = useSwitchStyles();
     const [checked, setChecked] = useState(() => props.value ?? false);
     useEffect(() => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/switch.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,eAAe,GAAG,UAAU,CAAC;IAC/B,MAAM,EAAE;QACJ,UAAU,EAAE,MAAM;KACrB;IACD,SAAS,EAAE;QACP,MAAM,EAAE,CAAC,EAAE,sHAAsH;KACpI;CACJ,CAAC,CAAC;AAIH;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,KAAK,IAAI,SAAS,EAAE,CAAC;YAC3B,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,gDAAgD;QAC7E,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,QAAQ,GAAG,CAAC,KAAoC,EAAE,CAAqB,EAAE,EAAE;QAC7E,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACvD,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,KAAC,YAAY,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACpK,CAAC,CAAC","sourcesContent":["import type { SwitchOnChangeData } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nimport { makeStyles, Switch as FluentSwitch } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nconst useSwitchStyles = makeStyles({\r\n switch: {\r\n marginLeft: \"auto\",\r\n },\r\n indicator: {\r\n margin: 0, // Remove the default right margin so the switch aligns well on the right side inside panels like the properties pane.\r\n },\r\n});\r\n\r\nexport type SwitchProps = PrimitiveProps<boolean>;\r\n\r\n/*\r\n This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools\r\n * @param props\r\n * @returns Switch component\r\n */\r\nexport const Switch: FunctionComponent<SwitchProps> = (props) => {\r\n const classes = useSwitchStyles();\r\n const [checked, setChecked] = useState(() => props.value ?? false);\r\n\r\n useEffect(() => {\r\n if (props.value != undefined) {\r\n setChecked(props.value); // Update local state when props.checked changes\r\n }\r\n }, [props.value]);\r\n\r\n const onChange = (event: ChangeEvent<HTMLInputElement>, _: SwitchOnChangeData) => {\r\n props.onChange && props.onChange(event.target.checked);\r\n setChecked(event.target.checked);\r\n };\r\n\r\n return <FluentSwitch className={classes.switch} indicator={{ className: classes.indicator }} checked={checked} disabled={props.disabled} onChange={onChange} />;\r\n};\r\n"]}
1	+ {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/switch.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,eAAe,GAAG,UAAU,CAAC;IAC/B,MAAM,EAAE;QACJ,UAAU,EAAE,MAAM;KACrB;IACD,SAAS,EAAE;QACP,MAAM,EAAE,CAAC,EAAE,sHAAsH;KACpI;CACJ,CAAC,CAAC;AAIH;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;IAE9B,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,KAAK,IAAI,SAAS,EAAE,CAAC;YAC3B,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,gDAAgD;QAC7E,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,QAAQ,GAAG,CAAC,KAAoC,EAAE,CAAqB,EAAE,EAAE;QAC7E,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACvD,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,KAAC,YAAY,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACpK,CAAC,CAAC","sourcesContent":["import type { SwitchOnChangeData } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nimport { makeStyles, Switch as FluentSwitch } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nconst useSwitchStyles = makeStyles({\r\n switch: {\r\n marginLeft: \"auto\",\r\n },\r\n indicator: {\r\n margin: 0, // Remove the default right margin so the switch aligns well on the right side inside panels like the properties pane.\r\n },\r\n});\r\n\r\nexport type SwitchProps = PrimitiveProps<boolean>;\r\n\r\n/*\r\n This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools\r\n * @param props\r\n * @returns Switch component\r\n */\r\nexport const Switch: FunctionComponent<SwitchProps> = (props) => {\r\n Switch.displayName = \"Switch\";\r\n\r\n const classes = useSwitchStyles();\r\n const [checked, setChecked] = useState(() => props.value ?? false);\r\n\r\n useEffect(() => {\r\n if (props.value != undefined) {\r\n setChecked(props.value); // Update local state when props.checked changes\r\n }\r\n }, [props.value]);\r\n\r\n const onChange = (event: ChangeEvent<HTMLInputElement>, _: SwitchOnChangeData) => {\r\n props.onChange && props.onChange(event.target.checked);\r\n setChecked(event.target.checked);\r\n };\r\n\r\n return <FluentSwitch className={classes.switch} indicator={{ className: classes.indicator }} checked={checked} disabled={props.disabled} onChange={onChange} />;\r\n};\r\n"]}

package/fluent/primitives/syncedSlider.js CHANGED Viewed

@@ -23,6 +23,7 @@ const useSyncedSliderStyles = makeStyles({
  * @returns SyncedSlider component
  */
 export const SyncedSliderInput = (props) => {
+    SyncedSliderInput.displayName = "SyncedSliderInput";
     const { infoLabel, ...passthroughProps } = props;
     const classes = useSyncedSliderStyles();
     const [value, setValue] = useState(props.value);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"syncedSlider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { SliderOnChangeData } from \"@fluentui/react-components\";\r\nimport { makeStyles, Slider } from \"@fluentui/react-components\";\r\nimport { SpinButton } from \"./spinButton\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport { useEffect, useState, useRef } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { CustomTokens } from \"./utils\";\r\n\r\nconst useSyncedSliderStyles = makeStyles({\r\n container: { display: \"flex\" },\r\n syncedSlider: {\r\n flex: \"1 1 0\",\r\n flexDirection: \"row\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n },\r\n slider: {\r\n minWidth: CustomTokens.sliderMinWidth, // Minimum width for slider to remain usable\r\n maxWidth: CustomTokens.sliderMaxWidth,\r\n },\r\n});\r\n\r\nexport type SyncedSliderProps = PrimitiveProps<number> & {\r\n /** Minimum value for the slider /\r\n min?: number;\r\n /* Maximum value for the slider /\r\n max?: number;\r\n /* Step size for the slider /\r\n step?: number;\r\n /* Displayed in the ux to indicate unit of measurement /\r\n unit?: string;\r\n /* When true, onChange is only called when the user releases the slider, not during drag /\r\n notifyOnlyOnRelease?: boolean;\r\n};\r\n\r\n/\r\n Component which synchronizes a slider and an input field, allowing the user to change the value using either control\r\n * @param props\r\n * @returns SyncedSlider component\r\n /\r\nexport const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) => {\r\n const { infoLabel, ...passthroughProps } = props;\r\n const classes = useSyncedSliderStyles();\r\n const [value, setValue] = useState<number>(props.value);\r\n const pendingValueRef = useRef<number>(undefined);\r\n const isDraggingRef = useRef(false);\r\n\r\n // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.\r\n // To avoid this, we scale the min/max based on the step so we can always make step undefined.\r\n // The actual step size in the Fluent slider is 1 when it is ste to undefined.\r\n const min = props.min ?? 0;\r\n const max = props.max ?? 100;\r\n const step = props.step ?? 1;\r\n\r\n useEffect(() => {\r\n !isDraggingRef.current && setValue(props.value ?? \"\"); // Update local state when props.value changes as long as user is not actively dragging\r\n }, [props.value]);\r\n\r\n const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {\r\n const newValue = data.value step;\r\n setValue(newValue);\r\n\r\n if (props.notifyOnlyOnRelease) {\r\n // Store the value but don't notify parent yet\r\n pendingValueRef.current = newValue;\r\n } else {\r\n // Notify parent as slider changes\r\n props.onChange(newValue);\r\n }\r\n };\r\n\r\n const handleSliderPointerDown = () => {\r\n isDraggingRef.current = true;\r\n };\r\n\r\n const handleSliderPointerUp = () => {\r\n if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {\r\n props.onChange(pendingValueRef.current);\r\n pendingValueRef.current = undefined;\r\n }\r\n isDraggingRef.current = false;\r\n };\r\n\r\n const handleInputChange = (value: number) => {\r\n setValue(value);\r\n props.onChange(value); // Input always updates immediately\r\n };\r\n\r\n return (\r\n <div className={classes.container}>\r\n {infoLabel && <InfoLabel {...infoLabel} htmlFor={\"syncedSlider\"} />}\r\n <div id=\"syncedSlider\" className={classes.syncedSlider}>\r\n {props.min !== undefined && props.max !== undefined && (\r\n <Slider\r\n {...passthroughProps}\r\n className={classes.slider}\r\n min={min / step}\r\n max={max / step}\r\n step={undefined}\r\n value={value / step}\r\n onChange={handleSliderChange}\r\n onPointerDown={handleSliderPointerDown}\r\n onPointerUp={handleSliderPointerUp}\r\n />\r\n )}\r\n <SpinButton {...passthroughProps} value={Math.round(value / step) * step} onChange={handleInputChange} step={props.step} />\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"syncedSlider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { SliderOnChangeData } from \"@fluentui/react-components\";\r\nimport { makeStyles, Slider } from \"@fluentui/react-components\";\r\nimport { SpinButton } from \"./spinButton\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport { useEffect, useState, useRef } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { CustomTokens } from \"./utils\";\r\n\r\nconst useSyncedSliderStyles = makeStyles({\r\n container: { display: \"flex\" },\r\n syncedSlider: {\r\n flex: \"1 1 0\",\r\n flexDirection: \"row\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n },\r\n slider: {\r\n minWidth: CustomTokens.sliderMinWidth, // Minimum width for slider to remain usable\r\n maxWidth: CustomTokens.sliderMaxWidth,\r\n },\r\n});\r\n\r\nexport type SyncedSliderProps = PrimitiveProps<number> & {\r\n /** Minimum value for the slider /\r\n min?: number;\r\n /* Maximum value for the slider /\r\n max?: number;\r\n /* Step size for the slider /\r\n step?: number;\r\n /* Displayed in the ux to indicate unit of measurement /\r\n unit?: string;\r\n /* When true, onChange is only called when the user releases the slider, not during drag /\r\n notifyOnlyOnRelease?: boolean;\r\n};\r\n\r\n/\r\n Component which synchronizes a slider and an input field, allowing the user to change the value using either control\r\n * @param props\r\n * @returns SyncedSlider component\r\n /\r\nexport const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) => {\r\n SyncedSliderInput.displayName = \"SyncedSliderInput\";\r\n const { infoLabel, ...passthroughProps } = props;\r\n const classes = useSyncedSliderStyles();\r\n const [value, setValue] = useState<number>(props.value);\r\n const pendingValueRef = useRef<number>(undefined);\r\n const isDraggingRef = useRef(false);\r\n\r\n // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.\r\n // To avoid this, we scale the min/max based on the step so we can always make step undefined.\r\n // The actual step size in the Fluent slider is 1 when it is ste to undefined.\r\n const min = props.min ?? 0;\r\n const max = props.max ?? 100;\r\n const step = props.step ?? 1;\r\n\r\n useEffect(() => {\r\n !isDraggingRef.current && setValue(props.value ?? \"\"); // Update local state when props.value changes as long as user is not actively dragging\r\n }, [props.value]);\r\n\r\n const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {\r\n const newValue = data.value step;\r\n setValue(newValue);\r\n\r\n if (props.notifyOnlyOnRelease) {\r\n // Store the value but don't notify parent yet\r\n pendingValueRef.current = newValue;\r\n } else {\r\n // Notify parent as slider changes\r\n props.onChange(newValue);\r\n }\r\n };\r\n\r\n const handleSliderPointerDown = () => {\r\n isDraggingRef.current = true;\r\n };\r\n\r\n const handleSliderPointerUp = () => {\r\n if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {\r\n props.onChange(pendingValueRef.current);\r\n pendingValueRef.current = undefined;\r\n }\r\n isDraggingRef.current = false;\r\n };\r\n\r\n const handleInputChange = (value: number) => {\r\n setValue(value);\r\n props.onChange(value); // Input always updates immediately\r\n };\r\n\r\n return (\r\n <div className={classes.container}>\r\n {infoLabel && <InfoLabel {...infoLabel} htmlFor={\"syncedSlider\"} />}\r\n <div id=\"syncedSlider\" className={classes.syncedSlider}>\r\n {props.min !== undefined && props.max !== undefined && (\r\n <Slider\r\n {...passthroughProps}\r\n className={classes.slider}\r\n min={min / step}\r\n max={max / step}\r\n step={undefined}\r\n value={value / step}\r\n onChange={handleSliderChange}\r\n onPointerDown={handleSliderPointerDown}\r\n onPointerUp={handleSliderPointerUp}\r\n />\r\n )}\r\n <SpinButton {...passthroughProps} value={Math.round(value / step) * step} onChange={handleInputChange} step={props.step} />\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}

package/fluent/primitives/textInput.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { Input as FluentInput, useId } from "@fluentui/react-components";
+import { Input as FluentInput, mergeClasses, useId } from "@fluentui/react-components";
 import { InfoLabel } from "./infoLabel.js";
 import { HandleOnBlur, HandleKeyDown, useInputStyles } from "./utils.js";
 export const TextInput = (props) => {
+    TextInput.displayName = "TextInput";
     const classes = useInputStyles();
     const [value, setValue] = useState(props.value);
     const lastCommittedValue = useRef(props.value);
@@ -34,7 +35,8 @@ export const TextInput = (props) => {
         setValue(event.currentTarget.value);
         tryCommitValue(event.currentTarget.value);
     };
+    const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
     const id = useId("input-button");
-    return (_jsxs("div", { children: [props.infoLabel && _jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), _jsx(FluentInput, { ...props, id: id, size: "medium", value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: `${!validateValue(value) ? classes.invalid : classes.valid}` })] }));
+    return (_jsxs("div", { className: classes.container, children: [props.infoLabel && _jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), _jsx(FluentInput, { ...props, id: id, size: "medium", value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
 };
 //# sourceMappingURL=textInput.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"textInput.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;~~AAEzE~~,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAMtE,MAAM,CAAC,MAAM,SAAS,GAAsC,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;~~IAEjC~~,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,KAAK,KAAK,kBAAkB,CAAC,OAAO,EAAE,CAAC;YAC7C,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,8CAA8C;YACrE,kBAAkB,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC;QAC7C,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,aAAa,GAAG,CAAC,GAAW,EAAW,EAAE;QAC3C,MAAM,cAAc,GAAG,KAAK,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QAChE,OAAO,CAAC,cAAc,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,OAAe,EAAE,EAAE;QACvC,+DAA+D;QAC/D,IAAI,aAAa,CAAC,OAAO,CAAC,IAAI,OAAO,KAAK,kBAAkB,CAAC,OAAO,EAAE,CAAC;YACnE,kBAAkB,CAAC,OAAO,GAAG,OAAO,CAAC;YACrC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAC5B,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,IAAuB,EAAE,EAAE;QACnF,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrB,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC3D,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACpC,cAAc,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,CAAC,CAAC;~~IAEF~~,MAAM,EAAE,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;IACjC,OAAO,CACH,~~0BACK~~,KAAK,CAAC,SAAS,IAAI,KAAC,SAAS,OAAK,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE,EAAE,GAAI,EACnE,KAAC,WAAW,OACJ,KAAK,EACT,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,YAAY,EACpB,SAAS,EAAE,~~GAAG~~,~~CAAC~~,~~aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,GACzE,~~IACA,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport type { InputOnChangeData } from \"@fluentui/react-components\";\r\nimport { Input as FluentInput, useId } from \"@fluentui/react-components\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { HandleOnBlur, HandleKeyDown, useInputStyles } from \"./utils\";\r\n\r\nexport type TextInputProps = PrimitiveProps<string> & {\r\n validator?: (value: string) => boolean;\r\n};\r\n\r\nexport const TextInput: FunctionComponent<TextInputProps> = (props) => {\r\n const classes = useInputStyles();\r\n~~\r\n~~ const [value, setValue] = useState(props.value);\r\n const lastCommittedValue = useRef(props.value);\r\n\r\n useEffect(() => {\r\n if (props.value !== lastCommittedValue.current) {\r\n setValue(props.value); // Update local state when props.value changes\r\n lastCommittedValue.current = props.value;\r\n }\r\n }, [props.value]);\r\n\r\n const validateValue = (val: string): boolean => {\r\n const failsValidator = props.validator && !props.validator(val);\r\n return !failsValidator;\r\n };\r\n\r\n const tryCommitValue = (currVal: string) => {\r\n // Only commit if valid and different from last committed value\r\n if (validateValue(currVal) && currVal !== lastCommittedValue.current) {\r\n lastCommittedValue.current = currVal;\r\n props.onChange(currVal);\r\n }\r\n };\r\n\r\n const handleChange = (event: ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {\r\n event.stopPropagation();\r\n setValue(data.value);\r\n tryCommitValue(data.value);\r\n };\r\n\r\n const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\r\n event.stopPropagation();\r\n setValue(event.currentTarget.value);\r\n tryCommitValue(event.currentTarget.value);\r\n };\r\n\r\n const id = useId(\"input-button\");\r\n return (\r\n <div>\r\n {props.infoLabel && <InfoLabel {...props.infoLabel} htmlFor={id} />}\r\n <FluentInput\r\n {...props}\r\n id={id}\r\n size=\"medium\"\r\n value={value}\r\n onChange={handleChange}\r\n onKeyUp={handleKeyUp}\r\n onKeyDown={HandleKeyDown}\r\n onBlur={HandleOnBlur}\r\n className={~~`${!validateValue(value) ? classes.invalid : classes.valid~~}`}\r\n />\r\n </div>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"textInput.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport type { InputOnChangeData } from \"@fluentui/react-components\";\r\nimport { Input as FluentInput, mergeClasses, useId } from \"@fluentui/react-components\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { HandleOnBlur, HandleKeyDown, useInputStyles } from \"./utils\";\r\n\r\nexport type TextInputProps = PrimitiveProps<string> & {\r\n validator?: (value: string) => boolean;\r\n};\r\n\r\nexport const TextInput: FunctionComponent<TextInputProps> = (props) => {\r\n TextInput.displayName = \"TextInput\";\r\n const classes = useInputStyles();\r\n const [value, setValue] = useState(props.value);\r\n const lastCommittedValue = useRef(props.value);\r\n\r\n useEffect(() => {\r\n if (props.value !== lastCommittedValue.current) {\r\n setValue(props.value); // Update local state when props.value changes\r\n lastCommittedValue.current = props.value;\r\n }\r\n }, [props.value]);\r\n\r\n const validateValue = (val: string): boolean => {\r\n const failsValidator = props.validator && !props.validator(val);\r\n return !failsValidator;\r\n };\r\n\r\n const tryCommitValue = (currVal: string) => {\r\n // Only commit if valid and different from last committed value\r\n if (validateValue(currVal) && currVal !== lastCommittedValue.current) {\r\n lastCommittedValue.current = currVal;\r\n props.onChange(currVal);\r\n }\r\n };\r\n\r\n const handleChange = (event: ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {\r\n event.stopPropagation();\r\n setValue(data.value);\r\n tryCommitValue(data.value);\r\n };\r\n\r\n const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\r\n event.stopPropagation();\r\n setValue(event.currentTarget.value);\r\n tryCommitValue(event.currentTarget.value);\r\n };\r\n const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : \"\", props.className);\r\n\r\n const id = useId(\"input-button\");\r\n return (\r\n <div className={classes.container}>\r\n {props.infoLabel && <InfoLabel {...props.infoLabel} htmlFor={id} />}\r\n <FluentInput\r\n {...props}\r\n id={id}\r\n size=\"medium\"\r\n value={value}\r\n onChange={handleChange}\r\n onKeyUp={handleKeyUp}\r\n onKeyDown={HandleKeyDown}\r\n onBlur={HandleOnBlur}\r\n className={mergedClassName}\r\n />\r\n </div>\r\n );\r\n};\r\n"]}

package/fluent/primitives/textarea.js CHANGED Viewed

@@ -15,6 +15,7 @@ const useInputStyles = makeStyles({
  * @returns
  */
 export const Textarea = (props) => {
+    Textarea.displayName = "Textarea";
     const classes = useInputStyles();
     const handleChange = (event, _data) => {
         event.stopPropagation(); // Prevent event propagation

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

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textarea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAIpF,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,QAAQ,EAAE;QACN,gEAAgE;QAChE,YAAY,EAAE;YACV,SAAS,EAAE,OAAO;YAClB,SAAS,EAAE,OAAO;SACrB;KACJ;CACJ,CAAC,CAAC;AAMH;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAqC,CAAC,KAAK,EAAE,EAAE;IAChE,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,CAAC,KAAuC,EAAE,KAA2B,EAAE,EAAE;QAC1F,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACjB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,oDAAoD;QAC5F,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAyC,EAAE,EAAE;QAChE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;IACzD,CAAC,CAAC;IAEF,OAAO,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AACxH,CAAC,CAAC","sourcesContent":["import type { TextareaOnChangeData } from \"@fluentui/react-components\";\r\nimport { Textarea as FluentTextarea, makeStyles } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nconst useInputStyles = makeStyles({\r\n textarea: {\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n \"& textarea\": {\r\n minHeight: \"100px\",\r\n maxHeight: \"500px\",\r\n },\r\n },\r\n});\r\n\r\nexport type TextareaProps = PrimitiveProps<string> & {\r\n placeholder?: string;\r\n};\r\n\r\n/*\r\n This is a texarea box that stops propagation of change/keydown events\r\n * @param props\r\n * @returns\r\n */\r\nexport const Textarea: FunctionComponent<TextareaProps> = (props) => {\r\n const classes = useInputStyles();\r\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>, _data: TextareaOnChangeData) => {\r\n event.stopPropagation(); // Prevent event propagation\r\n if (props.onChange) {\r\n props.onChange(event.target.value); // Call the original onChange handler passed as prop\r\n }\r\n };\r\n\r\n const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\r\n event.stopPropagation(); // Prevent event propagation\r\n };\r\n\r\n return <FluentTextarea {...props} className={classes.textarea} onChange={handleChange} onKeyDown={handleKeyDown} />;\r\n};\r\n"]}
1	+ {"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textarea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAIpF,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,QAAQ,EAAE;QACN,gEAAgE;QAChE,YAAY,EAAE;YACV,SAAS,EAAE,OAAO;YAClB,SAAS,EAAE,OAAO;SACrB;KACJ;CACJ,CAAC,CAAC;AAMH;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAqC,CAAC,KAAK,EAAE,EAAE;IAChE,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;IAElC,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,CAAC,KAAuC,EAAE,KAA2B,EAAE,EAAE;QAC1F,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;QACrD,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACjB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,oDAAoD;QAC5F,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAyC,EAAE,EAAE;QAChE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,4BAA4B;IACzD,CAAC,CAAC;IAEF,OAAO,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AACxH,CAAC,CAAC","sourcesContent":["import type { TextareaOnChangeData } from \"@fluentui/react-components\";\r\nimport { Textarea as FluentTextarea, makeStyles } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, KeyboardEvent, ChangeEvent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nconst useInputStyles = makeStyles({\r\n textarea: {\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n \"& textarea\": {\r\n minHeight: \"100px\",\r\n maxHeight: \"500px\",\r\n },\r\n },\r\n});\r\n\r\nexport type TextareaProps = PrimitiveProps<string> & {\r\n placeholder?: string;\r\n};\r\n\r\n/*\r\n This is a texarea box that stops propagation of change/keydown events\r\n * @param props\r\n * @returns\r\n */\r\nexport const Textarea: FunctionComponent<TextareaProps> = (props) => {\r\n Textarea.displayName = \"Textarea\";\r\n\r\n const classes = useInputStyles();\r\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>, _data: TextareaOnChangeData) => {\r\n event.stopPropagation(); // Prevent event propagation\r\n if (props.onChange) {\r\n props.onChange(event.target.value); // Call the original onChange handler passed as prop\r\n }\r\n };\r\n\r\n const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\r\n event.stopPropagation(); // Prevent event propagation\r\n };\r\n\r\n return <FluentTextarea {...props} className={classes.textarea} onChange={handleChange} onKeyDown={handleKeyDown} />;\r\n};\r\n"]}

package/fluent/primitives/toggleButton.js CHANGED Viewed

@@ -9,6 +9,7 @@ import { useCallback, useEffect, useState } from "react";
  * @returns
  */
 export const ToggleButton = (props) => {
+    ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle" } = props;
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"toggleButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/toggleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhF,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAWzD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACxE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IAChE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE;YAChB,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC;YACtB,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,OAAO,OAAO,CAAC;QACnB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,SAAS,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,kBAAkB,IACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,aAAa,KAAG,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,EAC7G,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,MAAM,GACjB,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { ToggleButton as FluentToggleButton } from \"@fluentui/react-components\";\r\nimport type { ButtonProps } from \"./button\";\r\nimport { useCallback, useEffect, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\n\r\ntype ToggleButtonProps = Omit<ButtonProps, \"icon\" \| \"onClick\"> & {\r\n value: boolean;\r\n checkedIcon: FluentIcon;\r\n uncheckedIcon?: FluentIcon;\r\n onChange: (checked: boolean) => void;\r\n};\r\n\r\n/*\r\n Toggles between two states using a button with icons.\r\n * If no disabledIcon is provided, the button will toggle between visual enabled/disabled states without an icon change\r\n \r\n @param props\r\n * @returns\r\n */\r\nexport const ToggleButton: FunctionComponent<ToggleButtonProps> = (props) => {\r\n const { value, onChange, title, appearance = \"subtle\" } = props;\r\n const [checked, setChecked] = useState(value);\r\n const toggle = useCallback(() => {\r\n setChecked((prev) => {\r\n const enabled = !prev;\r\n onChange(enabled);\r\n return enabled;\r\n });\r\n }, [setChecked]);\r\n\r\n useEffect(() => {\r\n setChecked(props.value);\r\n }, [props.value]);\r\n\r\n return (\r\n <FluentToggleButton\r\n title={title}\r\n icon={checked ? <props.checkedIcon /> : props.uncheckedIcon ? <props.uncheckedIcon /> : <props.checkedIcon />}\r\n appearance={appearance}\r\n checked={checked}\r\n onClick={toggle}\r\n />\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"toggleButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/toggleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhF,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAWzD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACxE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;IAC1C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IAChE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE;YAChB,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC;YACtB,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,OAAO,OAAO,CAAC;QACnB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,SAAS,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,kBAAkB,IACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,aAAa,KAAG,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,EAC7G,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,MAAM,GACjB,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { ToggleButton as FluentToggleButton } from \"@fluentui/react-components\";\r\nimport type { ButtonProps } from \"./button\";\r\nimport { useCallback, useEffect, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\n\r\ntype ToggleButtonProps = Omit<ButtonProps, \"icon\" \| \"onClick\"> & {\r\n value: boolean;\r\n checkedIcon: FluentIcon;\r\n uncheckedIcon?: FluentIcon;\r\n onChange: (checked: boolean) => void;\r\n};\r\n\r\n/*\r\n Toggles between two states using a button with icons.\r\n * If no disabledIcon is provided, the button will toggle between visual enabled/disabled states without an icon change\r\n \r\n @param props\r\n * @returns\r\n */\r\nexport const ToggleButton: FunctionComponent<ToggleButtonProps> = (props) => {\r\n ToggleButton.displayName = \"ToggleButton\";\r\n const { value, onChange, title, appearance = \"subtle\" } = props;\r\n const [checked, setChecked] = useState(value);\r\n const toggle = useCallback(() => {\r\n setChecked((prev) => {\r\n const enabled = !prev;\r\n onChange(enabled);\r\n return enabled;\r\n });\r\n }, [setChecked]);\r\n\r\n useEffect(() => {\r\n setChecked(props.value);\r\n }, [props.value]);\r\n\r\n return (\r\n <FluentToggleButton\r\n title={title}\r\n icon={checked ? <props.checkedIcon /> : props.uncheckedIcon ? <props.uncheckedIcon /> : <props.checkedIcon />}\r\n appearance={appearance}\r\n checked={checked}\r\n onClick={toggle}\r\n />\r\n );\r\n};\r\n"]}

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

@@ -9,6 +9,6 @@ export declare const CustomTokens: {
     rightAlignOffset: string;
 };
 export declare const UniformWidthStyling: GriffelStyle;
-export declare const useInputStyles: () => Record<"valid" | "invalid", string>;
+export declare const useInputStyles: () => Record<"input" | "container" | "invalid", string>;
 export declare function HandleOnBlur(event: FocusEvent<HTMLInputElement>): void;
 export declare function HandleKeyDown(event: KeyboardEvent<HTMLInputElement>): void;

package/fluent/primitives/utils.js CHANGED Viewed

@@ -9,8 +9,15 @@ export const CustomTokens = {
 };
 export const UniformWidthStyling = { width: CustomTokens.inputWidth, textAlign: "right", boxSizing: "border-box" };
 export const useInputStyles = makeStyles({
-    invalid: { backgroundColor: tokens.colorPaletteRedBackground2, ...UniformWidthStyling },
-    valid: UniformWidthStyling,
+    input: UniformWidthStyling,
+    invalid: { backgroundColor: tokens.colorPaletteRedBackground2 },
+    container: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center", // align items vertically
+        gap: "4px",
+    },
 });
 export function HandleOnBlur(event) {
     event.stopPropagation();