@babylonjs/shared-ui-components 8.13.0 → 8.13.1

package/fluent/hoc/buttonLine.d.ts

@@ -1,7 +1,10 @@
-import type { ButtonProps as FluentButtonProps } from "@fluentui/react-components";
 import type { FunctionComponent } from "react";
-type ButtonLineProps = FluentButtonProps & {
+export type ButtonLineProps = {
     label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    icon?: string;
+    title?: string;
 };
 /**
  * Wraps a button with a label in a line container
@@ -9,4 +12,3 @@ type ButtonLineProps = FluentButtonProps & {
  * @returns A button inside a line
  */
 export declare const ButtonLine: FunctionComponent<ButtonLineProps>;
-export {};

package/fluent/hoc/buttonLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE/E,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAG/C,MAAM,mBAAmB,GAAG,UAAU,CAAC;IACnC,MAAM,EAAE;QACJ,MAAM,EAAE,aAAa,MAAM,CAAC,oBAAoB,EAAE;KACrD;CACJ,CAAC,CAAC;AAMH;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,OAAO,GAAG,mBAAmB,EAAE,CAAC;IACtC,OAAO,CACH,KAAC,aAAa,cACV,KAAC,MAAM,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,KAAM,KAAK,YACxC,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,GACvB,GACG,CACnB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Body1, Button, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport type { ButtonProps as FluentButtonProps } from \"@fluentui/react-components\";\r\nimport { LineContainer } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\nconst useButtonLineStyles = makeStyles({\r\n    button: {\r\n        border: `1px solid ${tokens.colorBrandBackground}`,\r\n    },\r\n});\r\n\r\ntype ButtonLineProps = FluentButtonProps & {\r\n    label: string;\r\n};\r\n\r\n/**\r\n * Wraps a button with a label in a line container\r\n * @param props Button props plus a label\r\n * @returns A button inside a line\r\n */\r\nexport const ButtonLine: FunctionComponent<ButtonLineProps> = (props) => {\r\n    const classes = useButtonLineStyles();\r\n    return (\r\n        <LineContainer>\r\n            <Button className={classes.button} {...props}>\r\n                <Body1>{props.label}</Body1>\r\n            </Button>\r\n        </LineContainer>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"buttonLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAG/C,MAAM,mBAAmB,GAAG,UAAU,CAAC;IACnC,MAAM,EAAE;QACJ,MAAM,EAAE,aAAa,MAAM,CAAC,oBAAoB,EAAE;KACrD;CACJ,CAAC,CAAC;AAUH;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,OAAO,GAAG,mBAAmB,EAAE,CAAC;IACtC,OAAO,CACH,KAAC,aAAa,cACV,KAAC,MAAM,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,KAAM,KAAK,YACxC,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,GACvB,GACG,CACnB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Body1, Button, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { LineContainer } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\nconst useButtonLineStyles = makeStyles({\r\n    button: {\r\n        border: `1px solid ${tokens.colorBrandBackground}`,\r\n    },\r\n});\r\n\r\nexport type ButtonLineProps = {\r\n    label: string;\r\n    onClick: () => void;\r\n    disabled?: boolean;\r\n    icon?: string;\r\n    title?: string;\r\n};\r\n\r\n/**\r\n * Wraps a button with a label in a line container\r\n * @param props Button props plus a label\r\n * @returns A button inside a line\r\n */\r\nexport const ButtonLine: FunctionComponent<ButtonLineProps> = (props) => {\r\n    const classes = useButtonLineStyles();\r\n    return (\r\n        <LineContainer>\r\n            <Button className={classes.button} {...props}>\r\n                <Body1>{props.label}</Body1>\r\n            </Button>\r\n        </LineContainer>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/checkboxPropertyLine.d.ts

@@ -0,0 +1,9 @@
+import type { PropertyLineProps } from "./propertyLine.js";
+import type { FunctionComponent } from "react";
+import type { CheckboxProps } from "../primitives/checkbox.js";
+/**
+ * Wraps a checkbox in a property line
+ * @param props - PropertyLineProps and CheckboxProps
+ * @returns property-line wrapped checkbox
+ */
+export declare const CheckboxPropertyLine: FunctionComponent<PropertyLineProps & CheckboxProps>;

package/fluent/hoc/checkboxPropertyLine.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PropertyLine } from "./propertyLine.js";
+import { Checkbox } from "../primitives/checkbox.js";
+/**
+ * Wraps a checkbox in a property line
+ * @param props - PropertyLineProps and CheckboxProps
+ * @returns property-line wrapped checkbox
+ */
+export const CheckboxPropertyLine = (props) => {
+    return (_jsx(PropertyLine, { ...props, children: _jsx(Checkbox, { ...props }) }));
+};
+//# sourceMappingURL=checkboxPropertyLine.js.map

package/fluent/hoc/checkboxPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkboxPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/checkboxPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAyD,CAAC,KAAK,EAAE,EAAE;IAChG,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Checkbox } from \"../primitives/checkbox\";\r\nimport type { CheckboxProps } from \"../primitives/checkbox\";\r\n\r\n/**\r\n * Wraps a checkbox in a property line\r\n * @param props - PropertyLineProps and CheckboxProps\r\n * @returns property-line wrapped checkbox\r\n */\r\nexport const CheckboxPropertyLine: FunctionComponent<PropertyLineProps & CheckboxProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Checkbox {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/colorPropertyLine.d.ts

@@ -2,14 +2,7 @@ import type { FunctionComponent } from "react";
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { Color3 } from "@babylonjs/core/Maths/math.color.js";
 import { Color4 } from "@babylonjs/core/Maths/math.color.js";
-type ColorSliderProps = {
-    color: Color3 | Color4;
-};
-/**
- * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
- * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly
- * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color
- * @returns Component wrapping a colorPicker component (coming soon) with a property line
- */
-export declare const ColorPropertyLine: FunctionComponent<ColorSliderProps & PropertyLineProps>;
-export {};
+import type { ColorPickerProps } from "../primitives/colorPicker.js";
+export type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps;
+export declare const Color3PropertyLine: FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps>;
+export declare const Color4PropertyLine: FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps>;

package/fluent/hoc/colorPropertyLine.js

@@ -1,17 +1,35 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
 import { PropertyLine } from "./propertyLine.js";
 import { SyncedSliderLine } from "./syncedSliderLine.js";
 import { Color4 } from "@babylonjs/core/Maths/math.color.js";
-const ColorSliders = (props) => {
-    return (_jsxs(_Fragment, { children: [_jsx(SyncedSliderLine, { label: "R", propertyKey: "r", target: props.color, min: 0, max: 255 }), _jsx(SyncedSliderLine, { label: "G", propertyKey: "g", target: props.color, min: 0, max: 255 }), _jsx(SyncedSliderLine, { label: "B", propertyKey: "b", target: props.color, min: 0, max: 255 }), props.color instanceof Color4 && _jsx(SyncedSliderLine, { label: "A", propertyKey: "a", target: props.color, min: 0, max: 1 })] }));
-};
+import { ColorPickerPopup } from "../primitives/colorPicker.js";
 /**
  * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
  * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly
  * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color
- * @returns Component wrapping a colorPicker component (coming soon) with a property line
+ * @returns Component wrapping a colorPicker component with a property line
  */
-export const ColorPropertyLine = (props) => {
-    return (_jsx(PropertyLine, { ...props, expandedContent: _jsx(ColorSliders, { ...props }), children: props.color.toString() }));
-};
+const ColorPropertyLine = forwardRef((props, ref) => {
+    const [color, setColor] = useState(props.value);
+    const onSliderChange = (value, key) => {
+        let newColor;
+        if (key === "a") {
+            newColor = Color4.FromColor3(color, value);
+        }
+        else {
+            newColor = color.clone();
+            newColor[key] = value / 255.0;
+        }
+        setColor(newColor); // Create a new object to trigger re-render
+        props.onChange(newColor);
+    };
+    const onColorPickerChange = (newColor) => {
+        setColor(newColor);
+        props.onChange(newColor);
+    };
+    return (_jsx(PropertyLine, { ref: ref, ...props, expandedContent: _jsxs(_Fragment, { children: [_jsx(SyncedSliderLine, { label: "R", value: color.r * 255.0, min: 0, max: 255, step: 1, onChange: (value) => onSliderChange(value, "r") }), _jsx(SyncedSliderLine, { label: "G", value: color.g * 255.0, min: 0, max: 255, step: 1, onChange: (value) => onSliderChange(value, "g") }), _jsx(SyncedSliderLine, { label: "B", value: color.b * 255.0, min: 0, max: 255, step: 1, onChange: (value) => onSliderChange(value, "b") }), color instanceof Color4 && _jsx(SyncedSliderLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") })] }), children: _jsx(ColorPickerPopup, { ...props, onChange: onColorPickerChange, value: color }) }));
+});
+export const Color3PropertyLine = ColorPropertyLine;
+export const Color4PropertyLine = ColorPropertyLine;
 //# sourceMappingURL=colorPropertyLine.js.map

package/fluent/hoc/colorPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/colorPropertyLine.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,MAAM,EAAE,4CAA8B;AAM/C,MAAM,YAAY,GAAwC,CAAC,KAAK,EAAE,EAAE;IAChE,OAAO,CACH,8BACI,KAAC,gBAAgB,IAAC,KAAK,EAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,EACrF,KAAC,gBAAgB,IAAC,KAAK,EAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,EACrF,KAAC,gBAAgB,IAAC,KAAK,EAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,EACpF,KAAK,CAAC,KAAK,YAAY,MAAM,IAAI,KAAC,gBAAgB,IAAC,KAAK,EAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,GAAI,IACtH,CACN,CAAC;AACN,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAA4D,CAAC,KAAK,EAAE,EAAE;IAChG,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,EAAE,eAAe,EAAE,KAAC,YAAY,OAAK,KAAK,GAAI,YAE7D,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,GAGf,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\n\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport { SyncedSliderLine } from \"./syncedSliderLine\";\r\n\r\nimport type { Color3 } from \"core/Maths/math.color\";\r\nimport { Color4 } from \"core/Maths/math.color\";\r\n\r\ntype ColorSliderProps = {\r\n    color: Color3 | Color4;\r\n};\r\n\r\nconst ColorSliders: FunctionComponent<ColorSliderProps> = (props) => {\r\n    return (\r\n        <>\r\n            <SyncedSliderLine label=\"R\" propertyKey=\"r\" target={props.color} min={0} max={255} />\r\n            <SyncedSliderLine label=\"G\" propertyKey=\"g\" target={props.color} min={0} max={255} />\r\n            <SyncedSliderLine label=\"B\" propertyKey=\"b\" target={props.color} min={0} max={255} />\r\n            {props.color instanceof Color4 && <SyncedSliderLine label=\"A\" propertyKey=\"a\" target={props.color} min={0} max={1} />}\r\n        </>\r\n    );\r\n};\r\n\r\n/**\r\n * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values\r\n * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly\r\n * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color\r\n * @returns Component wrapping a colorPicker component (coming soon) with a property line\r\n */\r\nexport const ColorPropertyLine: FunctionComponent<ColorSliderProps & PropertyLineProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props} expandedContent={<ColorSliders {...props} />}>\r\n            {\r\n                props.color.toString()\r\n                // Will replace with colorPicker in future PR\r\n            }\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"colorPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/colorPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { forwardRef, useState } from \"react\";\r\n\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport { SyncedSliderLine } from \"./syncedSliderLine\";\r\n\r\nimport type { Color3 } from \"core/Maths/math.color\";\r\nimport { Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup } from \"../primitives/colorPicker\";\r\nimport type { ColorPickerProps } from \"../primitives/colorPicker\";\r\n\r\nexport type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps;\r\n\r\n/**\r\n * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values\r\n * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly\r\n * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color\r\n * @returns Component wrapping a colorPicker component with a property line\r\n */\r\nconst ColorPropertyLine = forwardRef<HTMLDivElement, ColorPropertyLineProps>((props, ref) => {\r\n    const [color, setColor] = useState(props.value);\r\n\r\n    const onSliderChange = (value: number, key: \"r\" | \"g\" | \"b\" | \"a\") => {\r\n        let newColor;\r\n        if (key === \"a\") {\r\n            newColor = Color4.FromColor3(color, value);\r\n        } else {\r\n            newColor = color.clone();\r\n            newColor[key] = value / 255.0;\r\n        }\r\n\r\n        setColor(newColor); // Create a new object to trigger re-render\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    const onColorPickerChange = (newColor: Color3 | Color4) => {\r\n        setColor(newColor);\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    return (\r\n        <PropertyLine\r\n            ref={ref}\r\n            {...props}\r\n            expandedContent={\r\n                <>\r\n                    <SyncedSliderLine label=\"R\" value={color.r * 255.0} min={0} max={255} step={1} onChange={(value) => onSliderChange(value, \"r\")} />\r\n                    <SyncedSliderLine label=\"G\" value={color.g * 255.0} min={0} max={255} step={1} onChange={(value) => onSliderChange(value, \"g\")} />\r\n                    <SyncedSliderLine label=\"B\" value={color.b * 255.0} min={0} max={255} step={1} onChange={(value) => onSliderChange(value, \"b\")} />\r\n                    {color instanceof Color4 && <SyncedSliderLine label=\"A\" value={color.a} min={0} max={1} step={0.01} onChange={(value) => onSliderChange(value, \"a\")} />}\r\n                </>\r\n            }\r\n        >\r\n            <ColorPickerPopup {...props} onChange={onColorPickerChange} value={color} />\r\n        </PropertyLine>\r\n    );\r\n});\r\n\r\nexport const Color3PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps>;\r\nexport const Color4PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps>;\r\n"]}

package/fluent/hoc/dropdownPropertyLine.d.ts

@@ -0,0 +1,9 @@
+import type { DropdownProps } from "../primitives/dropdown.js";
+import type { PropertyLineProps } from "./propertyLine.js";
+import type { FunctionComponent } from "react";
+/**
+ * Wraps a dropdown in a property line
+ * @param props - PropertyLineProps and DropdownProps
+ * @returns property-line wrapped dropdown
+ */
+export declare const DropdownPropertyLine: FunctionComponent<PropertyLineProps & DropdownProps>;

package/fluent/hoc/dropdownPropertyLine.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from "../primitives/dropdown.js";
+import { PropertyLine } from "./propertyLine.js";
+/**
+ * Wraps a dropdown in a property line
+ * @param props - PropertyLineProps and DropdownProps
+ * @returns property-line wrapped dropdown
+ */
+export const DropdownPropertyLine = (props) => {
+    return (_jsx(PropertyLine, { ...props, children: _jsx(Dropdown, { ...props }) }));
+};
+//# sourceMappingURL=dropdownPropertyLine.js.map

package/fluent/hoc/dropdownPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdownPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/dropdownPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAyD,CAAC,KAAK,EAAE,EAAE;IAChG,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Dropdown } from \"../primitives/dropdown\";\r\nimport type { DropdownProps } from \"../primitives/dropdown\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\n/**\r\n * Wraps a dropdown in a property line\r\n * @param props - PropertyLineProps and DropdownProps\r\n * @returns property-line wrapped dropdown\r\n */\r\nexport const DropdownPropertyLine: FunctionComponent<PropertyLineProps & DropdownProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Dropdown {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/fileUploadLine.d.ts

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from "react";
+import type { ButtonLineProps } from "./buttonLine.js";
+type FileUploadLineProps = Omit<ButtonLineProps, "onClick"> & {
+    onClick: (file: File) => void;
+    accept: string;
+};
+export declare const FileUploadLine: FunctionComponent<FileUploadLineProps>;
+export {};

package/fluent/hoc/fileUploadLine.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { ButtonLine } from "./buttonLine.js";
+export const FileUploadLine = (props) => {
+    const inputRef = useRef(null);
+    const handleButtonClick = () => {
+        inputRef.current?.click();
+    };
+    const handleChange = (evt) => {
+        const files = evt.target.files;
+        if (files && files.length) {
+            props.onClick(files[0]);
+        }
+        evt.target.value = "";
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonLine, { onClick: handleButtonClick, label: props.label }), _jsx("input", { ref: inputRef, type: "file", accept: props.accept, style: { display: "none" }, onChange: handleChange })] }));
+};
+//# sourceMappingURL=fileUploadLine.js.map

package/fluent/hoc/fileUploadLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileUploadLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/fileUploadLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAQ1C,MAAM,CAAC,MAAM,cAAc,GAA2C,CAAC,KAAK,EAAE,EAAE;IAC5E,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,GAAwC,EAAE,EAAE;QAC9D,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QAC/B,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC;QACD,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACH,8BACI,KAAC,UAAU,IAAC,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAe,EACzE,gBAAO,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,YAAY,GAAI,IAC/G,CACN,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useRef } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { ButtonLine } from \"./buttonLine\";\r\nimport type { ButtonLineProps } from \"./buttonLine\";\r\n\r\ntype FileUploadLineProps = Omit<ButtonLineProps, \"onClick\"> & {\r\n    onClick: (file: File) => void;\r\n    accept: string;\r\n};\r\n\r\nexport const FileUploadLine: FunctionComponent<FileUploadLineProps> = (props) => {\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n\r\n    const handleButtonClick = () => {\r\n        inputRef.current?.click();\r\n    };\r\n\r\n    const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {\r\n        const files = evt.target.files;\r\n        if (files && files.length) {\r\n            props.onClick(files[0]);\r\n        }\r\n        evt.target.value = \"\";\r\n    };\r\n\r\n    return (\r\n        <>\r\n            <ButtonLine onClick={handleButtonClick} label={props.label}></ButtonLine>\r\n            <input ref={inputRef} type=\"file\" accept={props.accept} style={{ display: \"none\" }} onChange={handleChange} />\r\n        </>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/hexLineComponent.d.ts

@@ -0,0 +1,9 @@
+import type { PropertyLineProps } from "./propertyLine.js";
+import type { FunctionComponent } from "react";
+import type { InputHexProps } from "../primitives/colorPicker.js";
+/**
+ * Wraps a hex input in a property line
+ * @param props - PropertyLineProps and InputHexProps
+ * @returns property-line wrapped input hex component
+ */
+export declare const HexPropertyLine: FunctionComponent<InputHexProps & PropertyLineProps>;

package/fluent/hoc/hexLineComponent.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PropertyLine } from "./propertyLine.js";
+import { InputHexField } from "../primitives/colorPicker.js";
+/**
+ * Wraps a hex input in a property line
+ * @param props - PropertyLineProps and InputHexProps
+ * @returns property-line wrapped input hex component
+ */
+export const HexPropertyLine = (props) => {
+    return (_jsx(PropertyLine, { ...props, children: _jsx(InputHexField, { ...props }) }));
+};
+//# sourceMappingURL=hexLineComponent.js.map

package/fluent/hoc/hexLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hexLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/hexLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAyD,CAAC,KAAK,EAAE,EAAE;IAC3F,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,aAAa,OAAK,KAAK,GAAI,GACjB,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { InputHexField } from \"../primitives/colorPicker\";\r\nimport type { InputHexProps } from \"../primitives/colorPicker\";\r\n\r\n/**\r\n * Wraps a hex input in a property line\r\n * @param props - PropertyLineProps and InputHexProps\r\n * @returns property-line wrapped input hex component\r\n */\r\nexport const HexPropertyLine: FunctionComponent<InputHexProps & PropertyLineProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <InputHexField {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/inputPropertyLine.d.ts

@@ -0,0 +1,5 @@
+import type { PropertyLineProps } from "./propertyLine.js";
+import type { FunctionComponent } from "react";
+import type { InputProps } from "../primitives/input.js";
+export declare const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps>;
+export declare const FloatInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps>;

package/fluent/hoc/inputPropertyLine.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PropertyLine } from "./propertyLine.js";
+import { Input } from "../primitives/input.js";
+/**
+ * Wraps an input in a property line
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
+const InputPropertyLine = (props) => {
+    return (_jsx(PropertyLine, { ...props, children: _jsx(Input, { ...props }) }));
+};
+export const TextInputPropertyLine = InputPropertyLine;
+export const FloatInputPropertyLine = InputPropertyLine;
+//# sourceMappingURL=inputPropertyLine.js.map

package/fluent/hoc/inputPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/inputPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAK5C;;;;GAIG;AACH,MAAM,iBAAiB,GAA8C,CAAC,KAAK,EAAE,EAAE;IAC3E,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,KAAK,OAAK,KAAK,GAAI,GACT,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,iBAA8E,CAAC;AACpH,MAAM,CAAC,MAAM,sBAAsB,GAAG,iBAA8E,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Input } from \"../primitives/input\";\r\nimport type { InputProps } from \"../primitives/input\";\r\n\r\ntype InputPropertyLineProps = InputProps<string | number> & PropertyLineProps;\r\n\r\n/**\r\n * Wraps an input in a property line\r\n * @param props - PropertyLineProps and InputProps\r\n * @returns property-line wrapped input component\r\n */\r\nconst InputPropertyLine: FunctionComponent<InputPropertyLineProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Input {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n\r\nexport const TextInputPropertyLine = InputPropertyLine as FunctionComponent<InputProps<string> & PropertyLineProps>;\r\nexport const FloatInputPropertyLine = InputPropertyLine as FunctionComponent<InputProps<number> & PropertyLineProps>;\r\n"]}

package/fluent/hoc/propertyLine.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, PropsWithChildren } from "react";
+import type { FunctionComponent } from "react";
 export type PropertyLineProps = {
     /**
      * The name of the property to display in the property line.
@@ -16,8 +16,32 @@ export type PropertyLineProps = {
      * If supplied, an 'expand' icon will be shown which, when clicked, renders this component within the property line.
      */
     expandedContent?: JSX.Element;
+    /**
+     * Link to the documentation for this property, available from the info icon either linked from the description (if provided) or defalt 'docs' text
+     */
+    docLink?: string;
+};
+export declare const LineContainer: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type BaseComponentProps<T> = {
+    /**
+     * The value of the property to be displayed and modified.
+     */
+    value: T;
+    /**
+     * Callback function to handle changes to the value
+     */
+    onChange: (value: T) => void;
+    /**
+     * Optional flag to disable the component, preventing any interaction.
+     */
+    disabled?: boolean;
+    /**
+     * Optional class name to apply custom styles to the component.
+     */
+    className?: string;
 };
-export declare const LineContainer: FunctionComponent<PropsWithChildren>;
 /**
  * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.
  *
@@ -25,4 +49,7 @@ export declare const LineContainer: FunctionComponent<PropsWithChildren>;
  * @returns A React element representing the property line.
  *
  */
-export declare const PropertyLine: FunctionComponent<PropsWithChildren<PropertyLineProps>>;
+export declare const PropertyLine: import("react").ForwardRefExoticComponent<PropertyLineProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PlaceholderPropertyLine: FunctionComponent<BaseComponentProps<any> & PropertyLineProps>;

package/fluent/hoc/propertyLine.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Body1Strong, Button, InfoLabel, makeStyles, tokens } from "@fluentui/react-components";
-import { Add24Filled, Copy24Regular, Subtract24Filled } from "@fluentui/react-icons";
-import { useContext, useState } from "react";
+import { Body1, Body1Strong, Button, InfoLabel, Link, ToggleButton, makeStyles, tokens } from "@fluentui/react-components";
+import { Collapse } from "@fluentui/react-motion-components-preview";
+import { AddFilled, CopyRegular, SubtractFilled } from "@fluentui/react-icons";
+import { useContext, useState, forwardRef } from "react";
 import { copyCommandToClipboard } from "../../copyCommandToClipboard.js";
 import { ToolContext } from "./fluentToolWrapper.js";
 const usePropertyLineStyles = makeStyles({
@@ -19,18 +20,29 @@ const usePropertyLineStyles = makeStyles({
         width: "100%",
     },
     label: {
-        width: "33%",
+        flex: "1 1 0",
+        minWidth: "50px",
         textAlign: "left",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+    labelText: {
+        whiteSpace: "nowrap",
     },
     rightContent: {
-        width: "67%",
+        flex: "0 1 auto",
         display: "flex",
         alignItems: "center",
         justifyContent: "flex-end",
+        gap: tokens.spacingHorizontalS,
     },
     button: {
         marginLeft: tokens.spacingHorizontalXXS,
-        width: "100px",
+        margin: 0,
+        padding: 0,
+        border: 0,
+        minWidth: 0,
     },
     fillRestOfRightContentWidth: {
         flex: 1,
@@ -38,14 +50,15 @@ const usePropertyLineStyles = makeStyles({
         justifyContent: "flex-end",
         alignItems: "center",
     },
-    expandedContent: {
-        backgroundColor: tokens.colorNeutralBackground1,
+    expandButton: {
+        margin: 0,
     },
+    expandedContent: {},
 });
-export const LineContainer = (props) => {
+export const LineContainer = forwardRef((props, ref) => {
     const classes = usePropertyLineStyles();
-    return _jsx("div", { className: classes.container, children: props.children });
-};
+    return (_jsx("div", { ref: ref, className: classes.container, children: props.children }));
+});
 /**
  * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.
  *
@@ -53,14 +66,18 @@ export const LineContainer = (props) => {
  * @returns A React element representing the property line.
  *
  */
-export const PropertyLine = (props) => {
+export const PropertyLine = forwardRef((props, ref) => {
     const classes = usePropertyLineStyles();
     const [expanded, setExpanded] = useState(false);
-    const { label, description, onCopy, expandedContent, children } = props;
+    const { label, onCopy, expandedContent, children } = props;
     const { disableCopy } = useContext(ToolContext);
-    return (_jsxs(LineContainer, { children: [_jsxs("div", { className: classes.line, children: [_jsx(InfoLabel, { className: classes.label, info: description, children: _jsx(Body1Strong, { children: label }) }), _jsxs("div", { className: classes.rightContent, children: [_jsx("div", { className: classes.fillRestOfRightContentWidth, children: children }), expandedContent && (_jsx(Button, { appearance: "subtle", icon: expanded ? _jsx(Subtract24Filled, {}) : _jsx(Add24Filled, {}), className: classes.button, onClick: (e) => {
+    const description = props.description ?? (props.docLink ? _jsx(Link, { href: props.docLink, children: props.description ?? "Docs" }) : props.description);
+    return (_jsxs(LineContainer, { ref: ref, children: [_jsxs("div", { className: classes.line, children: [_jsx(InfoLabel, { className: classes.label, info: description, children: _jsx(Body1Strong, { className: classes.labelText, children: label }) }), _jsxs("div", { className: classes.rightContent, children: [_jsx("div", { className: classes.fillRestOfRightContentWidth, children: children }), expandedContent && (_jsx(ToggleButton, { appearance: "transparent", icon: expanded ? _jsx(SubtractFilled, {}) : _jsx(AddFilled, {}), className: classes.button, checked: expanded, onClick: (e) => {
                                     e.stopPropagation();
                                     setExpanded((expanded) => !expanded);
-                                } })), onCopy && !disableCopy && (_jsx(Button, { className: classes.button, id: "copyProperty", icon: _jsx(Copy24Regular, {}), onClick: () => copyCommandToClipboard(onCopy()), title: "Copy to clipboard" }))] })] }), expanded && expandedContent && _jsx("div", { className: classes.expandedContent, children: expandedContent })] }));
+                                } })), onCopy && !disableCopy && (_jsx(Button, { className: classes.button, id: "copyProperty", icon: _jsx(CopyRegular, {}), onClick: () => copyCommandToClipboard(onCopy()), title: "Copy to clipboard" }))] })] }), _jsx(Collapse, { visible: expanded && !!expandedContent, children: _jsx("div", { className: classes.expandedContent, children: expandedContent }) })] }));
+});
+export const PlaceholderPropertyLine = (props) => {
+    return (_jsx(PropertyLine, { ...props, children: _jsx(Body1, { children: props.value }) }));
 };
 //# sourceMappingURL=propertyLine.js.map

package/fluent/hoc/propertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"propertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Body1Strong, Button, InfoLabel, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { Add24Filled, Copy24Regular, Subtract24Filled } from \"@fluentui/react-icons\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\nimport { useContext, useState } from \"react\";\r\nimport { copyCommandToClipboard } from \"../../copyCommandToClipboard\";\r\nimport { ToolContext } from \"./fluentToolWrapper\";\r\n\r\nconst usePropertyLineStyles = makeStyles({\r\n    container: {\r\n        width: \"100%\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\", // Stack line + expanded content\r\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\r\n    },\r\n    line: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"flex-start\",\r\n        padding: `${tokens.spacingVerticalXS} 0px`,\r\n        width: \"100%\",\r\n    },\r\n    label: {\r\n        width: \"33%\",\r\n        textAlign: \"left\",\r\n    },\r\n    rightContent: {\r\n        width: \"67%\",\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"flex-end\",\r\n    },\r\n    button: {\r\n        marginLeft: tokens.spacingHorizontalXXS,\r\n        width: \"100px\",\r\n    },\r\n    fillRestOfRightContentWidth: {\r\n        flex: 1,\r\n        display: \"flex\",\r\n        justifyContent: \"flex-end\",\r\n        alignItems: \"center\",\r\n    },\r\n    expandedContent: {\r\n        backgroundColor: tokens.colorNeutralBackground1,\r\n    },\r\n});\r\n\r\nexport type PropertyLineProps = {\r\n    /**\r\n     * The name of the property to display in the property line.\r\n     */\r\n    label: string;\r\n    /**\r\n     * Optional description for the property, shown on hover of the info icon\r\n     */\r\n    description?: string;\r\n    /**\r\n     * Optional function returning a string to copy to clipboard.\r\n     */\r\n    onCopy?: () => string;\r\n    /**\r\n     * If supplied, an 'expand' icon will be shown which, when clicked, renders this component within the property line.\r\n     */\r\n    expandedContent?: JSX.Element;\r\n};\r\n\r\nexport const LineContainer: FunctionComponent<PropsWithChildren> = (props) => {\r\n    const classes = usePropertyLineStyles();\r\n    return <div className={classes.container}>{props.children}</div>;\r\n};\r\n\r\n/**\r\n * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.\r\n *\r\n * @param props - The properties for the PropertyLine component.\r\n * @returns A React element representing the property line.\r\n *\r\n */\r\nexport const PropertyLine: FunctionComponent<PropsWithChildren<PropertyLineProps>> = (props) => {\r\n    const classes = usePropertyLineStyles();\r\n    const [expanded, setExpanded] = useState(false);\r\n\r\n    const { label, description, onCopy, expandedContent, children } = props;\r\n\r\n    const { disableCopy } = useContext(ToolContext);\r\n\r\n    return (\r\n        <LineContainer>\r\n            <div className={classes.line}>\r\n                <InfoLabel className={classes.label} info={description}>\r\n                    <Body1Strong>{label}</Body1Strong>\r\n                </InfoLabel>\r\n                <div className={classes.rightContent}>\r\n                    <div className={classes.fillRestOfRightContentWidth}>{children}</div>\r\n\r\n                    {expandedContent && (\r\n                        <Button\r\n                            appearance=\"subtle\"\r\n                            icon={expanded ? <Subtract24Filled /> : <Add24Filled />}\r\n                            className={classes.button}\r\n                            onClick={(e) => {\r\n                                e.stopPropagation();\r\n                                setExpanded((expanded) => !expanded);\r\n                            }}\r\n                        />\r\n                    )}\r\n\r\n                    {onCopy && !disableCopy && (\r\n                        <Button className={classes.button} id=\"copyProperty\" icon={<Copy24Regular />} onClick={() => copyCommandToClipboard(onCopy())} title=\"Copy to clipboard\" />\r\n                    )}\r\n                </div>\r\n            </div>\r\n            {expanded && expandedContent && <div className={classes.expandedContent}>{expandedContent}</div>}\r\n        </LineContainer>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"propertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Body1, Body1Strong, Button, InfoLabel, Link, ToggleButton, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { Collapse } from \"@fluentui/react-motion-components-preview\";\r\nimport { AddFilled, CopyRegular, SubtractFilled } from \"@fluentui/react-icons\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\nimport { useContext, useState, forwardRef } from \"react\";\r\nimport { copyCommandToClipboard } from \"../../copyCommandToClipboard\";\r\nimport { ToolContext } from \"./fluentToolWrapper\";\r\n\r\nconst usePropertyLineStyles = makeStyles({\r\n    container: {\r\n        width: \"100%\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\", // Stack line + expanded content\r\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\r\n    },\r\n    line: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"flex-start\",\r\n        padding: `${tokens.spacingVerticalXS} 0px`,\r\n        width: \"100%\",\r\n    },\r\n    label: {\r\n        flex: \"1 1 0\",\r\n        minWidth: \"50px\",\r\n        textAlign: \"left\",\r\n        whiteSpace: \"nowrap\",\r\n        overflow: \"hidden\",\r\n        textOverflow: \"ellipsis\",\r\n    },\r\n    labelText: {\r\n        whiteSpace: \"nowrap\",\r\n    },\r\n    rightContent: {\r\n        flex: \"0 1 auto\",\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"flex-end\",\r\n        gap: tokens.spacingHorizontalS,\r\n    },\r\n    button: {\r\n        marginLeft: tokens.spacingHorizontalXXS,\r\n        margin: 0,\r\n        padding: 0,\r\n        border: 0,\r\n        minWidth: 0,\r\n    },\r\n    fillRestOfRightContentWidth: {\r\n        flex: 1,\r\n        display: \"flex\",\r\n        justifyContent: \"flex-end\",\r\n        alignItems: \"center\",\r\n    },\r\n    expandButton: {\r\n        margin: 0,\r\n    },\r\n    expandedContent: {},\r\n});\r\n\r\nexport type PropertyLineProps = {\r\n    /**\r\n     * The name of the property to display in the property line.\r\n     */\r\n    label: string;\r\n    /**\r\n     * Optional description for the property, shown on hover of the info icon\r\n     */\r\n    description?: string;\r\n    /**\r\n     * Optional function returning a string to copy to clipboard.\r\n     */\r\n    onCopy?: () => string;\r\n    /**\r\n     * If supplied, an 'expand' icon will be shown which, when clicked, renders this component within the property line.\r\n     */\r\n    expandedContent?: JSX.Element;\r\n\r\n    /**\r\n     * Link to the documentation for this property, available from the info icon either linked from the description (if provided) or defalt 'docs' text\r\n     */\r\n    docLink?: string;\r\n};\r\n\r\nexport const LineContainer = forwardRef<HTMLDivElement, PropsWithChildren>((props, ref) => {\r\n    const classes = usePropertyLineStyles();\r\n    return (\r\n        <div ref={ref} className={classes.container}>\r\n            {props.children}\r\n        </div>\r\n    );\r\n});\r\n\r\nexport type BaseComponentProps<T> = {\r\n    /**\r\n     * The value of the property to be displayed and modified.\r\n     */\r\n    value: T;\r\n    /**\r\n     * Callback function to handle changes to the value\r\n     */\r\n    onChange: (value: T) => void;\r\n    /**\r\n     * Optional flag to disable the component, preventing any interaction.\r\n     */\r\n    disabled?: boolean;\r\n    /**\r\n     * Optional class name to apply custom styles to the component.\r\n     */\r\n    className?: string;\r\n};\r\n\r\n/**\r\n * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.\r\n *\r\n * @param props - The properties for the PropertyLine component.\r\n * @returns A React element representing the property line.\r\n *\r\n */\r\nexport const PropertyLine = forwardRef<HTMLDivElement, PropsWithChildren<PropertyLineProps>>((props, ref) => {\r\n    const classes = usePropertyLineStyles();\r\n    const [expanded, setExpanded] = useState(false);\r\n\r\n    const { label, onCopy, expandedContent, children } = props;\r\n\r\n    const { disableCopy } = useContext(ToolContext);\r\n\r\n    const description = props.description ?? (props.docLink ? <Link href={props.docLink}>{props.description ?? \"Docs\"}</Link> : props.description);\r\n\r\n    return (\r\n        <LineContainer ref={ref}>\r\n            <div className={classes.line}>\r\n                <InfoLabel className={classes.label} info={description}>\r\n                    <Body1Strong className={classes.labelText}>{label}</Body1Strong>\r\n                </InfoLabel>\r\n                <div className={classes.rightContent}>\r\n                    <div className={classes.fillRestOfRightContentWidth}>{children}</div>\r\n\r\n                    {expandedContent && (\r\n                        <ToggleButton\r\n                            appearance=\"transparent\"\r\n                            icon={expanded ? <SubtractFilled /> : <AddFilled />}\r\n                            className={classes.button}\r\n                            checked={expanded}\r\n                            onClick={(e) => {\r\n                                e.stopPropagation();\r\n                                setExpanded((expanded) => !expanded);\r\n                            }}\r\n                        />\r\n                    )}\r\n\r\n                    {onCopy && !disableCopy && (\r\n                        <Button className={classes.button} id=\"copyProperty\" icon={<CopyRegular />} onClick={() => copyCommandToClipboard(onCopy())} title=\"Copy to clipboard\" />\r\n                    )}\r\n                </div>\r\n            </div>\r\n            <Collapse visible={expanded && !!expandedContent}>\r\n                <div className={classes.expandedContent}>{expandedContent}</div>\r\n            </Collapse>\r\n        </LineContainer>\r\n    );\r\n});\r\n\r\nexport const PlaceholderPropertyLine: FunctionComponent<BaseComponentProps<any> & PropertyLineProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Body1>{props.value}</Body1>\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/switchPropertyLine.d.ts

@@ -1,6 +1,6 @@
-import type { SwitchProps } from "@fluentui/react-components";
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
+import type { SwitchProps } from "../primitives/switch.js";
 /**
  * Wraps a switch in a property line
  * @param props - The properties for the switch and property line

package/fluent/hoc/switchPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"switchPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/switchPropertyLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAuD,CAAC,KAAK,EAAE,EAAE;IAC5F,6DAA6D;IAC7D,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IACxC,8FAA8F;IAC9F,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,MAAM,OAAK,WAAW,GAAI,GAChB,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { SwitchProps } from \"@fluentui/react-components\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Switch } from \"../primitives/switch\";\r\n\r\n/**\r\n * Wraps a switch in a property line\r\n * @param props - The properties for the switch and property line\r\n * @returns A React element representing the property line with a switch\r\n */\r\nexport const SwitchPropertyLine: FunctionComponent<PropertyLineProps & SwitchProps> = (props) => {\r\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n    const { label, ...switchProps } = props;\r\n    // Ensure the label gets passed to the PropertyLine component and not to the underlying switch\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Switch {...switchProps} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"switchPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/switchPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAuD,CAAC,KAAK,EAAE,EAAE;IAC5F,6DAA6D;IAC7D,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IACxC,8FAA8F;IAC9F,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,MAAM,OAAK,WAAW,GAAI,GAChB,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Switch } from \"../primitives/switch\";\r\nimport type { SwitchProps } from \"../primitives/switch\";\r\n/**\r\n * Wraps a switch in a property line\r\n * @param props - The properties for the switch and property line\r\n * @returns A React element representing the property line with a switch\r\n */\r\nexport const SwitchPropertyLine: FunctionComponent<PropertyLineProps & SwitchProps> = (props) => {\r\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n    const { label, ...switchProps } = props;\r\n    // Ensure the label gets passed to the PropertyLine component and not to the underlying switch\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Switch {...switchProps} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/syncedSliderLine.d.ts

@@ -1,27 +1,11 @@
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { SyncedSliderProps } from "../primitives/syncedSlider.js";
-export type SyncedSliderLineProps<O, K> = PropertyLineProps & Omit<SyncedSliderProps, "value" | "onChange"> & {
-    /**
-     * String key
-     */
-    propertyKey: K;
-    /**
-     * target where O[K] is a number
-     */
-    target: O;
-    /**
-     * Callback when either the slider or input value changes
-     */
-    onChange?: (value: number) => void;
-};
+import type { FunctionComponent } from "react";
+type SyncedSliderLineProps = SyncedSliderProps & PropertyLineProps;
 /**
- * Renders a SyncedSlider within a PropertyLine for a given key/value pair, where the value is number (ex: can be used for a color's RGBA values, a vector's XYZ values, etc)
- * When value changes, updates the object with the new value and calls the onChange callback.
- *
- * Example usage looks like
- *    \<SyncedSliderLine propertyKey="x" target=\{vector\} /\>
- *    \<SyncedSliderLine propertyKey="r" target=\{color\} /\>
+ * Renders a simple wrapper around the SyncedSliderInput
  * @param props
  * @returns
  */
-export declare const SyncedSliderLine: <O extends Record<K, number>, K extends PropertyKey>(props: SyncedSliderLineProps<O, K>) => React.ReactElement;
+export declare const SyncedSliderLine: FunctionComponent<SyncedSliderLineProps>;
+export {};

package/fluent/hoc/syncedSliderLine.js

@@ -2,19 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { PropertyLine } from "./propertyLine.js";
 import { SyncedSliderInput } from "../primitives/syncedSlider.js";
 /**
- * Renders a SyncedSlider within a PropertyLine for a given key/value pair, where the value is number (ex: can be used for a color's RGBA values, a vector's XYZ values, etc)
- * When value changes, updates the object with the new value and calls the onChange callback.
- *
- * Example usage looks like
- *    \<SyncedSliderLine propertyKey="x" target=\{vector\} /\>
- *    \<SyncedSliderLine propertyKey="r" target=\{color\} /\>
+ * Renders a simple wrapper around the SyncedSliderInput
  * @param props
  * @returns
  */
 export const SyncedSliderLine = (props) => {
-    return (_jsx(PropertyLine, { ...props, children: _jsx(SyncedSliderInput, { ...props, value: props.target[props.propertyKey], onChange: (val) => {
-                props.target[props.propertyKey] = val;
-                props.onChange?.(val);
-            } }) }));
+    const { label, ...sliderProps } = props;
+    return (_jsx(PropertyLine, { label: label, children: _jsx(SyncedSliderInput, { ...sliderProps }) }));
 };
 //# sourceMappingURL=syncedSliderLine.js.map

package/fluent/hoc/syncedSliderLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"syncedSliderLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/syncedSliderLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAmB/D;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAqD,KAAkC,EAAsB,EAAE;IAC3I,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,iBAAiB,OACV,KAAK,EACT,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,EACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE;gBACd,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,GAAW,CAAC;gBAC9C,KAAK,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC;YAC1B,CAAC,GACH,GACS,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport { SyncedSliderInput } from \"../primitives/syncedSlider\";\r\nimport type { SyncedSliderProps } from \"../primitives/syncedSlider\";\r\n\r\nexport type SyncedSliderLineProps<O, K> = PropertyLineProps &\r\n    Omit<SyncedSliderProps, \"value\" | \"onChange\"> & {\r\n        /**\r\n         * String key\r\n         */\r\n        propertyKey: K;\r\n        /**\r\n         * target where O[K] is a number\r\n         */\r\n        target: O;\r\n        /**\r\n         * Callback when either the slider or input value changes\r\n         */\r\n        onChange?: (value: number) => void;\r\n    };\r\n\r\n/**\r\n * Renders a SyncedSlider within a PropertyLine for a given key/value pair, where the value is number (ex: can be used for a color's RGBA values, a vector's XYZ values, etc)\r\n * When value changes, updates the object with the new value and calls the onChange callback.\r\n *\r\n * Example usage looks like\r\n *    \\<SyncedSliderLine propertyKey=\"x\" target=\\{vector\\} /\\>\r\n *    \\<SyncedSliderLine propertyKey=\"r\" target=\\{color\\} /\\>\r\n * @param props\r\n * @returns\r\n */\r\nexport const SyncedSliderLine = <O extends Record<K, number>, K extends PropertyKey>(props: SyncedSliderLineProps<O, K>): React.ReactElement => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <SyncedSliderInput\r\n                {...props}\r\n                value={props.target[props.propertyKey]}\r\n                onChange={(val) => {\r\n                    props.target[props.propertyKey] = val as O[K];\r\n                    props.onChange?.(val);\r\n                }}\r\n            />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"syncedSliderLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/syncedSliderLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK/D;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6C,CAAC,KAAK,EAAsB,EAAE;IACpG,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,CACH,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,YACtB,KAAC,iBAAiB,OAAK,WAAW,GAAI,GAC3B,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport { SyncedSliderInput } from \"../primitives/syncedSlider\";\r\nimport type { SyncedSliderProps } from \"../primitives/syncedSlider\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\ntype SyncedSliderLineProps = SyncedSliderProps & PropertyLineProps;\r\n/**\r\n * Renders a simple wrapper around the SyncedSliderInput\r\n * @param props\r\n * @returns\r\n */\r\nexport const SyncedSliderLine: FunctionComponent<SyncedSliderLineProps> = (props): React.ReactElement => {\r\n    const { label, ...sliderProps } = props;\r\n    return (\r\n        <PropertyLine label={label}>\r\n            <SyncedSliderInput {...sliderProps} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}