@babylonjs/shared-ui-components 8.15.1 → 8.16.1

package/components/propertyTabComponentBase.d.ts

@@ -0,0 +1,9 @@
+import type { FunctionComponent, PropsWithChildren } from "react";
+/**
+ * A wrapper component for the property tab that provides a consistent layout and styling.
+ * It uses a Pane and an Accordion to organize the content, so its direct children
+ * must have 'title' props to be compatible with the Accordion structure.
+ * @param props The props to pass to the component.
+ * @returns The rendered component.
+ */
+export declare const PropertyTabComponentBase: FunctionComponent<PropsWithChildren>;

package/components/propertyTabComponentBase.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
+import { Pane } from "../fluent/hoc/pane.js";
+import { Accordion } from "../fluent/primitives/accordion.js";
+/**
+ * A wrapper component for the property tab that provides a consistent layout and styling.
+ * It uses a Pane and an Accordion to organize the content, so its direct children
+ * must have 'title' props to be compatible with the Accordion structure.
+ * @param props The props to pass to the component.
+ * @returns The rendered component.
+ */
+export const PropertyTabComponentBase = (props) => {
+    const context = useContext(ToolContext);
+    if (context.useFluent) {
+        return (_jsx(Pane, { title: context.toolName, children: _jsx(Accordion, { children: props.children }) }));
+    }
+    return (_jsxs("div", { id: "propertyTab", children: [_jsxs("div", { id: "header", children: [_jsx("img", { id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" }), _jsx("div", { id: "title", children: context.toolName })] }), _jsx("div", { children: props.children })] }));
+};
+//# sourceMappingURL=propertyTabComponentBase.js.map

package/components/propertyTabComponentBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"propertyTabComponentBase.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/propertyTabComponentBase.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAyC,CAAC,KAAK,EAAE,EAAE;IACpF,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,IAAI,OAAO,CAAC,SAAS,EAAE,CAAC;QACpB,OAAO,CACH,KAAC,IAAI,IAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,YACzB,KAAC,SAAS,cAAE,KAAK,CAAC,QAAQ,GAAa,GACpC,CACV,CAAC;IACN,CAAC;IAED,OAAO,CACH,eAAK,EAAE,EAAC,aAAa,aACjB,eAAK,EAAE,EAAC,QAAQ,aACZ,cAAK,EAAE,EAAC,MAAM,EAAC,GAAG,EAAC,oEAAoE,GAAG,EAC1F,cAAK,EAAE,EAAC,OAAO,YAAE,OAAO,CAAC,QAAQ,GAAO,IACtC,EACN,wBAAM,KAAK,CAAC,QAAQ,GAAO,IACzB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useContext } from \"react\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\nimport { Pane } from \"../fluent/hoc/pane\";\r\nimport { Accordion } from \"../fluent/primitives/accordion\";\r\n\r\n/**\r\n * A wrapper component for the property tab that provides a consistent layout and styling.\r\n * It uses a Pane and an Accordion to organize the content, so its direct children\r\n * must have 'title' props to be compatible with the Accordion structure.\r\n * @param props The props to pass to the component.\r\n * @returns The rendered component.\r\n */\r\nexport const PropertyTabComponentBase: FunctionComponent<PropsWithChildren> = (props) => {\r\n    const context = useContext(ToolContext);\r\n\r\n    if (context.useFluent) {\r\n        return (\r\n            <Pane title={context.toolName}>\r\n                <Accordion>{props.children}</Accordion>\r\n            </Pane>\r\n        );\r\n    }\r\n\r\n    return (\r\n        <div id=\"propertyTab\">\r\n            <div id=\"header\">\r\n                <img id=\"logo\" src=\"https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png\" />\r\n                <div id=\"title\">{context.toolName}</div>\r\n            </div>\r\n            <div>{props.children}</div>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/dropdownPropertyLine.d.ts

@@ -3,7 +3,6 @@ import type { AcceptedDropdownValue, DropdownProps } from "../primitives/dropdow
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
 type DropdownPropertyLineProps<V extends AcceptedDropdownValue> = Omit<DropdownProps<V>, "includeNullAs"> & PropertyLineProps;
-export declare const NullableDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>>;
 /**
  * Dropdown component for explicitly defined number values.
  * If value can be undefined, use OptionalNumberDropdownPropertyLine instead.

package/fluent/hoc/dropdownPropertyLine.js

@@ -9,7 +9,7 @@ import { PropertyLine } from "./propertyLine.js";
 const DropdownPropertyLine = (props) => {
     return (_jsx(PropertyLine, { ...props, children: _jsx(Dropdown, { ...props }) }));
 };
-export const NullableDropdownPropertyLine = (props) => (_jsx(DropdownPropertyLine, { ...props, includeNullAs: "null" }));
+const NullableDropdownPropertyLine = (props) => _jsx(DropdownPropertyLine, { ...props, includeNullAs: "null" });
 const OptionalDropdownPropertyLine = (props) => _jsx(DropdownPropertyLine, { ...props, includeNullAs: "undefined" });
 /**
  * Dropdown component for explicitly defined number values.

package/fluent/hoc/dropdownPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdownPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/dropdownPropertyLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM9C;;;;GAIG;AACH,MAAM,oBAAoB,GAAgF,CAAC,KAAK,EAAE,EAAE;IAChH,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAwE,CAAC,KAAK,EAAE,EAAE,CAAC,CACxH,KAAC,oBAAoB,OAAK,KAAK,EAAE,aAAa,EAAC,MAAM,GAAG,CAC3D,CAAC;AACF,MAAM,4BAA4B,GAAwE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,oBAAoB,OAAK,KAAK,EAAE,aAAa,EAAC,WAAW,GAAG,CAAC;AAEnL;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AACvH;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AAEvH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAA8F,CAAC;AACjJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAA8F,CAAC;AAEjJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAAgG,CAAC;AACnJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAAgG,CAAC","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport { Dropdown } from \"../primitives/dropdown\";\r\nimport type { AcceptedDropdownValue, DropdownProps } from \"../primitives/dropdown\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\ntype DropdownPropertyLineProps<V extends AcceptedDropdownValue> = Omit<DropdownProps<V>, \"includeNullAs\"> & PropertyLineProps;\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\nconst DropdownPropertyLine: FunctionComponent<DropdownProps<AcceptedDropdownValue> & PropertyLineProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Dropdown {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n\r\nexport const NullableDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>> = (props) => (\r\n    <DropdownPropertyLine {...props} includeNullAs=\"null\" />\r\n);\r\nconst OptionalDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>> = (props) => <DropdownPropertyLine {...props} includeNullAs=\"undefined\" />;\r\n\r\n/**\r\n * Dropdown component for explicitly defined number values.\r\n * If value can be undefined, use OptionalNumberDropdownPropertyLine instead.\r\n * If value can be null, use NullableNumberDropdownPropertyLine instead.\r\n */\r\nexport const NumberDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number>>;\r\n/**\r\n * Dropdown component for explicitly defined string values.\r\n * If value can be undefined, use OptionalStringDropdownPropertyLine instead.\r\n * If value can be null, use NullableStringDropdownPropertyLine instead.\r\n */\r\nexport const StringDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string>>;\r\n\r\n/**\r\n * Dropdown component for Nullable<number> values.\r\n */\r\nexport const NullableNumberDropdownPropertyLine = NullableDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<Nullable<number>>>;\r\n/**\r\n * Dropdown component for Nullable<string> values.\r\n */\r\nexport const NullableStringDropdownPropertyLine = NullableDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<Nullable<string>>>;\r\n\r\n/**\r\n * Dropdown component for number | undefined values\r\n */\r\nexport const OptionalNumberDropdownPropertyLine = OptionalDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number | undefined>>;\r\n/**\r\n * Dropdown component for string | undefined values\r\n */\r\nexport const OptionalStringDropdownPropertyLine = OptionalDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string | undefined>>;\r\n"]}
+{"version":3,"file":"dropdownPropertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/dropdownPropertyLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM9C;;;;GAIG;AACH,MAAM,oBAAoB,GAAgF,CAAC,KAAK,EAAE,EAAE;IAChH,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,4BAA4B,GAAwE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,oBAAoB,OAAK,KAAK,EAAE,aAAa,EAAC,MAAM,GAAG,CAAC;AAC9K,MAAM,4BAA4B,GAAwE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,oBAAoB,OAAK,KAAK,EAAE,aAAa,EAAC,WAAW,GAAG,CAAC;AAEnL;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AACvH;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AAEvH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAA8F,CAAC;AACjJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAA8F,CAAC;AAEjJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAAgG,CAAC;AACnJ;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,4BAAgG,CAAC","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport { Dropdown } from \"../primitives/dropdown\";\r\nimport type { AcceptedDropdownValue, DropdownProps } from \"../primitives/dropdown\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\ntype DropdownPropertyLineProps<V extends AcceptedDropdownValue> = Omit<DropdownProps<V>, \"includeNullAs\"> & PropertyLineProps;\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\nconst DropdownPropertyLine: FunctionComponent<DropdownProps<AcceptedDropdownValue> & PropertyLineProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Dropdown {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n\r\nconst NullableDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>> = (props) => <DropdownPropertyLine {...props} includeNullAs=\"null\" />;\r\nconst OptionalDropdownPropertyLine: FunctionComponent<DropdownPropertyLineProps<AcceptedDropdownValue>> = (props) => <DropdownPropertyLine {...props} includeNullAs=\"undefined\" />;\r\n\r\n/**\r\n * Dropdown component for explicitly defined number values.\r\n * If value can be undefined, use OptionalNumberDropdownPropertyLine instead.\r\n * If value can be null, use NullableNumberDropdownPropertyLine instead.\r\n */\r\nexport const NumberDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number>>;\r\n/**\r\n * Dropdown component for explicitly defined string values.\r\n * If value can be undefined, use OptionalStringDropdownPropertyLine instead.\r\n * If value can be null, use NullableStringDropdownPropertyLine instead.\r\n */\r\nexport const StringDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string>>;\r\n\r\n/**\r\n * Dropdown component for Nullable<number> values.\r\n */\r\nexport const NullableNumberDropdownPropertyLine = NullableDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<Nullable<number>>>;\r\n/**\r\n * Dropdown component for Nullable<string> values.\r\n */\r\nexport const NullableStringDropdownPropertyLine = NullableDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<Nullable<string>>>;\r\n\r\n/**\r\n * Dropdown component for number | undefined values\r\n */\r\nexport const OptionalNumberDropdownPropertyLine = OptionalDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number | undefined>>;\r\n/**\r\n * Dropdown component for string | undefined values\r\n */\r\nexport const OptionalStringDropdownPropertyLine = OptionalDropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string | undefined>>;\r\n"]}

package/fluent/hoc/fileUploadLine.d.ts

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

package/fluent/hoc/fileUploadLine.js

@@ -9,7 +9,7 @@ export const FileUploadLine = (props) => {
     const handleChange = (evt) => {
         const files = evt.target.files;
         if (files && files.length) {
-            props.onClick(files[0]);
+            props.onClick(files);
         }
         evt.target.value = "";
     };

package/fluent/hoc/fileUploadLine.js.map

@@ -1 +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"]}
+{"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;QACzB,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: (files: FileList) => 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);\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

@@ -9,10 +9,15 @@ export type ToolHostProps = {
      * Can be set to true to disable the copy button in the tool's property lines. Default is false (copy enabled)
      */
     disableCopy?: boolean;
+    /**
+     * Name of the tool displayed in the UX
+     */
+    toolName: string;
 };
 export declare const ToolContext: import("react").Context<{
     readonly useFluent: boolean;
     readonly disableCopy: boolean;
+    readonly toolName: string;
 }>;
 /**
  * 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

package/fluent/hoc/fluentToolWrapper.js

@@ -1,7 +1,7 @@
 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 });
+export const ToolContext = createContext({ useFluent: false, disableCopy: false, toolName: "" });
 /**
  * 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
@@ -10,7 +10,12 @@ export const ToolContext = createContext({ useFluent: false, disableCopy: false
  */
 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);
+    const useFluent = url.searchParams.has("newUX") || url.hash.includes("newUX");
+    const contextValue = {
+        useFluent,
+        disableCopy: !!props.disableCopy,
+        toolName: props.toolName,
+    };
+    return useFluent ? (_jsx(FluentProvider, { theme: props.customTheme || webDarkTheme, children: _jsx(ToolContext.Provider, { value: contextValue, children: props.children }) })) : (_jsx(ToolContext.Provider, { value: contextValue, children: props.children }));
 };
 //# sourceMappingURL=fluentToolWrapper.js.map

package/fluent/hoc/fluentToolWrapper.js.map

@@ -1 +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"]}
+{"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;AAmB1E,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,EAAE,SAAS,EAAE,KAAgB,EAAE,WAAW,EAAE,KAAgB,EAAE,QAAQ,EAAE,EAAY,EAAW,CAAC,CAAC;AAE1I;;;;;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,SAAS,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC9E,MAAM,YAAY,GAAG;QACjB,SAAS;QACT,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,WAAW;QAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ;KAC3B,CAAC;IACF,OAAO,SAAS,CAAC,CAAC,CAAC,CACf,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,CAAC,WAAW,IAAI,YAAY,YACpD,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAAG,KAAK,CAAC,QAAQ,GAAwB,GACrE,CACpB,CAAC,CAAC,CAAC,CACA,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAAG,KAAK,CAAC,QAAQ,GAAwB,CACrF,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\n     * Name of the tool displayed in the UX\r\n     */\r\n    toolName: string;\r\n};\r\n\r\nexport const ToolContext = createContext({ useFluent: false as boolean, disableCopy: false as boolean, toolName: \"\" as string } 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 useFluent = url.searchParams.has(\"newUX\") || url.hash.includes(\"newUX\");\r\n    const contextValue = {\r\n        useFluent,\r\n        disableCopy: !!props.disableCopy,\r\n        toolName: props.toolName,\r\n    };\r\n    return useFluent ? (\r\n        <FluentProvider theme={props.customTheme || webDarkTheme}>\r\n            <ToolContext.Provider value={contextValue}>{props.children}</ToolContext.Provider>\r\n        </FluentProvider>\r\n    ) : (\r\n        <ToolContext.Provider value={contextValue}>{props.children}</ToolContext.Provider>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/gradientList.d.ts

@@ -0,0 +1,14 @@
+import type { FunctionComponent } from "react";
+import { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from "@babylonjs/core/Misc/gradients.js";
+import type { Nullable } from "@babylonjs/core/types.js";
+type GradientListProps<T extends FactorGradient | Color3Gradient | Color4Gradient> = {
+    label: string;
+    gradients: Nullable<Array<T>>;
+    addGradient: (step?: T) => void;
+    removeGradient: (step: T) => void;
+    onChange: (newGradient: T) => void;
+};
+export declare const FactorGradientList: FunctionComponent<GradientListProps<FactorGradient>>;
+export declare const Color3GradientList: FunctionComponent<GradientListProps<Color3Gradient>>;
+export declare const Color4GradientList: FunctionComponent<GradientListProps<Color4Gradient>>;
+export {};

package/fluent/hoc/gradientList.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { List } from "../primitives/list.js";
+import { Color3GradientComponent, Color4GradientComponent, FactorGradientComponent } from "../primitives/gradient.js";
+import { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from "@babylonjs/core/Misc/gradients.js";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
+// Convert gradients to LineList items and sort by gradient value
+function GradientsToListItems(gradients) {
+    return (gradients?.map((gradient, index) => ({
+        id: index,
+        data: gradient,
+        sortBy: gradient.gradient,
+    })) ?? []);
+}
+const GradientList = (props) => {
+    const { gradients, type } = props;
+    const items = GradientsToListItems(gradients);
+    const deleteStep = (step) => {
+        props.removeGradient(step);
+    };
+    const addNewStep = () => {
+        if (items.length === 0) {
+            props.addGradient(); // Default
+        }
+        else {
+            switch (props.type) {
+                case "Factor": {
+                    const newStep = new FactorGradient(1, 1, 1);
+                    props.addGradient(newStep);
+                    break;
+                }
+                case "Color3": {
+                    const newStepColor3 = new Color3Gradient(1, Color3.White());
+                    props.addGradient(newStepColor3);
+                    break;
+                }
+                case "Color4": {
+                    const newStepColor = new Color4Gradient(1, new Color4(1, 1, 1, 1), new Color4(1, 1, 1, 1));
+                    props.addGradient(newStepColor);
+                    break;
+                }
+            }
+        }
+    };
+    return (_jsx("div", { children: _jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item) => deleteStep(item.data), onAdd: addNewStep, renderItem: (item) => {
+                const gradient = item.data;
+                switch (props.type) {
+                    case "Factor":
+                        return (_jsx(FactorGradientComponent, { value: gradient, onChange: (newGradient) => {
+                                item.data.gradient = newGradient.gradient;
+                                item.data.factor1 = newGradient.factor1;
+                                item.data.factor2 = newGradient.factor2;
+                                props.onChange(newGradient);
+                            } }));
+                    case "Color3":
+                        return (_jsx(Color3GradientComponent, { value: gradient, onChange: (newGradient) => {
+                                item.data.gradient = newGradient.gradient;
+                                item.data.color = newGradient.color;
+                                props.onChange(newGradient);
+                            } }));
+                    case "Color4":
+                        return (_jsx(Color4GradientComponent, { value: gradient, onChange: (newGradient) => {
+                                item.data.gradient = newGradient.gradient;
+                                item.data.color1 = newGradient.color1;
+                                item.data.color2 = newGradient.color2;
+                                props.onChange(newGradient);
+                            } }));
+                }
+            } }, type) }));
+};
+const FactorGradientCast = GradientList;
+const Color3GradientCast = GradientList;
+const Color4GradientCast = GradientList;
+export const FactorGradientList = (props) => _jsx(FactorGradientCast, { ...props, type: "Factor" });
+export const Color3GradientList = (props) => _jsx(Color3GradientCast, { ...props, type: "Color3" });
+export const Color4GradientList = (props) => _jsx(Color4GradientCast, { ...props, type: "Color4" });
+//# sourceMappingURL=gradientList.js.map

package/fluent/hoc/gradientList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradientList.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/gradientList.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\n\r\nimport { List } from \"../primitives/list\";\r\nimport { Color3GradientComponent, Color4GradientComponent, FactorGradientComponent } from \"../primitives/gradient\";\r\nimport { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from \"core/Misc/gradients\";\r\nimport type { IValueGradient } from \"core/Misc/gradients\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\n\r\ntype GradientTypes = \"Factor\" | \"Color3\" | \"Color4\";\r\n\r\ntype GradientListProps<T extends FactorGradient | Color3Gradient | Color4Gradient> = {\r\n    label: string;\r\n    gradients: Nullable<Array<T>>;\r\n    addGradient: (step?: T) => void;\r\n    removeGradient: (step: T) => void;\r\n    onChange: (newGradient: T) => void;\r\n};\r\n\r\n// Convert gradients to LineList items and sort by gradient value\r\nfunction GradientsToListItems(gradients: Nullable<Array<IValueGradient>>) {\r\n    return (\r\n        gradients?.map((gradient, index) => ({\r\n            id: index,\r\n            data: gradient,\r\n            sortBy: gradient.gradient,\r\n        })) ?? []\r\n    );\r\n}\r\n\r\nconst GradientList: FunctionComponent<GradientListProps<FactorGradient | Color3Gradient | Color4Gradient> & { type: GradientTypes }> = (props) => {\r\n    const { gradients, type } = props;\r\n    const items = GradientsToListItems(gradients);\r\n\r\n    const deleteStep = (step: FactorGradient | Color3Gradient | Color4Gradient) => {\r\n        props.removeGradient(step);\r\n    };\r\n\r\n    const addNewStep = () => {\r\n        if (items.length === 0) {\r\n            props.addGradient(); // Default\r\n        } else {\r\n            switch (props.type) {\r\n                case \"Factor\": {\r\n                    const newStep = new FactorGradient(1, 1, 1);\r\n                    props.addGradient(newStep);\r\n                    break;\r\n                }\r\n                case \"Color3\": {\r\n                    const newStepColor3 = new Color3Gradient(1, Color3.White());\r\n                    props.addGradient(newStepColor3);\r\n                    break;\r\n                }\r\n                case \"Color4\": {\r\n                    const newStepColor = new Color4Gradient(1, new Color4(1, 1, 1, 1), new Color4(1, 1, 1, 1));\r\n                    props.addGradient(newStepColor);\r\n                    break;\r\n                }\r\n            }\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div>\r\n            <List\r\n                key={type}\r\n                addButtonLabel={items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`}\r\n                items={items}\r\n                onDelete={(item) => deleteStep(item.data)}\r\n                onAdd={addNewStep}\r\n                renderItem={(item) => {\r\n                    const gradient = item.data;\r\n                    switch (props.type) {\r\n                        case \"Factor\":\r\n                            return (\r\n                                <FactorGradientComponent\r\n                                    value={gradient}\r\n                                    onChange={(newGradient: FactorGradient) => {\r\n                                        item.data.gradient = newGradient.gradient;\r\n                                        item.data.factor1 = newGradient.factor1;\r\n                                        item.data.factor2 = newGradient.factor2;\r\n                                        props.onChange(newGradient);\r\n                                    }}\r\n                                />\r\n                            );\r\n\r\n                        case \"Color3\":\r\n                            return (\r\n                                <Color3GradientComponent\r\n                                    value={gradient}\r\n                                    onChange={(newGradient: Color3Gradient) => {\r\n                                        item.data.gradient = newGradient.gradient;\r\n                                        item.data.color = newGradient.color;\r\n                                        props.onChange(newGradient);\r\n                                    }}\r\n                                />\r\n                            );\r\n                        case \"Color4\":\r\n                            return (\r\n                                <Color4GradientComponent\r\n                                    value={gradient}\r\n                                    onChange={(newGradient: Color4Gradient) => {\r\n                                        item.data.gradient = newGradient.gradient;\r\n                                        item.data.color1 = newGradient.color1;\r\n                                        item.data.color2 = newGradient.color2;\r\n                                        props.onChange(newGradient);\r\n                                    }}\r\n                                />\r\n                            );\r\n                    }\r\n                }}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\nconst FactorGradientCast = GradientList as FunctionComponent<GradientListProps<FactorGradient> & { type: \"Factor\" }>;\r\nconst Color3GradientCast = GradientList as FunctionComponent<GradientListProps<Color3Gradient> & { type: \"Color3\" }>;\r\nconst Color4GradientCast = GradientList as FunctionComponent<GradientListProps<Color4Gradient> & { type: \"Color4\" }>;\r\n\r\nexport const FactorGradientList: FunctionComponent<GradientListProps<FactorGradient>> = (props) => <FactorGradientCast {...props} type=\"Factor\" />;\r\nexport const Color3GradientList: FunctionComponent<GradientListProps<Color3Gradient>> = (props) => <Color3GradientCast {...props} type=\"Color3\" />;\r\nexport const Color4GradientList: FunctionComponent<GradientListProps<Color4Gradient>> = (props) => <Color4GradientCast {...props} type=\"Color4\" />;\r\n"]}

package/fluent/hoc/inputPropertyLine.d.ts

@@ -1,5 +1,15 @@
 import type { PropertyLineProps } from "./propertyLine.js";
 import type { FunctionComponent } from "react";
 import type { InputProps } from "../primitives/input.js";
+/**
+ * Wraps a text input in a property line
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
 export declare const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps>;
-export declare const FloatInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps>;
+/**
+ * Wraps a number input in a property line
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
+export declare const NumberInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps>;

package/fluent/hoc/inputPropertyLine.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PropertyLine } from "./propertyLine.js";
-import { Input } from "../primitives/input.js";
+import { NumberInput, TextInput } from "../primitives/input.js";
 /**
- * Wraps an input in a property line
+ * Wraps a text 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;
+export const TextInputPropertyLine = (props) => (_jsx(PropertyLine, { ...props, children: _jsx(TextInput, { ...props }) }));
+/**
+ * Wraps a number input in a property line
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
+export const NumberInputPropertyLine = (props) => (_jsx(PropertyLine, { ...props, children: _jsx(NumberInput, { ...props }) }));
 //# sourceMappingURL=inputPropertyLine.js.map

package/fluent/hoc/inputPropertyLine.js.map

@@ -1 +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"]}
+{"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,WAAW,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAG7D;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAA8D,CAAC,KAAK,EAAE,EAAE,CAAC,CACvG,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,SAAS,OAAK,KAAK,GAAI,GACb,CAClB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAA8D,CAAC,KAAK,EAAE,EAAE,CAAC,CACzG,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,WAAW,OAAK,KAAK,GAAI,GACf,CAClB,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { NumberInput, TextInput } from \"../primitives/input\";\r\nimport type { InputProps } from \"../primitives/input\";\r\n\r\n/**\r\n * Wraps a text input in a property line\r\n * @param props - PropertyLineProps and InputProps\r\n * @returns property-line wrapped input component\r\n */\r\nexport const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps> = (props) => (\r\n    <PropertyLine {...props}>\r\n        <TextInput {...props} />\r\n    </PropertyLine>\r\n);\r\n\r\n/**\r\n * Wraps a number input in a property line\r\n * @param props - PropertyLineProps and InputProps\r\n * @returns property-line wrapped input component\r\n */\r\nexport const NumberInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps> = (props) => (\r\n    <PropertyLine {...props}>\r\n        <NumberInput {...props} />\r\n    </PropertyLine>\r\n);\r\n"]}

package/fluent/hoc/pane.d.ts

@@ -0,0 +1,7 @@
+import type { FluentIcon } from "@fluentui/react-icons";
+import type { FunctionComponent, PropsWithChildren } from "react";
+export type PaneProps = {
+    title: string;
+    icon?: FluentIcon;
+};
+export declare const Pane: FunctionComponent<PropsWithChildren<PaneProps>>;

package/fluent/hoc/pane.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Body1Strong, makeStyles, tokens } from "@fluentui/react-components";
+const useStyles = makeStyles({
+    rootDiv: {
+        flex: 1,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+    },
+    icon: {
+        width: tokens.fontSizeBase400,
+        height: tokens.fontSizeBase400,
+        verticalAlign: "middle",
+    },
+    header: {
+        height: tokens.fontSizeBase400,
+        fontSize: tokens.fontSizeBase400,
+        textAlign: "center",
+        verticalAlign: "middle",
+    },
+});
+export const Pane = (props) => {
+    const classes = useStyles();
+    return (_jsxs("div", { className: classes.rootDiv, children: [_jsxs("div", { className: classes.header, children: [props.icon ? (_jsx(props.icon, { className: classes.icon })) : (_jsx("img", { className: classes.icon, id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" })), _jsx(Body1Strong, { id: "title", children: props.title })] }), props.children] }));
+};
+//# sourceMappingURL=pane.js.map

package/fluent/hoc/pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pane.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/pane.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAI7E,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,OAAO,EAAE;QACL,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KAC1B;IACD,IAAI,EAAE;QACF,KAAK,EAAE,MAAM,CAAC,eAAe;QAC7B,MAAM,EAAE,MAAM,CAAC,eAAe;QAC9B,aAAa,EAAE,QAAQ;KAC1B;IACD,MAAM,EAAE;QACJ,MAAM,EAAE,MAAM,CAAC,eAAe;QAC9B,QAAQ,EAAE,MAAM,CAAC,eAAe;QAChC,SAAS,EAAE,QAAQ;QACnB,aAAa,EAAE,QAAQ;KAC1B;CACJ,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,IAAI,GAAoD,CAAC,KAAK,EAAE,EAAE;IAC3E,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,OAAO,CACH,eAAK,SAAS,EAAE,OAAO,CAAC,OAAO,aAC3B,eAAK,SAAS,EAAE,OAAO,CAAC,MAAM,aACzB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,KAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,GAAI,CAC1C,CAAC,CAAC,CAAC,CACA,cAAK,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,EAAC,MAAM,EAAC,GAAG,EAAC,oEAAoE,GAAG,CACtH,EACD,KAAC,WAAW,IAAC,EAAE,EAAC,OAAO,YAAE,KAAK,CAAC,KAAK,GAAe,IACjD,EACL,KAAK,CAAC,QAAQ,IACb,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Body1Strong, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\n\r\nconst useStyles = makeStyles({\r\n    rootDiv: {\r\n        flex: 1,\r\n        overflow: \"hidden\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    },\r\n    icon: {\r\n        width: tokens.fontSizeBase400,\r\n        height: tokens.fontSizeBase400,\r\n        verticalAlign: \"middle\",\r\n    },\r\n    header: {\r\n        height: tokens.fontSizeBase400,\r\n        fontSize: tokens.fontSizeBase400,\r\n        textAlign: \"center\",\r\n        verticalAlign: \"middle\",\r\n    },\r\n});\r\n\r\nexport type PaneProps = {\r\n    title: string;\r\n    icon?: FluentIcon;\r\n};\r\nexport const Pane: FunctionComponent<PropsWithChildren<PaneProps>> = (props) => {\r\n    const classes = useStyles();\r\n    return (\r\n        <div className={classes.rootDiv}>\r\n            <div className={classes.header}>\r\n                {props.icon ? (\r\n                    <props.icon className={classes.icon} />\r\n                ) : (\r\n                    <img className={classes.icon} id=\"logo\" src=\"https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png\" />\r\n                )}\r\n                <Body1Strong id=\"title\">{props.title}</Body1Strong>\r\n            </div>\r\n            {props.children}\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLine.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from "react";
+import type { FunctionComponent, HTMLProps, PropsWithChildren } from "react";
 export type PropertyLineProps = {
     /**
      * The name of the property to display in the property line.
@@ -21,9 +21,7 @@ export type PropertyLineProps = {
      */
     docLink?: string;
 };
-export declare const LineContainer: import("react").ForwardRefExoticComponent<{
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const LineContainer: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<HTMLProps<HTMLDivElement>>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export type BaseComponentProps<T> = {
     /**
      * The value of the property to be displayed and modified.

package/fluent/hoc/propertyLine.js

@@ -57,7 +57,7 @@ const usePropertyLineStyles = makeStyles({
 });
 export const LineContainer = forwardRef((props, ref) => {
     const classes = usePropertyLineStyles();
-    return (_jsx("div", { ref: ref, className: classes.container, children: props.children }));
+    return (_jsx("div", { ref: ref, className: classes.container, ...props, 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.

package/fluent/hoc/propertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"propertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { 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"]}
+{"version":3,"file":"propertyLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC3H,OAAO,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE/E,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,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,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,MAAM;QACjB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KAC3B;IACD,SAAS,EAAE;QACP,UAAU,EAAE,QAAQ;KACvB;IACD,YAAY,EAAE;QACV,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,UAAU;QAC1B,GAAG,EAAE,MAAM,CAAC,kBAAkB;KACjC;IACD,MAAM,EAAE;QACJ,UAAU,EAAE,MAAM,CAAC,oBAAoB;QACvC,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,CAAC;KACd;IACD,2BAA2B,EAAE;QACzB,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,UAAU;QAC1B,UAAU,EAAE,QAAQ;KACvB;IACD,YAAY,EAAE;QACV,MAAM,EAAE,CAAC;KACZ;IACD,eAAe,EAAE,EAAE;CACtB,CAAC,CAAC;AA0BH,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CAA+D,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACjH,MAAM,OAAO,GAAG,qBAAqB,EAAE,CAAC;IACxC,OAAO,CACH,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,KAAM,KAAK,YACjD,KAAK,CAAC,QAAQ,GACb,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AAqBH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CAAuD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxG,MAAM,OAAO,GAAG,qBAAqB,EAAE,CAAC;IACxC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3D,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEhD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,OAAO,YAAG,KAAK,CAAC,WAAW,IAAI,MAAM,GAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAE/I,OAAO,CACH,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACnB,eAAK,SAAS,EAAE,OAAO,CAAC,IAAI,aACxB,KAAC,SAAS,IAAC,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,WAAW,YAClD,KAAC,WAAW,IAAC,SAAS,EAAE,OAAO,CAAC,SAAS,YAAG,KAAK,GAAe,GACxD,EACZ,eAAK,SAAS,EAAE,OAAO,CAAC,YAAY,aAChC,cAAK,SAAS,EAAE,OAAO,CAAC,2BAA2B,YAAG,QAAQ,GAAO,EAEpE,eAAe,IAAI,CAChB,KAAC,YAAY,IACT,UAAU,EAAC,aAAa,EACxB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,EACnD,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,OAAO,EAAE,QAAQ,EACjB,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,WAAW,KAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAC,mBAAmB,GAAG,CAC5J,IACC,IACJ,EACN,KAAC,QAAQ,IAAC,OAAO,EAAE,QAAQ,IAAI,CAAC,CAAC,eAAe,YAC5C,cAAK,SAAS,EAAE,OAAO,CAAC,eAAe,YAAG,eAAe,GAAO,GACzD,IACC,CACnB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,uBAAuB,GAAmE,CAAC,KAAK,EAAE,EAAE;IAC7G,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,GACjB,CAClB,CAAC;AACN,CAAC,CAAC","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, HTMLProps, 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<HTMLProps<HTMLDivElement>>>((props, ref) => {\r\n    const classes = usePropertyLineStyles();\r\n    return (\r\n        <div ref={ref} className={classes.container} {...props}>\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/readonlyBooleanLine.d.ts

@@ -0,0 +1,10 @@
+import type { FunctionComponent } from "react";
+import type { PropertyLineProps } from "./propertyLine.js";
+/**
+ * Displays an icon indicating enabled (green check) or disabled (red cross) state
+ * @param props - The properties for the PropertyLine, including the boolean value to display.
+ * @returns A PropertyLine component with a PresenceBadge indicating the boolean state.
+ */
+export declare const ReadonlyBooleanLine: FunctionComponent<PropertyLineProps & {
+    value: boolean;
+}>;

package/fluent/hoc/readonlyBooleanLine.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PresenceBadge } from "@fluentui/react-components";
+import { PropertyLine } from "./propertyLine.js";
+/**
+ * Displays an icon indicating enabled (green check) or disabled (red cross) state
+ * @param props - The properties for the PropertyLine, including the boolean value to display.
+ * @returns A PropertyLine component with a PresenceBadge indicating the boolean state.
+ */
+export const ReadonlyBooleanLine = (props) => (_jsx(PropertyLine, { label: props.label, children: _jsx(PresenceBadge, { status: props.value ? "available" : "do-not-disturb", outOfOffice: true }) }));
+//# sourceMappingURL=readonlyBooleanLine.js.map

package/fluent/hoc/readonlyBooleanLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readonlyBooleanLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/readonlyBooleanLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAA8D,CAAC,KAAK,EAAE,EAAE,CAAC,CACrG,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,YAC5B,KAAC,aAAa,IAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,EAAE,WAAW,EAAE,IAAI,GAAI,GAC/E,CAClB,CAAC","sourcesContent":["import { PresenceBadge } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\n\r\n/**\r\n * Displays an icon indicating enabled (green check) or disabled (red cross) state\r\n * @param props - The properties for the PropertyLine, including the boolean value to display.\r\n * @returns A PropertyLine component with a PresenceBadge indicating the boolean state.\r\n */\r\nexport const ReadonlyBooleanLine: FunctionComponent<PropertyLineProps & { value: boolean }> = (props) => (\r\n    <PropertyLine label={props.label}>\r\n        <PresenceBadge status={props.value ? \"available\" : \"do-not-disturb\"} outOfOffice={true} />\r\n    </PropertyLine>\r\n);\r\n"]}

package/fluent/primitives/accordion.js

@@ -9,6 +9,7 @@ const useStyles = makeStyles({
         display: "flex",
         flexDirection: "column",
         rowGap: tokens.spacingVerticalM,
+        height: "100%",
     },
     panelDiv: {
         display: "flex",

package/fluent/primitives/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/accordion.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,SAAS,IAAI,eAAe,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEzJ,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,SAAS,EAAE;QACP,SAAS,EAAE,QAAQ;QACnB,SAAS,EAAE,MAAM;QACjB,aAAa,EAAE,MAAM,CAAC,gBAAgB;QACtC,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,MAAM,CAAC,gBAAgB;KAClC;IACD,QAAQ,EAAE;QACN,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,QAAQ,EAAE,QAAQ;KACrB;CACJ,CAAC,CAAC;AAOH,MAAM,CAAC,MAAM,gBAAgB,GAAgE,CAAC,KAAK,EAAE,EAAE;IACnG,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,OAAO,cAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,YAAG,KAAK,CAAC,QAAQ,GAAO,CAAC;AACpE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAyC,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACpC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO,CACH,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAC7B,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;gBACxB,MAAM,UAAU,GAAG,KAAK,CAAC,KAAuC,CAAC;gBACjE,IAAI,UAAU,CAAC,KAAK,EAAE,CAAC;oBACnB,OAAO;wBACH,KAAK,EAAE,UAAU,CAAC,KAAK;wBACvB,iBAAiB,EAAE,UAAU,CAAC,iBAAiB;wBAC/C,OAAO,EAAE,KAAK;qBACjB,CAAC;gBACN,CAAC;YACL,CAAC;YACD,OAAO,IAAI,CAAC;QAChB,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAC5B,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACH,KAAC,eAAe,IACZ,SAAS,EAAE,OAAO,CAAC,SAAS,EAC5B,WAAW,QACX,QAAQ,QACR,gBAAgB,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KACnG,IAAI,YAEP,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACzB,OAAO,CACH,MAAC,aAAa,IAAmB,KAAK,EAAE,KAAK,CAAC,KAAK,aAC/C,KAAC,eAAe,IAAC,kBAAkB,EAAC,KAAK,YACrC,KAAC,SAAS,cAAE,KAAK,CAAC,KAAK,GAAa,GACtB,EAClB,KAAC,cAAc,cACX,cAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,YAAG,KAAK,CAAC,OAAO,GAAO,GAC1C,KAND,KAAK,CAAC,KAAK,CAOf,CACnB,CAAC;QACN,CAAC,CAAC,GACY,CACrB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent, PropsWithChildren } from \"react\";\r\n\r\nimport { Children, isValidElement, useMemo } from \"react\";\r\n\r\nimport { Accordion as FluentAccordion, AccordionItem, AccordionHeader, AccordionPanel, Subtitle1, makeStyles, tokens } from \"@fluentui/react-components\";\r\n\r\nconst useStyles = makeStyles({\r\n    accordion: {\r\n        overflowX: \"hidden\",\r\n        overflowY: \"auto\",\r\n        paddingBottom: tokens.spacingVerticalM,\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        rowGap: tokens.spacingVerticalM,\r\n    },\r\n    panelDiv: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        overflow: \"hidden\",\r\n    },\r\n});\r\n\r\nexport type AccordionSectionProps = {\r\n    title: string;\r\n    collapseByDefault?: boolean;\r\n};\r\n\r\nexport const AccordionSection: FunctionComponent<PropsWithChildren<AccordionSectionProps>> = (props) => {\r\n    const classes = useStyles();\r\n\r\n    return <div className={classes.panelDiv}>{props.children}</div>;\r\n};\r\n\r\nexport const Accordion: FunctionComponent<PropsWithChildren> = (props) => {\r\n    const classes = useStyles();\r\n\r\n    const { children, ...rest } = props;\r\n    const validChildren = useMemo(() => {\r\n        return (\r\n            Children.map(children, (child) => {\r\n                if (isValidElement(child)) {\r\n                    const childProps = child.props as Partial<AccordionSectionProps>;\r\n                    if (childProps.title) {\r\n                        return {\r\n                            title: childProps.title,\r\n                            collapseByDefault: childProps.collapseByDefault,\r\n                            content: child,\r\n                        };\r\n                    }\r\n                }\r\n                return null;\r\n            })?.filter(Boolean) ?? []\r\n        );\r\n    }, [children]);\r\n\r\n    return (\r\n        <FluentAccordion\r\n            className={classes.accordion}\r\n            collapsible\r\n            multiple\r\n            defaultOpenItems={validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title)}\r\n            {...rest}\r\n        >\r\n            {validChildren.map((child) => {\r\n                return (\r\n                    <AccordionItem key={child.title} value={child.title}>\r\n                        <AccordionHeader expandIconPosition=\"end\">\r\n                            <Subtitle1>{child.title}</Subtitle1>\r\n                        </AccordionHeader>\r\n                        <AccordionPanel>\r\n                            <div className={classes.panelDiv}>{child.content}</div>\r\n                        </AccordionPanel>\r\n                    </AccordionItem>\r\n                );\r\n            })}\r\n        </FluentAccordion>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/accordion.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,SAAS,IAAI,eAAe,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEzJ,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,SAAS,EAAE;QACP,SAAS,EAAE,QAAQ;QACnB,SAAS,EAAE,MAAM;QACjB,aAAa,EAAE,MAAM,CAAC,gBAAgB;QACtC,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,MAAM,CAAC,gBAAgB;QAC/B,MAAM,EAAE,MAAM;KACjB;IACD,QAAQ,EAAE;QACN,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,QAAQ,EAAE,QAAQ;KACrB;CACJ,CAAC,CAAC;AAOH,MAAM,CAAC,MAAM,gBAAgB,GAAgE,CAAC,KAAK,EAAE,EAAE;IACnG,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,OAAO,cAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,YAAG,KAAK,CAAC,QAAQ,GAAO,CAAC;AACpE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAyC,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACpC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO,CACH,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAC7B,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;gBACxB,MAAM,UAAU,GAAG,KAAK,CAAC,KAAuC,CAAC;gBACjE,IAAI,UAAU,CAAC,KAAK,EAAE,CAAC;oBACnB,OAAO;wBACH,KAAK,EAAE,UAAU,CAAC,KAAK;wBACvB,iBAAiB,EAAE,UAAU,CAAC,iBAAiB;wBAC/C,OAAO,EAAE,KAAK;qBACjB,CAAC;gBACN,CAAC;YACL,CAAC;YACD,OAAO,IAAI,CAAC;QAChB,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAC5B,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACH,KAAC,eAAe,IACZ,SAAS,EAAE,OAAO,CAAC,SAAS,EAC5B,WAAW,QACX,QAAQ,QACR,gBAAgB,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KACnG,IAAI,YAEP,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACzB,OAAO,CACH,MAAC,aAAa,IAAmB,KAAK,EAAE,KAAK,CAAC,KAAK,aAC/C,KAAC,eAAe,IAAC,kBAAkB,EAAC,KAAK,YACrC,KAAC,SAAS,cAAE,KAAK,CAAC,KAAK,GAAa,GACtB,EAClB,KAAC,cAAc,cACX,cAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,YAAG,KAAK,CAAC,OAAO,GAAO,GAC1C,KAND,KAAK,CAAC,KAAK,CAOf,CACnB,CAAC;QACN,CAAC,CAAC,GACY,CACrB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent, PropsWithChildren } from \"react\";\r\n\r\nimport { Children, isValidElement, useMemo } from \"react\";\r\n\r\nimport { Accordion as FluentAccordion, AccordionItem, AccordionHeader, AccordionPanel, Subtitle1, makeStyles, tokens } from \"@fluentui/react-components\";\r\n\r\nconst useStyles = makeStyles({\r\n    accordion: {\r\n        overflowX: \"hidden\",\r\n        overflowY: \"auto\",\r\n        paddingBottom: tokens.spacingVerticalM,\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        rowGap: tokens.spacingVerticalM,\r\n        height: \"100%\",\r\n    },\r\n    panelDiv: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        overflow: \"hidden\",\r\n    },\r\n});\r\n\r\nexport type AccordionSectionProps = {\r\n    title: string;\r\n    collapseByDefault?: boolean;\r\n};\r\n\r\nexport const AccordionSection: FunctionComponent<PropsWithChildren<AccordionSectionProps>> = (props) => {\r\n    const classes = useStyles();\r\n\r\n    return <div className={classes.panelDiv}>{props.children}</div>;\r\n};\r\n\r\nexport const Accordion: FunctionComponent<PropsWithChildren> = (props) => {\r\n    const classes = useStyles();\r\n\r\n    const { children, ...rest } = props;\r\n    const validChildren = useMemo(() => {\r\n        return (\r\n            Children.map(children, (child) => {\r\n                if (isValidElement(child)) {\r\n                    const childProps = child.props as Partial<AccordionSectionProps>;\r\n                    if (childProps.title) {\r\n                        return {\r\n                            title: childProps.title,\r\n                            collapseByDefault: childProps.collapseByDefault,\r\n                            content: child,\r\n                        };\r\n                    }\r\n                }\r\n                return null;\r\n            })?.filter(Boolean) ?? []\r\n        );\r\n    }, [children]);\r\n\r\n    return (\r\n        <FluentAccordion\r\n            className={classes.accordion}\r\n            collapsible\r\n            multiple\r\n            defaultOpenItems={validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title)}\r\n            {...rest}\r\n        >\r\n            {validChildren.map((child) => {\r\n                return (\r\n                    <AccordionItem key={child.title} value={child.title}>\r\n                        <AccordionHeader expandIconPosition=\"end\">\r\n                            <Subtitle1>{child.title}</Subtitle1>\r\n                        </AccordionHeader>\r\n                        <AccordionPanel>\r\n                            <div className={classes.panelDiv}>{child.content}</div>\r\n                        </AccordionPanel>\r\n                    </AccordionItem>\r\n                );\r\n            })}\r\n        </FluentAccordion>\r\n    );\r\n};\r\n"]}