@babylonjs/shared-ui-components 8.11.0 → 8.13.0

package/fluent/hoc/buttonLine.d.ts

@@ -0,0 +1,12 @@
+import type { ButtonProps as FluentButtonProps } from "@fluentui/react-components";
+import type { FunctionComponent } from "react";
+type ButtonLineProps = FluentButtonProps & {
+    label: 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>;
+export {};

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;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"]}

package/fluent/hoc/colorPropertyLine.d.ts

@@ -0,0 +1,15 @@
+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 {};

package/fluent/hoc/colorPropertyLine.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 })] }));
+};
+/**
+ * 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 const ColorPropertyLine = (props) => {
+    return (_jsx(PropertyLine, { ...props, expandedContent: _jsx(ColorSliders, { ...props }), children: props.color.toString() }));
+};
+//# 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":";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"]}

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/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,28 @@
+import type { FunctionComponent, PropsWithChildren } 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;
+};
+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.
+ *
+ * @param props - The properties for the PropertyLine component.
+ * @returns A React element representing the property line.
+ *
+ */
+export declare const PropertyLine: FunctionComponent<PropsWithChildren<PropertyLineProps>>;

package/fluent/hoc/propertyLine.js

@@ -0,0 +1,66 @@
+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 { 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: {
+        width: "33%",
+        textAlign: "left",
+    },
+    rightContent: {
+        width: "67%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+    },
+    button: {
+        marginLeft: tokens.spacingHorizontalXXS,
+        width: "100px",
+    },
+    fillRestOfRightContentWidth: {
+        flex: 1,
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+    },
+    expandedContent: {
+        backgroundColor: tokens.colorNeutralBackground1,
+    },
+});
+export const LineContainer = (props) => {
+    const classes = usePropertyLineStyles();
+    return _jsx("div", { 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 = (props) => {
+    const classes = usePropertyLineStyles();
+    const [expanded, setExpanded] = useState(false);
+    const { label, description, 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) => {
+                                    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 })] }));
+};
+//# 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":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAErF,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,qBAAqB,GAAG,UAAU,CAAC;IACrC,SAAS,EAAE;QACP,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ,EAAE,gCAAgC;QACzD,YAAY,EAAE,GAAG,MAAM,CAAC,eAAe,UAAU,MAAM,CAAC,mBAAmB,EAAE;KAChF;IACD,IAAI,EAAE;QACF,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,YAAY;QAC5B,OAAO,EAAE,GAAG,MAAM,CAAC,iBAAiB,MAAM;QAC1C,KAAK,EAAE,MAAM;KAChB;IACD,KAAK,EAAE;QACH,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,MAAM;KACpB;IACD,YAAY,EAAE;QACV,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,UAAU;KAC7B;IACD,MAAM,EAAE;QACJ,UAAU,EAAE,MAAM,CAAC,oBAAoB;QACvC,KAAK,EAAE,OAAO;KACjB;IACD,2BAA2B,EAAE;QACzB,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,UAAU;QAC1B,UAAU,EAAE,QAAQ;KACvB;IACD,eAAe,EAAE;QACb,eAAe,EAAE,MAAM,CAAC,uBAAuB;KAClD;CACJ,CAAC,CAAC;AAqBH,MAAM,CAAC,MAAM,aAAa,GAAyC,CAAC,KAAK,EAAE,EAAE;IACzE,MAAM,OAAO,GAAG,qBAAqB,EAAE,CAAC;IACxC,OAAO,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAAG,KAAK,CAAC,QAAQ,GAAO,CAAC;AACrE,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAA4D,CAAC,KAAK,EAAE,EAAE;IAC3F,MAAM,OAAO,GAAG,qBAAqB,EAAE,CAAC;IACxC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAExE,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEhD,OAAO,CACH,MAAC,aAAa,eACV,eAAK,SAAS,EAAE,OAAO,CAAC,IAAI,aACxB,KAAC,SAAS,IAAC,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,WAAW,YAClD,KAAC,WAAW,cAAE,KAAK,GAAe,GAC1B,EACZ,eAAK,SAAS,EAAE,OAAO,CAAC,YAAY,aAChC,cAAK,SAAS,EAAE,OAAO,CAAC,2BAA2B,YAAG,QAAQ,GAAO,EAEpE,eAAe,IAAI,CAChB,KAAC,MAAM,IACH,UAAU,EAAC,QAAQ,EACnB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,KAAC,WAAW,KAAG,EACvD,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oCACX,CAAC,CAAC,eAAe,EAAE,CAAC;oCACpB,WAAW,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;gCACzC,CAAC,GACH,CACL,EAEA,MAAM,IAAI,CAAC,WAAW,IAAI,CACvB,KAAC,MAAM,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,EAAE,EAAC,cAAc,EAAC,IAAI,EAAE,KAAC,aAAa,KAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAC,mBAAmB,GAAG,CAC9J,IACC,IACJ,EACL,QAAQ,IAAI,eAAe,IAAI,cAAK,SAAS,EAAE,OAAO,CAAC,eAAe,YAAG,eAAe,GAAO,IACpF,CACnB,CAAC;AACN,CAAC,CAAC","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"]}

package/fluent/hoc/switchPropertyLine.d.ts

@@ -0,0 +1,9 @@
+import type { SwitchProps } from "@fluentui/react-components";
+import type { PropertyLineProps } from "./propertyLine.js";
+import type { FunctionComponent } from "react";
+/**
+ * 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":";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"]}

package/fluent/hoc/syncedSliderLine.d.ts

@@ -0,0 +1,27 @@
+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;
+};
+/**
+ * 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\} /\>
+ * @param props
+ * @returns
+ */
+export declare const SyncedSliderLine: <O extends Record<K, number>, K extends PropertyKey>(props: SyncedSliderLineProps<O, K>) => React.ReactElement;

package/fluent/hoc/syncedSliderLine.js

@@ -0,0 +1,20 @@
+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\} /\>
+ * @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);
+            } }) }));
+};
+//# 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;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"]}

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"]}

package/fluent/hoc/vectorPropertyLine.d.ts

@@ -0,0 +1,18 @@
+import type { FunctionComponent } from "react";
+import type { PropertyLineProps } from "./propertyLine.js";
+import { Vector4 } from "@babylonjs/core/Maths/math.vector.js";
+import type { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+type VectorSliderProps = {
+    vector: Vector3 | Vector4;
+    min?: number;
+    max?: number;
+    step?: number;
+};
+/**
+ * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values
+ * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)
+ * @param props
+ * @returns
+ */
+export declare const VectorPropertyLine: FunctionComponent<VectorSliderProps & PropertyLineProps>;
+export {};

package/fluent/hoc/vectorPropertyLine.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Body1 } from "@fluentui/react-components";
+import { PropertyLine } from "./propertyLine.js";
+import { SyncedSliderLine } from "./syncedSliderLine.js";
+import { Vector4 } from "@babylonjs/core/Maths/math.vector.js";
+const VectorSliders = (props) => {
+    const { vector, ...sliderProps } = props;
+    return (_jsxs(_Fragment, { children: [_jsx(SyncedSliderLine, { ...sliderProps, label: "X", propertyKey: "x", target: vector }), _jsx(SyncedSliderLine, { ...sliderProps, label: "Y", propertyKey: "y", target: vector }), _jsx(SyncedSliderLine, { ...sliderProps, label: "Z", propertyKey: "z", target: vector }), vector instanceof Vector4 && _jsx(SyncedSliderLine, { ...sliderProps, label: "W", propertyKey: "w", target: vector })] }));
+};
+/**
+ * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values
+ * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)
+ * @param props
+ * @returns
+ */
+export const VectorPropertyLine = (props) => {
+    return (_jsx(PropertyLine, { ...props, expandedContent: _jsx(VectorSliders, { ...props }), children: _jsx(Body1, { children: props.vector.toString() }) }));
+};
+//# sourceMappingURL=vectorPropertyLine.js.map

package/fluent/hoc/vectorPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vectorPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/vectorPropertyLine.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,6CAA+B;AAUjD,MAAM,aAAa,GAAyC,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,CACH,8BACI,KAAC,gBAAgB,OAAK,WAAW,EAAE,KAAK,EAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAC,MAAM,EAAE,MAAM,GAAI,EAC/E,KAAC,gBAAgB,OAAK,WAAW,EAAE,KAAK,EAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAC,MAAM,EAAE,MAAM,GAAI,EAC/E,KAAC,gBAAgB,OAAK,WAAW,EAAE,KAAK,EAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAC,MAAM,EAAE,MAAM,GAAI,EAC9E,MAAM,YAAY,OAAO,IAAI,KAAC,gBAAgB,OAAK,WAAW,EAAE,KAAK,EAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAC,MAAM,EAAE,MAAM,GAAI,IAC9G,CACN,CAAC;AACN,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAA6D,CAAC,KAAK,EAAE,EAAE;IAClG,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,EAAE,eAAe,EAAE,KAAC,aAAa,OAAK,KAAK,GAAI,YAClE,KAAC,KAAK,cAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAS,GAC7B,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\n\r\nimport { Body1 } from \"@fluentui/react-components\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\n\r\nimport { SyncedSliderLine } from \"./syncedSliderLine\";\r\n\r\nimport { Vector4 } from \"core/Maths/math.vector\";\r\nimport type { Vector3 } from \"core/Maths/math.vector\";\r\n\r\ntype VectorSliderProps = {\r\n    vector: Vector3 | Vector4;\r\n    min?: number;\r\n    max?: number;\r\n    step?: number;\r\n};\r\n\r\nconst VectorSliders: FunctionComponent<VectorSliderProps> = (props) => {\r\n    const { vector, ...sliderProps } = props;\r\n    return (\r\n        <>\r\n            <SyncedSliderLine {...sliderProps} label=\"X\" propertyKey=\"x\" target={vector} />\r\n            <SyncedSliderLine {...sliderProps} label=\"Y\" propertyKey=\"y\" target={vector} />\r\n            <SyncedSliderLine {...sliderProps} label=\"Z\" propertyKey=\"z\" target={vector} />\r\n            {vector instanceof Vector4 && <SyncedSliderLine {...sliderProps} label=\"W\" propertyKey=\"w\" target={vector} />}\r\n        </>\r\n    );\r\n};\r\n\r\n/**\r\n * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values\r\n * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)\r\n * @param props\r\n * @returns\r\n */\r\nexport const VectorPropertyLine: FunctionComponent<VectorSliderProps & PropertyLineProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props} expandedContent={<VectorSliders {...props} />}>\r\n            <Body1>{props.vector.toString()}</Body1>\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/checkbox.d.ts

@@ -0,0 +1,8 @@
+import type { CheckboxProps } from "@fluentui/react-components";
+import type { FunctionComponent } from "react";
+/**
+ * This is a primitive fluent checkbox that can both read and write checked state
+ * @param props
+ * @returns Checkbox component
+ */
+export declare const Checkbox: FunctionComponent<CheckboxProps>;

package/fluent/primitives/checkbox.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as FluentCheckbox } from "@fluentui/react-components";
+import { useEffect, useState } from "react";
+/**
+ * This is a primitive fluent checkbox that can both read and write checked state
+ * @param props
+ * @returns Checkbox component
+ */
+export const Checkbox = (props) => {
+    const [checked, setChecked] = useState(() => props.checked ?? false);
+    useEffect(() => {
+        if (props.checked != undefined) {
+            setChecked(props.checked); // Update local state when props.checked changes
+        }
+    }, [props.checked]);
+    const onChange = (ev, data) => {
+        props.onChange && props.onChange(ev, data);
+        setChecked(ev.target.checked);
+    };
+    return _jsx(FluentCheckbox, { ...props, checked: checked, onChange: onChange });
+};
+//# sourceMappingURL=checkbox.js.map

package/fluent/primitives/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAqC,CAAC,KAAK,EAAE,EAAE;IAChE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC;IAErE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC;YAC7B,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,gDAAgD;QAC/E,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpB,MAAM,QAAQ,GAAG,CAAC,EAAiC,EAAE,IAA0B,EAAE,EAAE;QAC/E,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;QAC3C,UAAU,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,KAAC,cAAc,OAAK,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AAC/E,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/no-internal-modules\r\n\r\nimport type { CheckboxProps, CheckboxOnChangeData } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\n\r\nimport { Checkbox as FluentCheckbox } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\n/**\r\n * This is a primitive fluent checkbox that can both read and write checked state\r\n * @param props\r\n * @returns Checkbox component\r\n */\r\nexport const Checkbox: FunctionComponent<CheckboxProps> = (props) => {\r\n    const [checked, setChecked] = useState(() => props.checked ?? false);\r\n\r\n    useEffect(() => {\r\n        if (props.checked != undefined) {\r\n            setChecked(props.checked); // Update local state when props.checked changes\r\n        }\r\n    }, [props.checked]);\r\n\r\n    const onChange = (ev: ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => {\r\n        props.onChange && props.onChange(ev, data);\r\n        setChecked(ev.target.checked);\r\n    };\r\n\r\n    return <FluentCheckbox {...props} checked={checked} onChange={onChange} />;\r\n};\r\n"]}

package/fluent/primitives/dropdown.d.ts

@@ -0,0 +1,23 @@
+import type { FunctionComponent } from "react";
+export type DropdownOption = {
+    /**
+     * Defines the visible part of the option
+     */
+    label: string;
+    /**
+     * Defines the value part of the option (returned through the callback)
+     */
+    value: string | number;
+};
+type DropdownProps = {
+    options: readonly DropdownOption[];
+    onSelect: (o: string) => void;
+    defaultValue?: DropdownOption;
+};
+/**
+ * Renders a fluent UI dropdown with a calback for selection and a required default value
+ * @param props
+ * @returns dropdown component
+ */
+export declare const Dropdown: FunctionComponent<DropdownProps>;
+export {};

package/fluent/primitives/dropdown.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown as FluentDropdown, makeStyles, Option } from "@fluentui/react-components";
+const useDropdownStyles = makeStyles({
+    dropdownOption: {
+        textAlign: "right",
+        minWidth: "40px",
+    },
+    optionsLine: {},
+});
+/**
+ * Renders a fluent UI dropdown with a calback for selection and a required default value
+ * @param props
+ * @returns dropdown component
+ */
+export const Dropdown = (props) => {
+    const classes = useDropdownStyles();
+    return (_jsx(FluentDropdown, { className: classes.dropdownOption, onOptionSelect: (evt, data) => {
+            data.optionValue != undefined && props.onSelect(data.optionValue);
+        }, defaultValue: props.defaultValue?.label, defaultSelectedOptions: props.defaultValue && [props.defaultValue.value.toString()], children: props.options.map((option) => (_jsx(Option, { className: classes.optionsLine, value: option.value.toString(), disabled: false, children: option.label }, option.label))) }));
+};
+//# sourceMappingURL=dropdown.js.map

package/fluent/primitives/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG5F,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,cAAc,EAAE;QACZ,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,MAAM;KACnB;IACD,WAAW,EAAE,EAAE;CAClB,CAAC,CAAC;AAeH;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAqC,CAAC,KAAK,EAAE,EAAE;IAChE,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,OAAO,CACH,KAAC,cAAc,IACX,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,cAAc,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC1B,IAAI,CAAC,WAAW,IAAI,SAAS,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACtE,CAAC,EACD,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE,KAAK,EACvC,sBAAsB,EAAE,KAAK,CAAC,YAAY,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,YAElF,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAsB,EAAE,EAAE,CAAC,CAC3C,KAAC,MAAM,IAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAqB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,YACrG,MAAM,CAAC,KAAK,IAD4B,MAAM,CAAC,KAAK,CAEhD,CACZ,CAAC,GACW,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Dropdown as FluentDropdown, makeStyles, Option } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\nconst useDropdownStyles = makeStyles({\r\n    dropdownOption: {\r\n        textAlign: \"right\",\r\n        minWidth: \"40px\",\r\n    },\r\n    optionsLine: {},\r\n});\r\n\r\nexport type DropdownOption = {\r\n    /**\r\n     * Defines the visible part of the option\r\n     */\r\n    label: string;\r\n    /**\r\n     * Defines the value part of the option (returned through the callback)\r\n     */\r\n    value: string | number;\r\n};\r\n\r\ntype DropdownProps = { options: readonly DropdownOption[]; onSelect: (o: string) => void; defaultValue?: DropdownOption };\r\n\r\n/**\r\n * Renders a fluent UI dropdown with a calback for selection and a required default value\r\n * @param props\r\n * @returns dropdown component\r\n */\r\nexport const Dropdown: FunctionComponent<DropdownProps> = (props) => {\r\n    const classes = useDropdownStyles();\r\n    return (\r\n        <FluentDropdown\r\n            className={classes.dropdownOption}\r\n            onOptionSelect={(evt, data) => {\r\n                data.optionValue != undefined && props.onSelect(data.optionValue);\r\n            }}\r\n            defaultValue={props.defaultValue?.label}\r\n            defaultSelectedOptions={props.defaultValue && [props.defaultValue.value.toString()]}\r\n        >\r\n            {props.options.map((option: DropdownOption) => (\r\n                <Option className={classes.optionsLine} key={option.label} value={option.value.toString()} disabled={false}>\r\n                    {option.label}\r\n                </Option>\r\n            ))}\r\n        </FluentDropdown>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/input.d.ts

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from "react";
+import type { InputProps as FluentInputProps } from "@fluentui/react-components";
+/**
+ * This is an input text box that stops propagation of change events and sets its width based on the type of input (text or number)
+ * @param props
+ * @returns
+ */
+export declare const Input: FunctionComponent<FluentInputProps>;

package/fluent/primitives/input.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Input as FluentInput, makeStyles } from "@fluentui/react-components";
+const useInputStyles = makeStyles({
+    text: {
+        height: "auto",
+    },
+    float: {
+        height: "auto",
+        width: "80px", // Fixed width for number input
+        flexShrink: 0,
+    },
+});
+/**
+ * This is an input text box that stops propagation of change events and sets its width based on the type of input (text or number)
+ * @param props
+ * @returns
+ */
+export const Input = (props) => {
+    const classes = useInputStyles();
+    const [value, setValue] = useState(props.value ?? "");
+    useEffect(() => {
+        setValue(props.value ?? ""); // Update local state when props.value changes
+    }, [props.value]);
+    const handleChange = (event, data) => {
+        event.stopPropagation(); // Prevent event propagation
+        if (props.onChange) {
+            props.onChange(event, data); // Call the original onChange handler passed as prop
+        }
+        setValue(event.target.value); // Update local state with the new value
+    };
+    const handleKeyDown = (event) => {
+        event.stopPropagation(); // Prevent event propagation
+        if (props.onKeyDown) {
+            props.onKeyDown(event); // Call the original onKeyDown handler passed as prop
+        }
+    };
+    return _jsx(FluentInput, { ...props, value: value, className: props.type === "number" ? classes.float : classes.text, onChange: handleChange, onKeyDown: handleKeyDown });
+};
+//# sourceMappingURL=input.js.map