@babylonjs/shared-ui-components 8.12.1 → 8.13.1

package/fluent/hoc/buttonLine.d.ts

@@ -0,0 +1,14 @@
+import type { FunctionComponent } from "react";
+export type ButtonLineProps = {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    icon?: string;
+    title?: string;
+};
+/**
+ * Wraps a button with a label in a line container
+ * @param props Button props plus a label
+ * @returns A button inside a line
+ */
+export declare const ButtonLine: FunctionComponent<ButtonLineProps>;

package/fluent/hoc/buttonLine.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Body1, Button, makeStyles, tokens } from "@fluentui/react-components";
+import { LineContainer } from "./propertyLine.js";
+const useButtonLineStyles = makeStyles({
+    button: {
+        border: `1px solid ${tokens.colorBrandBackground}`,
+    },
+});
+/**
+ * Wraps a button with a label in a line container
+ * @param props Button props plus a label
+ * @returns A button inside a line
+ */
+export const ButtonLine = (props) => {
+    const classes = useButtonLineStyles();
+    return (_jsx(LineContainer, { children: _jsx(Button, { className: classes.button, ...props, children: _jsx(Body1, { children: props.label }) }) }));
+};
+//# sourceMappingURL=buttonLine.js.map

package/fluent/hoc/buttonLine.js.map

@@ -0,0 +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;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

@@ -0,0 +1,8 @@
+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";
+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

@@ -0,0 +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";
+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 with a property line
+ */
+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

@@ -0,0 +1 @@
+{"version":3,"file":"colorPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/colorPropertyLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,MAAM,EAAE,4CAA8B;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAK7D;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,UAAU,CAAyC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,GAA0B,EAAE,EAAE;QACjE,IAAI,QAAQ,CAAC;QACb,IAAI,GAAG,KAAK,GAAG,EAAE,CAAC;YACd,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC/C,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;YACzB,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC;QAClC,CAAC;QAED,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,2CAA2C;QAC/D,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,QAAyB,EAAE,EAAE;QACtD,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IACT,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,eAAe,EACX,8BACI,KAAC,gBAAgB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EAClI,KAAC,gBAAgB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EAClI,KAAC,gBAAgB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EACjI,KAAK,YAAY,MAAM,IAAI,KAAC,gBAAgB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,IACxJ,YAGP,KAAC,gBAAgB,OAAK,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAE,KAAK,EAAE,KAAK,GAAI,GACjE,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAAoF,CAAC;AACvH,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAAoF,CAAC","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/fluentToolWrapper.d.ts

@@ -0,0 +1,23 @@
+import type { PropsWithChildren, FunctionComponent } from "react";
+import type { Theme } from "@fluentui/react-components";
+export type ToolHostProps = {
+    /**
+     * Allows host to pass in a theme
+     */
+    customTheme?: Theme;
+    /**
+     * Can be set to true to disable the copy button in the tool's property lines. Default is false (copy enabled)
+     */
+    disableCopy?: boolean;
+};
+export declare const ToolContext: import("react").Context<{
+    readonly useFluent: boolean;
+    readonly disableCopy: boolean;
+}>;
+/**
+ * For tools which are ready to move over the fluent, wrap the root of the tool (or the panel which you want fluentized) with this component
+ * Today we will only enable fluent if the URL has the `newUX` query parameter is truthy
+ * @param props
+ * @returns
+ */
+export declare const FluentToolWrapper: FunctionComponent<PropsWithChildren<ToolHostProps>>;

package/fluent/hoc/fluentToolWrapper.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from "react";
+import { FluentProvider, webDarkTheme } from "@fluentui/react-components";
+export const ToolContext = createContext({ useFluent: false, disableCopy: false });
+/**
+ * For tools which are ready to move over the fluent, wrap the root of the tool (or the panel which you want fluentized) with this component
+ * Today we will only enable fluent if the URL has the `newUX` query parameter is truthy
+ * @param props
+ * @returns
+ */
+export const FluentToolWrapper = (props) => {
+    const url = new URL(window.location.href);
+    const enableFluent = url.searchParams.has("newUX") || url.hash.includes("newUX");
+    return enableFluent ? (_jsx(FluentProvider, { theme: props.customTheme || webDarkTheme, children: _jsx(ToolContext.Provider, { value: { useFluent: true, disableCopy: !!props.disableCopy }, children: props.children }) })) : (props.children);
+};
+//# sourceMappingURL=fluentToolWrapper.js.map

package/fluent/hoc/fluentToolWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluentToolWrapper.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/fluentToolWrapper.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAc1E,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,EAAE,SAAS,EAAE,KAAgB,EAAE,WAAW,EAAE,KAAgB,EAAW,CAAC,CAAC;AAElH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAwD,CAAC,KAAK,EAAE,EAAE;IAC5F,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,YAAY,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAEjF,OAAO,YAAY,CAAC,CAAC,CAAC,CAClB,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,CAAC,WAAW,IAAI,YAAY,YACpD,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,YAAG,KAAK,CAAC,QAAQ,GAAwB,GAC9G,CACpB,CAAC,CAAC,CAAC,CACA,KAAK,CAAC,QAAQ,CACjB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { PropsWithChildren, FunctionComponent } from \"react\";\r\nimport { createContext } from \"react\";\r\nimport type { Theme } from \"@fluentui/react-components\";\r\nimport { FluentProvider, webDarkTheme } from \"@fluentui/react-components\";\r\n\r\nexport type ToolHostProps = {\r\n    /**\r\n     * Allows host to pass in a theme\r\n     */\r\n    customTheme?: Theme;\r\n\r\n    /**\r\n     * Can be set to true to disable the copy button in the tool's property lines. Default is false (copy enabled)\r\n     */\r\n    disableCopy?: boolean;\r\n};\r\n\r\nexport const ToolContext = createContext({ useFluent: false as boolean, disableCopy: false as boolean } as const);\r\n\r\n/**\r\n * For tools which are ready to move over the fluent, wrap the root of the tool (or the panel which you want fluentized) with this component\r\n * Today we will only enable fluent if the URL has the `newUX` query parameter is truthy\r\n * @param props\r\n * @returns\r\n */\r\nexport const FluentToolWrapper: FunctionComponent<PropsWithChildren<ToolHostProps>> = (props) => {\r\n    const url = new URL(window.location.href);\r\n    const enableFluent = url.searchParams.has(\"newUX\") || url.hash.includes(\"newUX\");\r\n\r\n    return enableFluent ? (\r\n        <FluentProvider theme={props.customTheme || webDarkTheme}>\r\n            <ToolContext.Provider value={{ useFluent: true, disableCopy: !!props.disableCopy }}>{props.children}</ToolContext.Provider>\r\n        </FluentProvider>\r\n    ) : (\r\n        props.children\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/linkPropertyLine.d.ts

@@ -0,0 +1,15 @@
+import type { PropertyLineProps } from "./propertyLine.js";
+import type { FunctionComponent } from "react";
+type LinkProps = {
+    value: string;
+    tooltip?: string;
+    onLink?: () => void;
+    url?: string;
+};
+/**
+ * Wraps a link in a property line
+ * @param props - PropertyLineProps and LinkProps
+ * @returns property-line wrapped link
+ */
+export declare const LinkPropertyLine: FunctionComponent<PropertyLineProps & LinkProps>;
+export {};

package/fluent/hoc/linkPropertyLine.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Body1 } from "@fluentui/react-components";
+import { PropertyLine } from "./propertyLine.js";
+import { Link } from "../primitives/link.js";
+/**
+ * Wraps a link in a property line
+ * @param props - PropertyLineProps and LinkProps
+ * @returns property-line wrapped link
+ */
+export const LinkPropertyLine = (props) => {
+    return (_jsx(PropertyLine, { ...props, children: _jsx(Link, { inline: true, appearance: "subtle", onClick: () => props.onLink?.(), href: props.url, title: props.tooltip, children: _jsx(Body1, { children: props.value }) }) }));
+};
+//# sourceMappingURL=linkPropertyLine.js.map

package/fluent/hoc/linkPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linkPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/linkPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAW1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAqD,CAAC,KAAK,EAAE,EAAE;IACxF,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,IAAI,IAAC,MAAM,QAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,YACnG,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,GACzB,GACI,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Body1 } from \"@fluentui/react-components\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport { Link } from \"../primitives/link\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\ntype LinkProps = {\r\n    value: string;\r\n    tooltip?: string;\r\n    onLink?: () => void;\r\n    url?: string;\r\n};\r\n\r\n/**\r\n * Wraps a link in a property line\r\n * @param props - PropertyLineProps and LinkProps\r\n * @returns property-line wrapped link\r\n */\r\nexport const LinkPropertyLine: FunctionComponent<PropertyLineProps & LinkProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Link inline appearance=\"subtle\" onClick={() => props.onLink?.()} href={props.url} title={props.tooltip}>\r\n                <Body1>{props.value}</Body1>\r\n            </Link>\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLine.d.ts

@@ -0,0 +1,55 @@
+import type { FunctionComponent } from "react";
+export type PropertyLineProps = {
+    /**
+     * The name of the property to display in the property line.
+     */
+    label: string;
+    /**
+     * Optional description for the property, shown on hover of the info icon
+     */
+    description?: string;
+    /**
+     * Optional function returning a string to copy to clipboard.
+     */
+    onCopy?: () => string;
+    /**
+     * 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;
+};
+/**
+ * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.
+ *
+ * @param props - The properties for the PropertyLine component.
+ * @returns A React element representing the property line.
+ *
+ */
+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

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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({
+    container: {
+        width: "100%",
+        display: "flex",
+        flexDirection: "column", // Stack line + expanded content
+        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+    },
+    line: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        padding: `${tokens.spacingVerticalXS} 0px`,
+        width: "100%",
+    },
+    label: {
+        flex: "1 1 0",
+        minWidth: "50px",
+        textAlign: "left",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+    labelText: {
+        whiteSpace: "nowrap",
+    },
+    rightContent: {
+        flex: "0 1 auto",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: tokens.spacingHorizontalS,
+    },
+    button: {
+        marginLeft: tokens.spacingHorizontalXXS,
+        margin: 0,
+        padding: 0,
+        border: 0,
+        minWidth: 0,
+    },
+    fillRestOfRightContentWidth: {
+        flex: 1,
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+    },
+    expandButton: {
+        margin: 0,
+    },
+    expandedContent: {},
+});
+export const LineContainer = forwardRef((props, ref) => {
+    const classes = usePropertyLineStyles();
+    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.
+ *
+ * @param props - The properties for the PropertyLine component.
+ * @returns A React element representing the property line.
+ *
+ */
+export const PropertyLine = forwardRef((props, ref) => {
+    const classes = usePropertyLineStyles();
+    const [expanded, setExpanded] = useState(false);
+    const { label, onCopy, expandedContent, children } = props;
+    const { disableCopy } = useContext(ToolContext);
+    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(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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,9 @@
+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
+ * @returns A React element representing the property line with a switch
+ */
+export declare const SwitchPropertyLine: FunctionComponent<PropertyLineProps & SwitchProps>;

package/fluent/hoc/switchPropertyLine.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PropertyLine } from "./propertyLine.js";
+import { Switch } from "../primitives/switch.js";
+/**
+ * Wraps a switch in a property line
+ * @param props - The properties for the switch and property line
+ * @returns A React element representing the property line with a switch
+ */
+export const SwitchPropertyLine = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { label, ...switchProps } = props;
+    // Ensure the label gets passed to the PropertyLine component and not to the underlying switch
+    return (_jsx(PropertyLine, { ...props, children: _jsx(Switch, { ...switchProps }) }));
+};
+//# sourceMappingURL=switchPropertyLine.js.map

package/fluent/hoc/switchPropertyLine.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,11 @@
+import type { PropertyLineProps } from "./propertyLine.js";
+import type { SyncedSliderProps } from "../primitives/syncedSlider.js";
+import type { FunctionComponent } from "react";
+type SyncedSliderLineProps = SyncedSliderProps & PropertyLineProps;
+/**
+ * Renders a simple wrapper around the SyncedSliderInput
+ * @param props
+ * @returns
+ */
+export declare const SyncedSliderLine: FunctionComponent<SyncedSliderLineProps>;
+export {};

package/fluent/hoc/syncedSliderLine.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PropertyLine } from "./propertyLine.js";
+import { SyncedSliderInput } from "../primitives/syncedSlider.js";
+/**
+ * Renders a simple wrapper around the SyncedSliderInput
+ * @param props
+ * @returns
+ */
+export const SyncedSliderLine = (props) => {
+    const { label, ...sliderProps } = props;
+    return (_jsx(PropertyLine, { label: label, children: _jsx(SyncedSliderInput, { ...sliderProps }) }));
+};
+//# sourceMappingURL=syncedSliderLine.js.map

package/fluent/hoc/syncedSliderLine.js.map

@@ -0,0 +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;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"]}

package/fluent/hoc/textPropertyLine.d.ts

@@ -0,0 +1,13 @@
+import type { PropertyLineProps } from "./propertyLine.js";
+import type { FunctionComponent } from "react";
+type TextProps = {
+    value: string;
+    tooltip?: string;
+};
+/**
+ * Wraps text in a property line
+ * @param props - PropertyLineProps and TextProps
+ * @returns property-line wrapped text
+ */
+export declare const TextPropertyLine: FunctionComponent<PropertyLineProps & TextProps>;
+export {};

package/fluent/hoc/textPropertyLine.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Body1 } from "@fluentui/react-components";
+import { PropertyLine } from "./propertyLine.js";
+/**
+ * Wraps text in a property line
+ * @param props - PropertyLineProps and TextProps
+ * @returns property-line wrapped text
+ */
+export const TextPropertyLine = (props) => {
+    return (_jsx(PropertyLine, { ...props, children: _jsx(Body1, { title: props.tooltip, children: props.value }) }));
+};
+//# sourceMappingURL=textPropertyLine.js.map

package/fluent/hoc/textPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/textPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAqD,CAAC,KAAK,EAAE,EAAE;IACxF,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,OAAO,YAAG,KAAK,CAAC,KAAK,GAAS,GACvC,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Body1 } from \"@fluentui/react-components\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\ntype TextProps = {\r\n    value: string;\r\n    tooltip?: string;\r\n};\r\n\r\n/**\r\n * Wraps text in a property line\r\n * @param props - PropertyLineProps and TextProps\r\n * @returns property-line wrapped text\r\n */\r\nexport const TextPropertyLine: FunctionComponent<PropertyLineProps & TextProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Body1 title={props.tooltip}>{props.value}</Body1>\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}