@babylonjs/shared-ui-components 8.15.0 → 8.16.0

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/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/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":"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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, 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"]}

package/fluent/primitives/colorPicker.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /* eslint-disable jsdoc/require-returns */
 /* eslint-disable @typescript-eslint/naming-convention */
 import { useState, useEffect, useCallback } from "react";
-import { Input, Label, SpinButton, useId, ColorPicker, ColorSlider, ColorArea, AlphaSlider, InfoLabel, Link, makeStyles, Popover, PopoverSurface, PopoverTrigger, tokens, Body1Strong, } from "@fluentui/react-components";
+import { Input, Label, SpinButton, useId, ColorPicker, ColorSlider, ColorArea, AlphaSlider, InfoLabel, Link, makeStyles, Popover, PopoverSurface, PopoverTrigger, tokens, Body1Strong, ColorSwatch, } from "@fluentui/react-components";
 import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
 const useColorPickerStyles = makeStyles({
     colorPickerContainer: {
@@ -12,16 +12,6 @@ const useColorPickerStyles = makeStyles({
         gap: tokens.spacingVerticalMNudge, // 10px
         overflow: "visible",
     },
-    triggerColor: {
-        width: "50px",
-        height: tokens.lineHeightBase100,
-        borderRadius: tokens.borderRadiusMedium,
-        cursor: "pointer", // Show pointer on hover
-        border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,
-        "@media (forced-colors: active)": {
-            forcedColorAdjust: "none", // ensures element maintains color in high contrast mode
-        },
-    },
     previewColor: {
         width: "50px",
         height: "50px",
@@ -58,24 +48,25 @@ export const ColorPickerPopup = (props) => {
     const classes = useColorPickerStyles();
     const [color, setColor] = useState(props.value);
     const [popoverOpen, setPopoverOpen] = useState(false);
-    useEffect(() => {
-        props.onChange(color); // Ensures the parent is notified when color changes from within colorPicker
-    }, [color]);
     useEffect(() => {
         setColor(props.value); // Ensures the trigger color updates when props.value changes
     }, [props.value]);
-    const handleChange = (_, data) => {
+    const handleColorPickerChange = (_, data) => {
         let color = Color3.FromHSV(data.color.h, data.color.s, data.color.v);
         if (props.value instanceof Color4) {
             color = Color4.FromColor3(color, data.color.a ?? 1);
         }
-        setColor(color);
+        handleChange(color);
+    };
+    const handleChange = (newColor) => {
+        setColor(newColor);
+        props.onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker
     };
     return (_jsxs(Popover, { positioning: {
             align: "start",
             overflowBoundary: document.body,
             autoSize: true,
-        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsx("div", { className: classes.triggerColor, style: { backgroundColor: color.toHexString() } }) }), _jsx(PopoverSurface, { children: _jsxs("div", { className: classes.colorPickerContainer, children: [_jsxs(ColorPicker, { color: rgbaToHsv(color), onColorChange: handleChange, children: [_jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), _jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && _jsx(AlphaSlider, { "aria-label": "Alpha" })] }), _jsxs("div", { className: classes.container, children: [_jsxs("div", { className: classes.row, children: [_jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), _jsx(InputHexField, { label: "Gamma Hex", value: color, isLinearMode: props.isLinearMode, onChange: setColor }), _jsx(InputHexField, { label: "Linear Hex", linearHex: true, isLinearMode: props.isLinearMode, value: color, onChange: setColor })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputRgbField, { label: "Red", color: color, rgbKey: "r", onChange: setColor }), _jsx(InputRgbField, { label: "Green", color: color, rgbKey: "g", onChange: setColor }), _jsx(InputRgbField, { label: "Blue", color: color, rgbKey: "b", onChange: setColor }), _jsx(InputAlphaField, { color: color, onChange: setColor })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputHsvField, { label: "Hue", color: color, hsvKey: "h", max: 360, onChange: setColor }), _jsx(InputHsvField, { label: "Saturation", color: color, hsvKey: "s", max: 100, scale: 100, onChange: setColor }), _jsx(InputHsvField, { label: "Value", color: color, hsvKey: "v", max: 100, scale: 100, onChange: setColor })] })] })] }) })] }));
+        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsx(ColorSwatch, { size: "small", color: color.toHexString(), value: color.toHexString().slice(1) }) }), _jsx(PopoverSurface, { children: _jsxs("div", { className: classes.colorPickerContainer, children: [_jsxs(ColorPicker, { color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [_jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), _jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && _jsx(AlphaSlider, { "aria-label": "Alpha" })] }), _jsxs("div", { className: classes.container, children: [_jsxs("div", { className: classes.row, children: [_jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), _jsx(InputHexField, { label: "Gamma Hex", value: color, isLinearMode: props.isLinearMode, onChange: handleChange }), _jsx(InputHexField, { label: "Linear Hex", linearHex: true, isLinearMode: props.isLinearMode, value: color, onChange: handleChange })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputRgbField, { label: "Red", color: color, rgbKey: "r", onChange: handleChange }), _jsx(InputRgbField, { label: "Green", color: color, rgbKey: "g", onChange: handleChange }), _jsx(InputRgbField, { label: "Blue", color: color, rgbKey: "b", onChange: handleChange }), _jsx(InputAlphaField, { color: color, onChange: handleChange })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputHsvField, { label: "Hue", color: color, hsvKey: "h", max: 360, onChange: handleChange }), _jsx(InputHsvField, { label: "Saturation", color: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), _jsx(InputHsvField, { label: "Value", color: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] })] })] }) })] }));
 };
 /**
  * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space

package/fluent/primitives/colorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/colorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsdoc/require-returns */\r\n/* eslint-disable @typescript-eslint/naming-convention */\r\nimport { useState, useEffect, useCallback } from \"react\";\r\nimport type { FunctionComponent, ChangeEvent } from \"react\";\r\nimport {\r\n    Input,\r\n    Label,\r\n    SpinButton,\r\n    useId,\r\n    ColorPicker,\r\n    ColorSlider,\r\n    ColorArea,\r\n    AlphaSlider,\r\n    InfoLabel,\r\n    Link,\r\n    makeStyles,\r\n    Popover,\r\n    PopoverSurface,\r\n    PopoverTrigger,\r\n    tokens,\r\n    Body1Strong,\r\n} from \"@fluentui/react-components\";\r\nimport type { SpinButtonChangeEvent, SpinButtonOnChangeData, ColorPickerProps as FluentColorPickerProps, InputOnChangeData } from \"@fluentui/react-components\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useColorPickerStyles = makeStyles({\r\n    colorPickerContainer: {\r\n        width: \"325px\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalMNudge, // 10px\r\n        overflow: \"visible\",\r\n    },\r\n    triggerColor: {\r\n        width: \"50px\",\r\n        height: tokens.lineHeightBase100,\r\n        borderRadius: tokens.borderRadiusMedium,\r\n        cursor: \"pointer\", // Show pointer on hover\r\n        border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,\r\n        \"@media (forced-colors: active)\": {\r\n            forcedColorAdjust: \"none\", // ensures element maintains color in high contrast mode\r\n        },\r\n    },\r\n    previewColor: {\r\n        width: \"50px\",\r\n        height: \"50px\",\r\n        borderRadius: tokens.borderRadiusMedium,\r\n        border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,\r\n        \"@media (forced-colors: active)\": {\r\n            forcedColorAdjust: \"none\", // ensures elmement maintains color in high constrast mode\r\n        },\r\n    },\r\n    row: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        gap: tokens.spacingVerticalM, // 12px\r\n        alignItems: \"center\",\r\n    },\r\n    colorFieldWrapper: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalSNudge, // 6px\r\n    },\r\n    input: {\r\n        width: \"80px\",\r\n    },\r\n    spinButton: {\r\n        minWidth: \"60px\",\r\n    },\r\n    container: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalL, // 16px\r\n    },\r\n});\r\n\r\nexport type ColorPickerProps<C extends Color3 | Color4> = {\r\n    isLinearMode?: boolean;\r\n} & BaseComponentProps<C>;\r\n\r\nexport const ColorPickerPopup: FunctionComponent<ColorPickerProps<Color3 | Color4>> = (props) => {\r\n    const classes = useColorPickerStyles();\r\n    const [color, setColor] = useState(props.value);\r\n\r\n    const [popoverOpen, setPopoverOpen] = useState(false);\r\n\r\n    useEffect(() => {\r\n        props.onChange(color); // Ensures the parent is notified when color changes from within colorPicker\r\n    }, [color]);\r\n\r\n    useEffect(() => {\r\n        setColor(props.value); // Ensures the trigger color updates when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleChange: FluentColorPickerProps[\"onColorChange\"] = (_, data) => {\r\n        let color: Color3 | Color4 = Color3.FromHSV(data.color.h, data.color.s, data.color.v);\r\n        if (props.value instanceof Color4) {\r\n            color = Color4.FromColor3(color, data.color.a ?? 1);\r\n        }\r\n        setColor(color);\r\n    };\r\n\r\n    return (\r\n        <Popover\r\n            positioning={{\r\n                align: \"start\",\r\n                overflowBoundary: document.body,\r\n                autoSize: true,\r\n            }}\r\n            open={popoverOpen}\r\n            trapFocus\r\n            onOpenChange={(_, data) => setPopoverOpen(data.open)}\r\n        >\r\n            <PopoverTrigger disableButtonEnhancement>\r\n                <div className={classes.triggerColor} style={{ backgroundColor: color.toHexString() }} />\r\n            </PopoverTrigger>\r\n\r\n            <PopoverSurface>\r\n                <div className={classes.colorPickerContainer}>\r\n                    <ColorPicker color={rgbaToHsv(color)} onColorChange={handleChange}>\r\n                        <ColorArea inputX={{ \"aria-label\": \"Saturation\" }} inputY={{ \"aria-label\": \"Brightness\" }} />\r\n                        <ColorSlider aria-label=\"Hue\" />\r\n                        {color instanceof Color4 && <AlphaSlider aria-label=\"Alpha\" />}\r\n                    </ColorPicker>\r\n                    <div className={classes.container}>\r\n                        {/* Top Row: Preview, Gamma Hex, Linear Hex */}\r\n                        <div className={classes.row}>\r\n                            <div className={classes.previewColor} style={{ backgroundColor: color.toHexString() }} />\r\n                            <InputHexField label=\"Gamma Hex\" value={color} isLinearMode={props.isLinearMode} onChange={setColor} />\r\n                            <InputHexField label=\"Linear Hex\" linearHex={true} isLinearMode={props.isLinearMode} value={color} onChange={setColor} />\r\n                        </div>\r\n\r\n                        {/* Middle Row: Red, Green, Blue, Alpha */}\r\n                        <div className={classes.row}>\r\n                            <InputRgbField label=\"Red\" color={color} rgbKey=\"r\" onChange={setColor} />\r\n                            <InputRgbField label=\"Green\" color={color} rgbKey=\"g\" onChange={setColor} />\r\n                            <InputRgbField label=\"Blue\" color={color} rgbKey=\"b\" onChange={setColor} />\r\n                            <InputAlphaField color={color} onChange={setColor} />\r\n                        </div>\r\n\r\n                        {/* Bottom Row: Hue, Saturation, Value */}\r\n                        <div className={classes.row}>\r\n                            <InputHsvField label=\"Hue\" color={color} hsvKey=\"h\" max={360} onChange={setColor} />\r\n                            <InputHsvField label=\"Saturation\" color={color} hsvKey=\"s\" max={100} scale={100} onChange={setColor} />\r\n                            <InputHsvField label=\"Value\" color={color} hsvKey=\"v\" max={100} scale={100} onChange={setColor} />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </PopoverSurface>\r\n        </Popover>\r\n    );\r\n};\r\n\r\ntype HsvKey = \"h\" | \"s\" | \"v\";\r\nexport type InputHexProps = BaseComponentProps<Color3 | Color4> & {\r\n    label?: string;\r\n    linearHex?: boolean;\r\n    isLinearMode?: boolean;\r\n};\r\n/**\r\n * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space\r\n * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange\r\n *\r\n * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space\r\n * @param props - The properties for the InputHexField component.\r\n * @returns\r\n */\r\nexport const InputHexField: FunctionComponent<InputHexProps> = (props) => {\r\n    const id = useId(\"hex-input\");\r\n    const styles = useColorPickerStyles();\r\n    const { label, value, onChange, linearHex, isLinearMode } = props;\r\n\r\n    const handleChange = (e: ChangeEvent<HTMLInputElement>, _: InputOnChangeData) => {\r\n        // If linearHint (aka PBR material, ensure the other values are displayed in gamma even if linear hex changes)\r\n        const value = e.target.value;\r\n        if (value != \"\" && /^[0-9A-Fa-f]+$/g.test(value) == false) {\r\n            return;\r\n        }\r\n        onChange(Color3.FromHexString(value).toGammaSpace());\r\n    };\r\n    return (\r\n        <div className={styles.colorFieldWrapper}>\r\n            {props.linearHex ? (\r\n                <InfoLabel\r\n                    htmlFor={id}\r\n                    info={\r\n                        !isLinearMode ? (\r\n                            <> This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view </>\r\n                        ) : (\r\n                            <>\r\n                                This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space\r\n                                before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma\r\n                                space so that the color chosen here will match the color seen in your entity.\r\n                                <br />\r\n                                If you want to copy/paste the HEX into your code, you can either use\r\n                                <Body1Strong>Color3.FromHexString(LINEAR_HEX)</Body1Strong>\r\n                                <br />\r\n                                or\r\n                                <br />\r\n                                <Body1Strong>Color3.FromHexString(GAMMA_HEX).toLinearSpace()</Body1Strong>\r\n                                <br />\r\n                                <br />\r\n                                <Link href=\"https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/\"> Read more in our docs! </Link>\r\n                            </>\r\n                        )\r\n                    }\r\n                >\r\n                    {label}\r\n                </InfoLabel>\r\n            ) : (\r\n                <Label htmlFor={id}>{label}</Label>\r\n            )}\r\n            <Input\r\n                disabled={linearHex ? !isLinearMode : false}\r\n                className={styles.input}\r\n                value={linearHex ? value.toLinearSpace().toHexString() : value.toHexString()}\r\n                id={id}\r\n                onChange={handleChange}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype RgbKey = \"r\" | \"g\" | \"b\";\r\ntype InputRgbFieldProps = {\r\n    color: Color3 | Color4;\r\n    label: string;\r\n    rgbKey: RgbKey;\r\n    onChange: (color: Color3 | Color4) => void;\r\n};\r\n\r\nconst InputRgbField: FunctionComponent<InputRgbFieldProps> = (props) => {\r\n    const { color, onChange, label, rgbKey } = props;\r\n    const id = useId(`${label.toLowerCase()}-input`);\r\n    const classes = useColorPickerStyles();\r\n\r\n    const handleChange = useCallback(\r\n        (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            const val = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n            if (val === null || Number.isNaN(val) || !NUMBER_REGEX.test(val.toString())) {\r\n                return;\r\n            }\r\n\r\n            const newColor = color.clone();\r\n            newColor[rgbKey] = val / 255.0; // Convert to 0-1 range\r\n            onChange(newColor);\r\n        },\r\n        [color]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <Label htmlFor={id}>{label}</Label>\r\n            <SpinButton className={classes.spinButton} min={0} max={255} value={color[rgbKey] * 255.0} step={1} id={id} onChange={handleChange} name={rgbKey} />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype InputHsvFieldProps = {\r\n    color: Color3 | Color4;\r\n    label: string;\r\n    hsvKey: HsvKey;\r\n    onChange: (color: Color3 | Color4) => void;\r\n    max: number;\r\n    scale?: number;\r\n};\r\n\r\n/**\r\n * In the HSV (Hue, Saturation, Value) color model, Hue (H) ranges from 0 to 360 degrees, representing the color's position on the color wheel.\r\n * Saturation (S) ranges from 0 to 100%, indicating the intensity or purity of the color, with 0 being shades of gray and 100 being a fully saturated color.\r\n * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.\r\n * @param props - The properties for the InputHsvField component.\r\n */\r\nexport const InputHsvField: FunctionComponent<InputHsvFieldProps> = (props) => {\r\n    const { color, label, hsvKey, max, scale = 1 } = props;\r\n\r\n    const id = useId(`${label.toLowerCase()}-input`);\r\n    const classes = useColorPickerStyles();\r\n\r\n    const handleChange = useCallback(\r\n        (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            const val = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n            if (val === null || Number.isNaN(val) || !NUMBER_REGEX.test(val.toString())) {\r\n                return;\r\n            }\r\n\r\n            // Convert current color to HSV, update the new hsv value, then call onChange prop\r\n            const hsv = rgbaToHsv(color);\r\n            hsv[hsvKey] = val / scale;\r\n            let newColor: Color3 | Color4 = Color3.FromHSV(hsv.h, hsv.s, hsv.v);\r\n            if (color instanceof Color4) {\r\n                newColor = Color4.FromColor3(newColor, color.a ?? 1);\r\n            }\r\n            props.onChange(newColor);\r\n        },\r\n        [color]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <Label htmlFor={id}>{label}</Label>\r\n            <SpinButton className={classes.spinButton} min={0} max={max} value={rgbaToHsv(color)[hsvKey] * scale} step={1} id={id} onChange={handleChange} name={hsvKey} />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype InputAlphaProps = {\r\n    color: Color3 | Color4;\r\n    onChange: (color: Color4) => void;\r\n};\r\n\r\n/**\r\n * Displays the alpha value of a color, either in the disabled state (if color is Color3) or as a spin button (if color is Color4).\r\n * @param props\r\n * @returns\r\n */\r\nconst InputAlphaField: FunctionComponent<InputAlphaProps> = (props) => {\r\n    const classes = useColorPickerStyles();\r\n    const id = useId(\"alpha-input\");\r\n    const { color } = props;\r\n\r\n    const onChange = (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n        const value = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n        if (Number.isNaN(value) || value < 0 || value > 1) {\r\n            return;\r\n        }\r\n\r\n        if (color instanceof Color4) {\r\n            const newColor = color.clone();\r\n            newColor.a = value;\r\n            return newColor;\r\n        } else {\r\n            return Color4.FromColor3(color, value);\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <div className={classes.row}>\r\n                <Label htmlFor={id}>Alpha</Label>\r\n                {color instanceof Color3 && (\r\n                    <InfoLabel\r\n                        htmlFor={id}\r\n                        info={\r\n                            <>\r\n                                Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the material's\r\n                                alpha property directly, either in code via material.alpha OR via inspector's transparency section.\r\n                            </>\r\n                        }\r\n                    ></InfoLabel>\r\n                )}\r\n            </div>\r\n            <SpinButton\r\n                disabled={color instanceof Color3}\r\n                min={0}\r\n                max={1}\r\n                className={classes.spinButton}\r\n                value={color instanceof Color3 ? 1 : color.a}\r\n                step={0.01}\r\n                onChange={onChange}\r\n                id={id}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\nconst NUMBER_REGEX = /^\\d+$/;\r\n\r\nfunction rgbaToHsv(color: { r: number; g: number; b: number; a?: number }): { h: number; s: number; v: number; a?: number } {\r\n    const c = new Color3(color.r, color.g, color.b);\r\n    const hsv = c.toHSV();\r\n    return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };\r\n}\r\n"]}
+{"version":3,"file":"colorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/colorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsdoc/require-returns */\r\n/* eslint-disable @typescript-eslint/naming-convention */\r\nimport { useState, useEffect, useCallback } from \"react\";\r\nimport type { FunctionComponent, ChangeEvent } from \"react\";\r\nimport {\r\n    Input,\r\n    Label,\r\n    SpinButton,\r\n    useId,\r\n    ColorPicker,\r\n    ColorSlider,\r\n    ColorArea,\r\n    AlphaSlider,\r\n    InfoLabel,\r\n    Link,\r\n    makeStyles,\r\n    Popover,\r\n    PopoverSurface,\r\n    PopoverTrigger,\r\n    tokens,\r\n    Body1Strong,\r\n    ColorSwatch,\r\n} from \"@fluentui/react-components\";\r\nimport type { SpinButtonChangeEvent, SpinButtonOnChangeData, ColorPickerProps as FluentColorPickerProps, InputOnChangeData } from \"@fluentui/react-components\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useColorPickerStyles = makeStyles({\r\n    colorPickerContainer: {\r\n        width: \"325px\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalMNudge, // 10px\r\n        overflow: \"visible\",\r\n    },\r\n    previewColor: {\r\n        width: \"50px\",\r\n        height: \"50px\",\r\n        borderRadius: tokens.borderRadiusMedium,\r\n        border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,\r\n        \"@media (forced-colors: active)\": {\r\n            forcedColorAdjust: \"none\", // ensures elmement maintains color in high constrast mode\r\n        },\r\n    },\r\n    row: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        gap: tokens.spacingVerticalM, // 12px\r\n        alignItems: \"center\",\r\n    },\r\n    colorFieldWrapper: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalSNudge, // 6px\r\n    },\r\n    input: {\r\n        width: \"80px\",\r\n    },\r\n    spinButton: {\r\n        minWidth: \"60px\",\r\n    },\r\n    container: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalL, // 16px\r\n    },\r\n});\r\n\r\nexport type ColorPickerProps<C extends Color3 | Color4> = {\r\n    isLinearMode?: boolean;\r\n} & BaseComponentProps<C>;\r\n\r\nexport const ColorPickerPopup: FunctionComponent<ColorPickerProps<Color3 | Color4>> = (props) => {\r\n    const classes = useColorPickerStyles();\r\n    const [color, setColor] = useState(props.value);\r\n\r\n    const [popoverOpen, setPopoverOpen] = useState(false);\r\n\r\n    useEffect(() => {\r\n        setColor(props.value); // Ensures the trigger color updates when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleColorPickerChange: FluentColorPickerProps[\"onColorChange\"] = (_, data) => {\r\n        let color: Color3 | Color4 = Color3.FromHSV(data.color.h, data.color.s, data.color.v);\r\n        if (props.value instanceof Color4) {\r\n            color = Color4.FromColor3(color, data.color.a ?? 1);\r\n        }\r\n        handleChange(color);\r\n    };\r\n\r\n    const handleChange = (newColor: Color3 | Color4) => {\r\n        setColor(newColor);\r\n        props.onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker\r\n    };\r\n\r\n    return (\r\n        <Popover\r\n            positioning={{\r\n                align: \"start\",\r\n                overflowBoundary: document.body,\r\n                autoSize: true,\r\n            }}\r\n            open={popoverOpen}\r\n            trapFocus\r\n            onOpenChange={(_, data) => setPopoverOpen(data.open)}\r\n        >\r\n            <PopoverTrigger disableButtonEnhancement>\r\n                <ColorSwatch size=\"small\" color={color.toHexString()} value={color.toHexString().slice(1)} />\r\n            </PopoverTrigger>\r\n\r\n            <PopoverSurface>\r\n                <div className={classes.colorPickerContainer}>\r\n                    <ColorPicker color={rgbaToHsv(color)} onColorChange={handleColorPickerChange}>\r\n                        <ColorArea inputX={{ \"aria-label\": \"Saturation\" }} inputY={{ \"aria-label\": \"Brightness\" }} />\r\n                        <ColorSlider aria-label=\"Hue\" />\r\n                        {color instanceof Color4 && <AlphaSlider aria-label=\"Alpha\" />}\r\n                    </ColorPicker>\r\n                    <div className={classes.container}>\r\n                        {/* Top Row: Preview, Gamma Hex, Linear Hex */}\r\n                        <div className={classes.row}>\r\n                            <div className={classes.previewColor} style={{ backgroundColor: color.toHexString() }} />\r\n                            <InputHexField label=\"Gamma Hex\" value={color} isLinearMode={props.isLinearMode} onChange={handleChange} />\r\n                            <InputHexField label=\"Linear Hex\" linearHex={true} isLinearMode={props.isLinearMode} value={color} onChange={handleChange} />\r\n                        </div>\r\n\r\n                        {/* Middle Row: Red, Green, Blue, Alpha */}\r\n                        <div className={classes.row}>\r\n                            <InputRgbField label=\"Red\" color={color} rgbKey=\"r\" onChange={handleChange} />\r\n                            <InputRgbField label=\"Green\" color={color} rgbKey=\"g\" onChange={handleChange} />\r\n                            <InputRgbField label=\"Blue\" color={color} rgbKey=\"b\" onChange={handleChange} />\r\n                            <InputAlphaField color={color} onChange={handleChange} />\r\n                        </div>\r\n\r\n                        {/* Bottom Row: Hue, Saturation, Value */}\r\n                        <div className={classes.row}>\r\n                            <InputHsvField label=\"Hue\" color={color} hsvKey=\"h\" max={360} onChange={handleChange} />\r\n                            <InputHsvField label=\"Saturation\" color={color} hsvKey=\"s\" max={100} scale={100} onChange={handleChange} />\r\n                            <InputHsvField label=\"Value\" color={color} hsvKey=\"v\" max={100} scale={100} onChange={handleChange} />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </PopoverSurface>\r\n        </Popover>\r\n    );\r\n};\r\n\r\ntype HsvKey = \"h\" | \"s\" | \"v\";\r\nexport type InputHexProps = BaseComponentProps<Color3 | Color4> & {\r\n    label?: string;\r\n    linearHex?: boolean;\r\n    isLinearMode?: boolean;\r\n};\r\n/**\r\n * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space\r\n * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange\r\n *\r\n * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space\r\n * @param props - The properties for the InputHexField component.\r\n * @returns\r\n */\r\nexport const InputHexField: FunctionComponent<InputHexProps> = (props) => {\r\n    const id = useId(\"hex-input\");\r\n    const styles = useColorPickerStyles();\r\n    const { label, value, onChange, linearHex, isLinearMode } = props;\r\n\r\n    const handleChange = (e: ChangeEvent<HTMLInputElement>, _: InputOnChangeData) => {\r\n        // If linearHint (aka PBR material, ensure the other values are displayed in gamma even if linear hex changes)\r\n        const value = e.target.value;\r\n        if (value != \"\" && /^[0-9A-Fa-f]+$/g.test(value) == false) {\r\n            return;\r\n        }\r\n        onChange(Color3.FromHexString(value).toGammaSpace());\r\n    };\r\n    return (\r\n        <div className={styles.colorFieldWrapper}>\r\n            {props.linearHex ? (\r\n                <InfoLabel\r\n                    htmlFor={id}\r\n                    info={\r\n                        !isLinearMode ? (\r\n                            <> This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view </>\r\n                        ) : (\r\n                            <>\r\n                                This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space\r\n                                before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma\r\n                                space so that the color chosen here will match the color seen in your entity.\r\n                                <br />\r\n                                If you want to copy/paste the HEX into your code, you can either use\r\n                                <Body1Strong>Color3.FromHexString(LINEAR_HEX)</Body1Strong>\r\n                                <br />\r\n                                or\r\n                                <br />\r\n                                <Body1Strong>Color3.FromHexString(GAMMA_HEX).toLinearSpace()</Body1Strong>\r\n                                <br />\r\n                                <br />\r\n                                <Link href=\"https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/\"> Read more in our docs! </Link>\r\n                            </>\r\n                        )\r\n                    }\r\n                >\r\n                    {label}\r\n                </InfoLabel>\r\n            ) : (\r\n                <Label htmlFor={id}>{label}</Label>\r\n            )}\r\n            <Input\r\n                disabled={linearHex ? !isLinearMode : false}\r\n                className={styles.input}\r\n                value={linearHex ? value.toLinearSpace().toHexString() : value.toHexString()}\r\n                id={id}\r\n                onChange={handleChange}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype RgbKey = \"r\" | \"g\" | \"b\";\r\ntype InputRgbFieldProps = {\r\n    color: Color3 | Color4;\r\n    label: string;\r\n    rgbKey: RgbKey;\r\n    onChange: (color: Color3 | Color4) => void;\r\n};\r\n\r\nconst InputRgbField: FunctionComponent<InputRgbFieldProps> = (props) => {\r\n    const { color, onChange, label, rgbKey } = props;\r\n    const id = useId(`${label.toLowerCase()}-input`);\r\n    const classes = useColorPickerStyles();\r\n\r\n    const handleChange = useCallback(\r\n        (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            const val = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n            if (val === null || Number.isNaN(val) || !NUMBER_REGEX.test(val.toString())) {\r\n                return;\r\n            }\r\n\r\n            const newColor = color.clone();\r\n            newColor[rgbKey] = val / 255.0; // Convert to 0-1 range\r\n            onChange(newColor);\r\n        },\r\n        [color]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <Label htmlFor={id}>{label}</Label>\r\n            <SpinButton className={classes.spinButton} min={0} max={255} value={color[rgbKey] * 255.0} step={1} id={id} onChange={handleChange} name={rgbKey} />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype InputHsvFieldProps = {\r\n    color: Color3 | Color4;\r\n    label: string;\r\n    hsvKey: HsvKey;\r\n    onChange: (color: Color3 | Color4) => void;\r\n    max: number;\r\n    scale?: number;\r\n};\r\n\r\n/**\r\n * In the HSV (Hue, Saturation, Value) color model, Hue (H) ranges from 0 to 360 degrees, representing the color's position on the color wheel.\r\n * Saturation (S) ranges from 0 to 100%, indicating the intensity or purity of the color, with 0 being shades of gray and 100 being a fully saturated color.\r\n * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.\r\n * @param props - The properties for the InputHsvField component.\r\n */\r\nexport const InputHsvField: FunctionComponent<InputHsvFieldProps> = (props) => {\r\n    const { color, label, hsvKey, max, scale = 1 } = props;\r\n\r\n    const id = useId(`${label.toLowerCase()}-input`);\r\n    const classes = useColorPickerStyles();\r\n\r\n    const handleChange = useCallback(\r\n        (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            const val = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n            if (val === null || Number.isNaN(val) || !NUMBER_REGEX.test(val.toString())) {\r\n                return;\r\n            }\r\n\r\n            // Convert current color to HSV, update the new hsv value, then call onChange prop\r\n            const hsv = rgbaToHsv(color);\r\n            hsv[hsvKey] = val / scale;\r\n            let newColor: Color3 | Color4 = Color3.FromHSV(hsv.h, hsv.s, hsv.v);\r\n            if (color instanceof Color4) {\r\n                newColor = Color4.FromColor3(newColor, color.a ?? 1);\r\n            }\r\n            props.onChange(newColor);\r\n        },\r\n        [color]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <Label htmlFor={id}>{label}</Label>\r\n            <SpinButton className={classes.spinButton} min={0} max={max} value={rgbaToHsv(color)[hsvKey] * scale} step={1} id={id} onChange={handleChange} name={hsvKey} />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype InputAlphaProps = {\r\n    color: Color3 | Color4;\r\n    onChange: (color: Color4) => void;\r\n};\r\n\r\n/**\r\n * Displays the alpha value of a color, either in the disabled state (if color is Color3) or as a spin button (if color is Color4).\r\n * @param props\r\n * @returns\r\n */\r\nconst InputAlphaField: FunctionComponent<InputAlphaProps> = (props) => {\r\n    const classes = useColorPickerStyles();\r\n    const id = useId(\"alpha-input\");\r\n    const { color } = props;\r\n\r\n    const onChange = (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n        const value = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n        if (Number.isNaN(value) || value < 0 || value > 1) {\r\n            return;\r\n        }\r\n\r\n        if (color instanceof Color4) {\r\n            const newColor = color.clone();\r\n            newColor.a = value;\r\n            return newColor;\r\n        } else {\r\n            return Color4.FromColor3(color, value);\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <div className={classes.row}>\r\n                <Label htmlFor={id}>Alpha</Label>\r\n                {color instanceof Color3 && (\r\n                    <InfoLabel\r\n                        htmlFor={id}\r\n                        info={\r\n                            <>\r\n                                Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the material's\r\n                                alpha property directly, either in code via material.alpha OR via inspector's transparency section.\r\n                            </>\r\n                        }\r\n                    ></InfoLabel>\r\n                )}\r\n            </div>\r\n            <SpinButton\r\n                disabled={color instanceof Color3}\r\n                min={0}\r\n                max={1}\r\n                className={classes.spinButton}\r\n                value={color instanceof Color3 ? 1 : color.a}\r\n                step={0.01}\r\n                onChange={onChange}\r\n                id={id}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\nconst NUMBER_REGEX = /^\\d+$/;\r\n\r\nfunction rgbaToHsv(color: { r: number; g: number; b: number; a?: number }): { h: number; s: number; v: number; a?: number } {\r\n    const c = new Color3(color.r, color.g, color.b);\r\n    const hsv = c.toHSV();\r\n    return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };\r\n}\r\n"]}

package/fluent/primitives/dropdown.d.ts

@@ -14,7 +14,7 @@ export type DropdownOption = {
     value: DropdownOptionValue;
 };
 export type DropdownProps<V extends AcceptedDropdownValue> = BaseComponentProps<V> & {
-    options: DropdownOption[];
+    options: readonly DropdownOption[];
     includeNullAs?: "null" | "undefined";
 };
 /**

package/fluent/primitives/dropdown.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dropdown as FluentDropdown, makeStyles, Option } from "@fluentui/react-components";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 const useDropdownStyles = makeStyles({
     dropdownOption: {
         textAlign: "right",
@@ -17,7 +17,7 @@ const useDropdownStyles = makeStyles({
 export const Dropdown = (props) => {
     const classes = useDropdownStyles();
     // This component can handle both null and undefined values, so '==' null is intentionally used throughout to check for both cases.
-    const [options] = useState(props.includeNullAs ? [{ label: "<Not defined>", value: Number.MAX_SAFE_INTEGER }, ...props.options] : props.options);
+    const options = useMemo(() => (props.includeNullAs ? [{ label: "<Not defined>", value: Number.MAX_SAFE_INTEGER }, ...props.options] : props.options), [props.includeNullAs, props.options]);
     const [defaultVal, setDefaultVal] = useState(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);
     useEffect(() => {
         setDefaultVal(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);

package/fluent/primitives/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,cAAc,EAAE;QACZ,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,MAAM;KACnB;IACD,WAAW,EAAE,EAAE;CAClB,CAAC,CAAC;AAqBH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4D,CAAC,KAAK,EAAE,EAAE;IACvF,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,mIAAmI;IACnI,MAAM,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAmB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,CAAC,gBAAgB,EAAE,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACnK,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC1G,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,cAAc,IACX,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,cAAc,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC1B,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;YAC5F,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACtB,aAAa,CAAC,KAAK,CAAC,CAAC;gBACrB,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;gBAClE,KAAK,KAAK,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACxF,CAAC;QACL,CAAC,EACD,eAAe,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,EACxC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,EAAE,KAAK,YAExD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAsB,EAAE,EAAE,CAAC,CACrC,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 { useEffect, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\nimport type { Nullable } from \"core/types\";\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\ntype DropdownOptionValue = string | number;\r\nexport type AcceptedDropdownValue = Nullable<DropdownOptionValue> | undefined;\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\r\n     */\r\n    value: DropdownOptionValue;\r\n};\r\n\r\nexport type DropdownProps<V extends AcceptedDropdownValue> = BaseComponentProps<V> & {\r\n    options: DropdownOption[];\r\n\r\n    includeNullAs?: \"null\" | \"undefined\"; // If supplied, adds an option with label 'Not Defined' and later sets value either null or undefined\r\n};\r\n\r\n/**\r\n * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true\r\n * This component can handle both null and undefined values\r\n * @param props\r\n * @returns dropdown component\r\n */\r\nexport const Dropdown: FunctionComponent<DropdownProps<AcceptedDropdownValue>> = (props) => {\r\n    const classes = useDropdownStyles();\r\n    // This component can handle both null and undefined values, so '==' null is intentionally used throughout to check for both cases.\r\n    const [options] = useState<DropdownOption[]>(props.includeNullAs ? [{ label: \"<Not defined>\", value: Number.MAX_SAFE_INTEGER }, ...props.options] : props.options);\r\n    const [defaultVal, setDefaultVal] = useState(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);\r\n    useEffect(() => {\r\n        setDefaultVal(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);\r\n    }, [props.value]);\r\n\r\n    return (\r\n        <FluentDropdown\r\n            size=\"small\"\r\n            className={classes.dropdownOption}\r\n            onOptionSelect={(evt, data) => {\r\n                const value = typeof props.value === \"number\" ? Number(data.optionValue) : data.optionValue;\r\n                if (value !== undefined) {\r\n                    setDefaultVal(value);\r\n                    const nullVal = props.includeNullAs === \"null\" ? null : undefined;\r\n                    value === Number.MAX_SAFE_INTEGER ? props.onChange(nullVal) : props.onChange(value);\r\n                }\r\n            }}\r\n            selectedOptions={[defaultVal.toString()]}\r\n            value={options.find((o) => o.value === defaultVal)?.label}\r\n        >\r\n            {options.map((option: DropdownOption) => (\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"]}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKrD,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,cAAc,EAAE;QACZ,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,MAAM;KACnB;IACD,WAAW,EAAE,EAAE;CAClB,CAAC,CAAC;AAqBH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4D,CAAC,KAAK,EAAE,EAAE;IACvF,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,mIAAmI;IACnI,MAAM,OAAO,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,CAAC,gBAAgB,EAAE,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAC5H,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CACvC,CAAC;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC1G,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,cAAc,IACX,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,cAAc,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC1B,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;YAC5F,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACtB,aAAa,CAAC,KAAK,CAAC,CAAC;gBACrB,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;gBAClE,KAAK,KAAK,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACxF,CAAC;QACL,CAAC,EACD,eAAe,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,EACxC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,EAAE,KAAK,YAExD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAsB,EAAE,EAAE,CAAC,CACrC,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 { useEffect, useMemo, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\nimport type { Nullable } from \"core/types\";\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\ntype DropdownOptionValue = string | number;\r\nexport type AcceptedDropdownValue = Nullable<DropdownOptionValue> | undefined;\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\r\n     */\r\n    value: DropdownOptionValue;\r\n};\r\n\r\nexport type DropdownProps<V extends AcceptedDropdownValue> = BaseComponentProps<V> & {\r\n    options: readonly DropdownOption[];\r\n\r\n    includeNullAs?: \"null\" | \"undefined\"; // If supplied, adds an option with label 'Not Defined' and later sets value either null or undefined\r\n};\r\n\r\n/**\r\n * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true\r\n * This component can handle both null and undefined values\r\n * @param props\r\n * @returns dropdown component\r\n */\r\nexport const Dropdown: FunctionComponent<DropdownProps<AcceptedDropdownValue>> = (props) => {\r\n    const classes = useDropdownStyles();\r\n    // This component can handle both null and undefined values, so '==' null is intentionally used throughout to check for both cases.\r\n    const options = useMemo(\r\n        () => (props.includeNullAs ? [{ label: \"<Not defined>\", value: Number.MAX_SAFE_INTEGER }, ...props.options] : props.options),\r\n        [props.includeNullAs, props.options]\r\n    );\r\n    const [defaultVal, setDefaultVal] = useState(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);\r\n    useEffect(() => {\r\n        setDefaultVal(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);\r\n    }, [props.value]);\r\n\r\n    return (\r\n        <FluentDropdown\r\n            size=\"small\"\r\n            className={classes.dropdownOption}\r\n            onOptionSelect={(evt, data) => {\r\n                const value = typeof props.value === \"number\" ? Number(data.optionValue) : data.optionValue;\r\n                if (value !== undefined) {\r\n                    setDefaultVal(value);\r\n                    const nullVal = props.includeNullAs === \"null\" ? null : undefined;\r\n                    value === Number.MAX_SAFE_INTEGER ? props.onChange(nullVal) : props.onChange(value);\r\n                }\r\n            }}\r\n            selectedOptions={[defaultVal.toString()]}\r\n            value={options.find((o) => o.value === defaultVal)?.label}\r\n        >\r\n            {options.map((option: DropdownOption) => (\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/messageBar.d.ts

@@ -0,0 +1,9 @@
+import type { FunctionComponent } from "react";
+type MessageBarProps = {
+    message: string;
+    title: string;
+    docLink?: string;
+    intent: "info" | "success" | "warning" | "error";
+};
+export declare const MessageBar: FunctionComponent<MessageBarProps>;
+export {};

package/fluent/primitives/messageBar.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageBar as FluentMessageBar, MessageBarTitle, MessageBarBody, makeStyles } from "@fluentui/react-components";
+import { Link } from "./link.js";
+const useClasses = makeStyles({
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "10px",
+    },
+});
+export const MessageBar = (props) => {
+    const { message, title: header, intent, docLink } = props;
+    const classes = useClasses();
+    return (_jsx("div", { className: classes.container, children: _jsx(FluentMessageBar, { intent: intent, children: _jsxs(MessageBarBody, { children: [_jsx(MessageBarTitle, { children: header }), message, docLink && _jsx(Link, { href: docLink, children: " - Link to Docs!" })] }) }) }));
+};
+//# sourceMappingURL=messageBar.js.map

package/fluent/primitives/messageBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messageBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/messageBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAEzH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,UAAU,GAAG,UAAU,CAAC;IAC1B,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM;KACd;CACJ,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,CACH,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAC7B,KAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,YAC5B,MAAC,cAAc,eACX,KAAC,eAAe,cAAE,MAAM,GAAmB,EAC1C,OAAO,EACP,OAAO,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,OAAO,iCAAyB,IAC3C,GACF,GACjB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { MessageBar as FluentMessageBar, MessageBarTitle, MessageBarBody, makeStyles } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Link } from \"./link\";\r\n\r\nconst useClasses = makeStyles({\r\n    container: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: \"10px\",\r\n    },\r\n});\r\n\r\ntype MessageBarProps = {\r\n    message: string;\r\n    title: string;\r\n    docLink?: string;\r\n    intent: \"info\" | \"success\" | \"warning\" | \"error\";\r\n};\r\nexport const MessageBar: FunctionComponent<MessageBarProps> = (props) => {\r\n    const { message, title: header, intent, docLink } = props;\r\n    const classes = useClasses();\r\n\r\n    return (\r\n        <div className={classes.container}>\r\n            <FluentMessageBar intent={intent}>\r\n                <MessageBarBody>\r\n                    <MessageBarTitle>{header}</MessageBarTitle>\r\n                    {message}\r\n                    {docLink && <Link href={docLink}> - Link to Docs!</Link>}\r\n                </MessageBarBody>\r\n            </FluentMessageBar>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/searchBox.d.ts

@@ -0,0 +1,6 @@
+type SearchProps = {
+    onChange: (val: string) => void;
+    placeholder?: string;
+};
+export declare const SearchBox: (props: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/fluent/primitives/searchBox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field, SearchBox as FluentSearchBox, makeStyles } from "@fluentui/react-components";
+const useStyles = makeStyles({
+    search: {
+        minWidth: "50px",
+    },
+});
+export const SearchBox = (props) => {
+    const classes = useStyles();
+    const onChange = (_, data) => {
+        props.onChange(data.value);
+    };
+    return (_jsx(Field, { children: _jsx(FluentSearchBox, { className: classes.search, placeholder: props.placeholder, onChange: onChange }) }));
+};
+//# sourceMappingURL=searchBox.js.map

package/fluent/primitives/searchBox.js.map

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

package/lines/booleanLineComponent.d.ts

@@ -7,5 +7,7 @@ export interface IBooleanLineComponentProps {
 }
 export declare class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {
     constructor(props: IBooleanLineComponentProps);
+    renderFluent(): import("react/jsx-runtime").JSX.Element;
+    renderOriginal(): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/lines/booleanLineComponent.js

@@ -2,14 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
+import { ReadonlyBooleanLine } from "shared-ui-components/fluent/hoc/readonlyBooleanLine";
+import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
 export class BooleanLineComponent extends React.Component {
     constructor(props) {
         super(props);
     }
-    render() {
+    renderFluent() {
+        return _jsx(ReadonlyBooleanLine, { label: this.props.label, value: this.props.value });
+    }
+    renderOriginal() {
         const check = this.props.value ? _jsx(FontAwesomeIcon, { icon: faCheck }) : _jsx(FontAwesomeIcon, { icon: faTimesCircle });
         const className = this.props.value ? "value check" : "value uncheck";
         return (_jsxs("div", { className: "textLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: className, children: check })] }));
     }
+    render() {
+        return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal()) });
+    }
 }
 //# sourceMappingURL=booleanLineComponent.js.map

package/lines/booleanLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"booleanLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/booleanLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAS3E,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAqC;IACjF,YAAY,KAAiC;QACzC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAEQ,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,GAAI,CAAC;QAC/G,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC;QAErE,OAAO,CACH,eAAK,SAAS,EAAC,UAAU,aACpB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,YACzC,IAAI,CAAC,KAAK,CAAC,KAAK,GACf,EACN,cAAK,SAAS,EAAE,SAAS,YAAG,KAAK,GAAO,IACtC,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCheck, faTimesCircle } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\nexport interface IBooleanLineComponentProps {\r\n    label: string;\r\n    value: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {\r\n    constructor(props: IBooleanLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    override render() {\r\n        const check = this.props.value ? <FontAwesomeIcon icon={faCheck} /> : <FontAwesomeIcon icon={faTimesCircle} />;\r\n        const className = this.props.value ? \"value check\" : \"value uncheck\";\r\n\r\n        return (\r\n            <div className=\"textLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className={className}>{check}</div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"booleanLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/booleanLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qDAAqD,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAShF,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAqC;IACjF,YAAY,KAAiC;QACzC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IACD,YAAY;QACR,OAAO,KAAC,mBAAmB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,CAAC;IACrF,CAAC;IAED,cAAc;QACV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,GAAI,CAAC;QAC/G,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC;QAErE,OAAO,CACH,eAAK,SAAS,EAAC,UAAU,aACpB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,YACzC,IAAI,CAAC,KAAK,CAAC,KAAK,GACf,EACN,cAAK,SAAS,EAAE,SAAS,YAAG,KAAK,GAAO,IACtC,CACT,CAAC;IACN,CAAC;IACQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCheck, faTimesCircle } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { ReadonlyBooleanLine } from \"shared-ui-components/fluent/hoc/readonlyBooleanLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface IBooleanLineComponentProps {\r\n    label: string;\r\n    value: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {\r\n    constructor(props: IBooleanLineComponentProps) {\r\n        super(props);\r\n    }\r\n    renderFluent() {\r\n        return <ReadonlyBooleanLine label={this.props.label} value={this.props.value} />;\r\n    }\r\n\r\n    renderOriginal() {\r\n        const check = this.props.value ? <FontAwesomeIcon icon={faCheck} /> : <FontAwesomeIcon icon={faTimesCircle} />;\r\n        const className = this.props.value ? \"value check\" : \"value uncheck\";\r\n\r\n        return (\r\n            <div className=\"textLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className={className}>{check}</div>\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/lines/fileButtonLineComponent.js

@@ -16,7 +16,7 @@ export class FileButtonLine extends React.Component {
         evt.target.value = "";
     }
     renderFluent() {
-        return _jsx(FileUploadLine, { ...this.props });
+        return _jsx(FileUploadLine, { ...this.props, onClick: (file) => this.props.onClick(file[0]) });
     }
     renderOriginal() {
         return (_jsxs("div", { className: "buttonLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("label", { htmlFor: "file-upload" + this._id, className: "file-upload", children: this.props.label }), _jsx("input", { ref: this._uploadInputRef, id: "file-upload" + this._id, type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] }));

package/lines/fileButtonLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileButtonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/fileButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAUhF,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAA+B;IAKrE,YAAY,KAA2B;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,QAAG,GAAG,cAAc,CAAC,YAAY,EAAE,CAAC;QAKxC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7C,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,YAAY;QACR,OAAO,KAAC,cAAc,OAAK,IAAI,CAAC,KAAK,GAAI,CAAC;IAC9C,CAAC;IAED,cAAc;QACV,OAAO,CACH,eAAK,SAAS,EAAC,YAAY,aACtB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAC,aAAa,YAC5D,IAAI,CAAC,KAAK,CAAC,KAAK,GACb,EACR,gBAAO,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAI,IAC9I,CACT,CAAC;IACN,CAAC;IACQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;;AAnCc,2BAAY,GAAG,CAAC,AAAJ,CAAK","sourcesContent":["import * as React from \"react\";\r\nimport { FileUploadLine } from \"../fluent/hoc/fileUploadLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\ninterface IFileButtonLineProps {\r\n    label: string;\r\n    onClick: (file: File) => void;\r\n    accept: string;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class FileButtonLine extends React.Component<IFileButtonLineProps> {\r\n    private static _IdGenerator = 0;\r\n    private _id = FileButtonLine._IdGenerator++;\r\n    private _uploadInputRef: React.RefObject<HTMLInputElement>;\r\n\r\n    constructor(props: IFileButtonLineProps) {\r\n        super(props);\r\n        this._uploadInputRef = React.createRef();\r\n    }\r\n\r\n    onChange(evt: any) {\r\n        const files: File[] = evt.target.files;\r\n        if (files && files.length) {\r\n            this.props.onClick(files[0]);\r\n        }\r\n\r\n        evt.target.value = \"\";\r\n    }\r\n\r\n    renderFluent() {\r\n        return <FileUploadLine {...this.props} />;\r\n    }\r\n\r\n    renderOriginal() {\r\n        return (\r\n            <div className=\"buttonLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <label htmlFor={\"file-upload\" + this._id} className=\"file-upload\">\r\n                    {this.props.label}\r\n                </label>\r\n                <input ref={this._uploadInputRef} id={\"file-upload\" + this._id} type=\"file\" accept={this.props.accept} onChange={(evt) => this.onChange(evt)} />\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"fileButtonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/fileButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAUhF,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAA+B;IAKrE,YAAY,KAA2B;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,QAAG,GAAG,cAAc,CAAC,YAAY,EAAE,CAAC;QAKxC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7C,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,YAAY;QACR,OAAO,KAAC,cAAc,OAAK,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAI,CAAC;IAC9F,CAAC;IAED,cAAc;QACV,OAAO,CACH,eAAK,SAAS,EAAC,YAAY,aACtB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAC,aAAa,YAC5D,IAAI,CAAC,KAAK,CAAC,KAAK,GACb,EACR,gBAAO,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAI,IAC9I,CACT,CAAC;IACN,CAAC;IACQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;;AAnCc,2BAAY,GAAG,CAAC,AAAJ,CAAK","sourcesContent":["import * as React from \"react\";\r\nimport { FileUploadLine } from \"../fluent/hoc/fileUploadLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\ninterface IFileButtonLineProps {\r\n    label: string;\r\n    onClick: (file: File) => void;\r\n    accept: string;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class FileButtonLine extends React.Component<IFileButtonLineProps> {\r\n    private static _IdGenerator = 0;\r\n    private _id = FileButtonLine._IdGenerator++;\r\n    private _uploadInputRef: React.RefObject<HTMLInputElement>;\r\n\r\n    constructor(props: IFileButtonLineProps) {\r\n        super(props);\r\n        this._uploadInputRef = React.createRef();\r\n    }\r\n\r\n    onChange(evt: any) {\r\n        const files: File[] = evt.target.files;\r\n        if (files && files.length) {\r\n            this.props.onClick(files[0]);\r\n        }\r\n\r\n        evt.target.value = \"\";\r\n    }\r\n\r\n    renderFluent() {\r\n        return <FileUploadLine {...this.props} onClick={(file) => this.props.onClick(file[0])} />;\r\n    }\r\n\r\n    renderOriginal() {\r\n        return (\r\n            <div className=\"buttonLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <label htmlFor={\"file-upload\" + this._id} className=\"file-upload\">\r\n                    {this.props.label}\r\n                </label>\r\n                <input ref={this._uploadInputRef} id={\"file-upload\" + this._id} type=\"file\" accept={this.props.accept} onChange={(evt) => this.onChange(evt)} />\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/lines/hexLineComponent.d.ts

@@ -35,6 +35,7 @@ export declare class HexLineComponent extends React.Component<IHexLineComponentP
     updateValue(valueString: string, raisePropertyChanged: boolean): void;
     lock(): void;
     unlock(): void;
+    onCopyClick(): void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/lines/hexLineComponent.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { copyCommandToClipboard, getClassNameWithNamespace } from "../copyCommandToClipboard.js";
+import copyIcon from "../imgs/copy.svg";
 export class HexLineComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -95,6 +97,19 @@ export class HexLineComponent extends React.Component {
             this.props.lockObject.lock = false;
         }
     }
+    onCopyClick() {
+        if (this.props && this.props.target) {
+            const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);
+            const targetName = "globalThis.debugNode";
+            const targetProperty = this.props.propertyName;
+            const value = this.props.target[this.props.propertyName];
+            const strCommand = targetName + "." + targetProperty + " = " + value + ";// (debugNode as " + babylonNamespace + className + ")";
+            copyCommandToClipboard(strCommand);
+        }
+        else {
+            copyCommandToClipboard("undefined");
+        }
+    }
     render() {
         let valueAsHex;
         if (this._propertyChange) {
@@ -115,7 +130,7 @@ export class HexLineComponent extends React.Component {
                                     return;
                                 }
                                 this.updateValue(this.state.value, true);
-                            } }) })] })) }));
+                            } }) }), _jsx("div", { className: "copy hoverIcon", onClick: () => this.onCopyClick(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) })] })) }));
     }
 }
 //# sourceMappingURL=hexLineComponent.js.map

package/lines/hexLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"hexLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/hexLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\ninterface IHexLineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    lockObject?: LockObject;\r\n    onChange?: (newValue: number) => void;\r\n    isInteger?: boolean;\r\n    replaySourceReplacement?: string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    additionalClass?: string;\r\n    step?: string;\r\n    digits?: number;\r\n    useEuler?: boolean;\r\n    min?: number;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class HexLineComponent extends React.Component<IHexLineComponentProps, { value: string }> {\r\n    private _localChange = false;\r\n    private _store: number;\r\n    private _propertyChange = true;\r\n\r\n    constructor(props: IHexLineComponentProps) {\r\n        super(props);\r\n\r\n        const currentValue = this.props.target[this.props.propertyName];\r\n        this.state = { value: currentValue ? (this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(this.props.digits || 3)) : \"0\" };\r\n        this._store = currentValue;\r\n    }\r\n\r\n    override componentWillUnmount() {\r\n        this.unlock();\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: { value: string }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = nextProps.target[nextProps.propertyName];\r\n        const newValueString = newValue ? (this.props.isInteger ? newValue.toFixed(0) : newValue.toFixed(this.props.digits || 3)) : \"0\";\r\n\r\n        if (newValueString !== nextState.value) {\r\n            nextState.value = newValueString;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (this.props.onChange) {\r\n            this.props.onChange(newValue);\r\n        }\r\n\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.replaySourceReplacement ?? this.props.target,\r\n            property: this.props.propertyName,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n        });\r\n    }\r\n\r\n    convertToHexString(valueString: string): string {\r\n        while (valueString.length < 10) {\r\n            valueString += \"0\";\r\n        }\r\n        return valueString;\r\n    }\r\n\r\n    updateValue(valueString: string, raisePropertyChanged: boolean) {\r\n        if (valueString.substring(0, 2) != \"0x\") {\r\n            if (valueString.substring(0, 1) != \"0\") {\r\n                valueString = \"0x\" + valueString;\r\n            } else {\r\n                valueString = \"0x\" + valueString.substr(1);\r\n            }\r\n        }\r\n\r\n        const valueSubstr = valueString.substr(2);\r\n        if (valueSubstr != \"\" && /^[0-9A-Fa-f]+$/g.test(valueSubstr) == false) {\r\n            return;\r\n        }\r\n\r\n        if (valueString.length > 10) {\r\n            return;\r\n        }\r\n\r\n        const valueStringAsHex = this.convertToHexString(valueString);\r\n        let valueAsNumber: number;\r\n\r\n        valueAsNumber = parseInt(valueStringAsHex);\r\n\r\n        if (!isNaN(valueAsNumber) && this.props.min !== undefined) {\r\n            if (valueAsNumber < this.props.min) {\r\n                valueAsNumber = this.props.min;\r\n                valueString = valueAsNumber.toString();\r\n            }\r\n        }\r\n\r\n        this._localChange = true;\r\n\r\n        if (isNaN(valueAsNumber)) {\r\n            return;\r\n        }\r\n\r\n        this.setState({ value: valueString });\r\n        if (raisePropertyChanged) {\r\n            this._propertyChange = true;\r\n            this.props.target[this.props.propertyName] = valueAsNumber;\r\n            this.raiseOnPropertyChanged(valueAsNumber, this._store);\r\n        } else {\r\n            this._propertyChange = false;\r\n        }\r\n\r\n        this._store = valueAsNumber;\r\n    }\r\n\r\n    lock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = true;\r\n        }\r\n    }\r\n\r\n    unlock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    override render() {\r\n        let valueAsHex: string;\r\n        if (this._propertyChange) {\r\n            const valueAsNumber = parseInt(this.state.value);\r\n            valueAsHex = valueAsNumber.toString(16);\r\n            let hex0String = \"\";\r\n            for (let i = 0; i < 8 - valueAsHex.length; i++) {\r\n                //padding the '0's\r\n                hex0String += \"0\";\r\n            }\r\n            valueAsHex = \"0x\" + hex0String + valueAsHex.toUpperCase();\r\n        } else {\r\n            valueAsHex = this.state.value;\r\n        }\r\n\r\n        return (\r\n            <div>\r\n                {!this.props.useEuler && (\r\n                    <div className={this.props.additionalClass ? this.props.additionalClass + \" floatLine\" : \"floatLine\"}>\r\n                        {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                        <div className=\"label\" title={this.props.label}>\r\n                            {this.props.label}\r\n                        </div>\r\n                        <div className=\"value\">\r\n                            <input\r\n                                type=\"string\"\r\n                                className=\"hex-input\"\r\n                                value={valueAsHex}\r\n                                onBlur={() => this.unlock()}\r\n                                onFocus={() => this.lock()}\r\n                                onChange={(evt) => this.updateValue(evt.target.value, false)}\r\n                                onKeyDown={(evt) => {\r\n                                    if (evt.keyCode !== 13) {\r\n                                        return;\r\n                                    }\r\n                                    this.updateValue(this.state.value, true);\r\n                                }}\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"hexLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/hexLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\n\r\ninterface IHexLineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    lockObject?: LockObject;\r\n    onChange?: (newValue: number) => void;\r\n    isInteger?: boolean;\r\n    replaySourceReplacement?: string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    additionalClass?: string;\r\n    step?: string;\r\n    digits?: number;\r\n    useEuler?: boolean;\r\n    min?: number;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class HexLineComponent extends React.Component<IHexLineComponentProps, { value: string }> {\r\n    private _localChange = false;\r\n    private _store: number;\r\n    private _propertyChange = true;\r\n\r\n    constructor(props: IHexLineComponentProps) {\r\n        super(props);\r\n\r\n        const currentValue = this.props.target[this.props.propertyName];\r\n        this.state = { value: currentValue ? (this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(this.props.digits || 3)) : \"0\" };\r\n        this._store = currentValue;\r\n    }\r\n\r\n    override componentWillUnmount() {\r\n        this.unlock();\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: { value: string }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = nextProps.target[nextProps.propertyName];\r\n        const newValueString = newValue ? (this.props.isInteger ? newValue.toFixed(0) : newValue.toFixed(this.props.digits || 3)) : \"0\";\r\n\r\n        if (newValueString !== nextState.value) {\r\n            nextState.value = newValueString;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (this.props.onChange) {\r\n            this.props.onChange(newValue);\r\n        }\r\n\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.replaySourceReplacement ?? this.props.target,\r\n            property: this.props.propertyName,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n        });\r\n    }\r\n\r\n    convertToHexString(valueString: string): string {\r\n        while (valueString.length < 10) {\r\n            valueString += \"0\";\r\n        }\r\n        return valueString;\r\n    }\r\n\r\n    updateValue(valueString: string, raisePropertyChanged: boolean) {\r\n        if (valueString.substring(0, 2) != \"0x\") {\r\n            if (valueString.substring(0, 1) != \"0\") {\r\n                valueString = \"0x\" + valueString;\r\n            } else {\r\n                valueString = \"0x\" + valueString.substr(1);\r\n            }\r\n        }\r\n\r\n        const valueSubstr = valueString.substr(2);\r\n        if (valueSubstr != \"\" && /^[0-9A-Fa-f]+$/g.test(valueSubstr) == false) {\r\n            return;\r\n        }\r\n\r\n        if (valueString.length > 10) {\r\n            return;\r\n        }\r\n\r\n        const valueStringAsHex = this.convertToHexString(valueString);\r\n        let valueAsNumber: number;\r\n\r\n        valueAsNumber = parseInt(valueStringAsHex);\r\n\r\n        if (!isNaN(valueAsNumber) && this.props.min !== undefined) {\r\n            if (valueAsNumber < this.props.min) {\r\n                valueAsNumber = this.props.min;\r\n                valueString = valueAsNumber.toString();\r\n            }\r\n        }\r\n\r\n        this._localChange = true;\r\n\r\n        if (isNaN(valueAsNumber)) {\r\n            return;\r\n        }\r\n\r\n        this.setState({ value: valueString });\r\n        if (raisePropertyChanged) {\r\n            this._propertyChange = true;\r\n            this.props.target[this.props.propertyName] = valueAsNumber;\r\n            this.raiseOnPropertyChanged(valueAsNumber, this._store);\r\n        } else {\r\n            this._propertyChange = false;\r\n        }\r\n\r\n        this._store = valueAsNumber;\r\n    }\r\n\r\n    lock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = true;\r\n        }\r\n    }\r\n\r\n    unlock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    onCopyClick() {\r\n        if (this.props && this.props.target) {\r\n            const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);\r\n            const targetName = \"globalThis.debugNode\";\r\n            const targetProperty = this.props.propertyName;\r\n            const value = this.props.target[this.props.propertyName];\r\n            const strCommand = targetName + \".\" + targetProperty + \" = \" + value + \";// (debugNode as \" + babylonNamespace + className + \")\";\r\n            copyCommandToClipboard(strCommand);\r\n        } else {\r\n            copyCommandToClipboard(\"undefined\");\r\n        }\r\n    }\r\n\r\n    override render() {\r\n        let valueAsHex: string;\r\n        if (this._propertyChange) {\r\n            const valueAsNumber = parseInt(this.state.value);\r\n            valueAsHex = valueAsNumber.toString(16);\r\n            let hex0String = \"\";\r\n            for (let i = 0; i < 8 - valueAsHex.length; i++) {\r\n                //padding the '0's\r\n                hex0String += \"0\";\r\n            }\r\n            valueAsHex = \"0x\" + hex0String + valueAsHex.toUpperCase();\r\n        } else {\r\n            valueAsHex = this.state.value;\r\n        }\r\n\r\n        return (\r\n            <div>\r\n                {!this.props.useEuler && (\r\n                    <div className={this.props.additionalClass ? this.props.additionalClass + \" floatLine\" : \"floatLine\"}>\r\n                        {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                        <div className=\"label\" title={this.props.label}>\r\n                            {this.props.label}\r\n                        </div>\r\n                        <div className=\"value\">\r\n                            <input\r\n                                type=\"string\"\r\n                                className=\"hex-input\"\r\n                                value={valueAsHex}\r\n                                onBlur={() => this.unlock()}\r\n                                onFocus={() => this.lock()}\r\n                                onChange={(evt) => this.updateValue(evt.target.value, false)}\r\n                                onKeyDown={(evt) => {\r\n                                    if (evt.keyCode !== 13) {\r\n                                        return;\r\n                                    }\r\n                                    this.updateValue(this.state.value, true);\r\n                                }}\r\n                            />\r\n                        </div>\r\n                        <div className=\"copy hoverIcon\" onClick={() => this.onCopyClick()} title=\"Copy to clipboard\">\r\n                            <img src={copyIcon} alt=\"Copy\" />\r\n                        </div>\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/lineContainerComponent.d.ts

@@ -14,6 +14,8 @@ export declare class LineContainerComponent extends React.Component<ILineContain
     switchExpandedState(): void;
     renderHeader(): import("react/jsx-runtime").JSX.Element;
     componentDidMount(): void;
+    renderFluent(): import("react/jsx-runtime").JSX.Element;
+    renderOriginal(): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/lines/lineContainerComponent.js

@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { DataStorage } from "@babylonjs/core/Misc/dataStorage.js";
 import downArrow from "./downArrow.svg";
+import { AccordionSection } from "../fluent/primitives/accordion.js";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
 export class LineContainerComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -43,11 +45,17 @@ export class LineContainerComponent extends React.Component {
             this.setState({ isExpanded: false });
         }
     }
-    render() {
+    renderFluent() {
+        return _jsx(AccordionSection, { title: this.props.title, children: this.props.children });
+    }
+    renderOriginal() {
         if (!this.state.isExpanded) {
             return (_jsx("div", { className: "paneContainer", children: _jsx("div", { className: "paneContainer-content", children: this.renderHeader() }) }));
         }
         return (_jsxs("div", { className: "paneContainer", children: [_jsxs("div", { className: "paneContainer-content", children: [this.renderHeader(), _jsx("div", { className: "paneList", children: this.props.children })] }), _jsx("div", { className: "paneContainer-highlight-border" + (!this.state.isHighlighted ? " transparent" : "") })] }));
     }
+    render() {
+        return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal()) });
+    }
 }
 //# sourceMappingURL=lineContainerComponent.js.map

package/lines/lineContainerComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"lineContainerComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/lineContainerComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,4CAA8B;AAEpD,OAAO,SAAS,MAAM,iBAAiB,CAAC;AASxC,MAAM,OAAO,sBAAuB,SAAQ,KAAK,CAAC,SAAwF;IACtI,YAAY,KAAmC;QAC3C,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,MAAM,YAAY,GAAG,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAEnF,IAAI,CAAC,KAAK,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;IACpE,CAAC;IAED,mBAAmB;QACf,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;QAExC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QAErD,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC5C,CAAC;IAED,YAAY;QACR,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC;QAEzE,OAAO,CACH,eAAK,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,aAC7D,cAAK,SAAS,EAAC,OAAO,YAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAO,EAC/C,cAAK,SAAS,EAAE,SAAS,YACrB,cAAK,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,GAAI,GAC9D,IACJ,CACT,CAAC;IACN,CAAC;IAEQ,iBAAiB;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;YACxB,OAAO;QACX,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,2BAA2B,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,kCAAkC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACxI,OAAO;QACX,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,2BAA2B,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;YAClF,UAAU,CAAC,GAAG,EAAE;gBACZ,IAAI,CAAC,KAAK,CAAC,SAAU,CAAC,2BAA2B,GAAG,EAAE,CAAC;YAC3D,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YAEzD,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACnB,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;YAC5C,CAAC,EAAE,IAAI,CAAC,CAAC;QACb,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,kCAAkC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;YAChG,UAAU,CAAC,GAAG,EAAE;gBACZ,IAAI,CAAC,KAAK,CAAC,SAAU,CAAC,kCAAkC,GAAG,EAAE,CAAC;YAClE,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;QAC9D,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC;QACzC,CAAC;IACL,CAAC;IAEQ,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YACzB,OAAO,CACH,cAAK,SAAS,EAAC,eAAe,YAC1B,cAAK,SAAS,EAAC,uBAAuB,YAAE,IAAI,CAAC,YAAY,EAAE,GAAO,GAChE,CACT,CAAC;QACN,CAAC;QAED,OAAO,CACH,eAAK,SAAS,EAAC,eAAe,aAC1B,eAAK,SAAS,EAAC,uBAAuB,aACjC,IAAI,CAAC,YAAY,EAAE,EACpB,cAAK,SAAS,EAAC,UAAU,YAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAO,IACnD,EACN,cAAK,SAAS,EAAE,gCAAgC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,GAAQ,IAC1G,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { DataStorage } from \"core/Misc/dataStorage\";\r\nimport type { ISelectedLineContainer } from \"./iSelectedLineContainer\";\r\nimport downArrow from \"./downArrow.svg\";\r\n\r\ninterface ILineContainerComponentProps {\r\n    selection?: ISelectedLineContainer;\r\n    title: string;\r\n    children: any[] | any;\r\n    closed?: boolean;\r\n}\r\n\r\nexport class LineContainerComponent extends React.Component<ILineContainerComponentProps, { isExpanded: boolean; isHighlighted: boolean }> {\r\n    constructor(props: ILineContainerComponentProps) {\r\n        super(props);\r\n\r\n        const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);\r\n\r\n        this.state = { isExpanded: initialState, isHighlighted: false };\r\n    }\r\n\r\n    switchExpandedState(): void {\r\n        const newState = !this.state.isExpanded;\r\n\r\n        DataStorage.WriteBoolean(this.props.title, newState);\r\n\r\n        this.setState({ isExpanded: newState });\r\n    }\r\n\r\n    renderHeader() {\r\n        const className = this.state.isExpanded ? \"collapse\" : \"collapse closed\";\r\n\r\n        return (\r\n            <div className=\"header\" onClick={() => this.switchExpandedState()}>\r\n                <div className=\"title\">{this.props.title}</div>\r\n                <div className={className}>\r\n                    <img className=\"img\" title={this.props.title} src={downArrow} />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    override componentDidMount() {\r\n        if (!this.props.selection) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.selection.selectedLineContainerTitles.length === 0 && this.props.selection.selectedLineContainerTitlesNoFocus.length === 0) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.selection.selectedLineContainerTitles.indexOf(this.props.title) > -1) {\r\n            setTimeout(() => {\r\n                this.props.selection!.selectedLineContainerTitles = [];\r\n            });\r\n\r\n            this.setState({ isExpanded: true, isHighlighted: true });\r\n\r\n            window.setTimeout(() => {\r\n                this.setState({ isHighlighted: false });\r\n            }, 5000);\r\n        } else if (this.props.selection.selectedLineContainerTitlesNoFocus.indexOf(this.props.title) > -1) {\r\n            setTimeout(() => {\r\n                this.props.selection!.selectedLineContainerTitlesNoFocus = [];\r\n            });\r\n            this.setState({ isExpanded: true, isHighlighted: false });\r\n        } else {\r\n            this.setState({ isExpanded: false });\r\n        }\r\n    }\r\n\r\n    override render() {\r\n        if (!this.state.isExpanded) {\r\n            return (\r\n                <div className=\"paneContainer\">\r\n                    <div className=\"paneContainer-content\">{this.renderHeader()}</div>\r\n                </div>\r\n            );\r\n        }\r\n\r\n        return (\r\n            <div className=\"paneContainer\">\r\n                <div className=\"paneContainer-content\">\r\n                    {this.renderHeader()}\r\n                    <div className=\"paneList\">{this.props.children}</div>\r\n                </div>\r\n                <div className={\"paneContainer-highlight-border\" + (!this.state.isHighlighted ? \" transparent\" : \"\")}></div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"lineContainerComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/lineContainerComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { DataStorage } from \"core/Misc/dataStorage\";\r\nimport type { ISelectedLineContainer } from \"./iSelectedLineContainer\";\r\nimport downArrow from \"./downArrow.svg\";\r\nimport { AccordionSection } from \"../fluent/primitives/accordion\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\ninterface ILineContainerComponentProps {\r\n    selection?: ISelectedLineContainer;\r\n    title: string;\r\n    children: any[] | any;\r\n    closed?: boolean;\r\n}\r\n\r\nexport class LineContainerComponent extends React.Component<ILineContainerComponentProps, { isExpanded: boolean; isHighlighted: boolean }> {\r\n    constructor(props: ILineContainerComponentProps) {\r\n        super(props);\r\n\r\n        const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);\r\n\r\n        this.state = { isExpanded: initialState, isHighlighted: false };\r\n    }\r\n\r\n    switchExpandedState(): void {\r\n        const newState = !this.state.isExpanded;\r\n\r\n        DataStorage.WriteBoolean(this.props.title, newState);\r\n\r\n        this.setState({ isExpanded: newState });\r\n    }\r\n\r\n    renderHeader() {\r\n        const className = this.state.isExpanded ? \"collapse\" : \"collapse closed\";\r\n\r\n        return (\r\n            <div className=\"header\" onClick={() => this.switchExpandedState()}>\r\n                <div className=\"title\">{this.props.title}</div>\r\n                <div className={className}>\r\n                    <img className=\"img\" title={this.props.title} src={downArrow} />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    override componentDidMount() {\r\n        if (!this.props.selection) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.selection.selectedLineContainerTitles.length === 0 && this.props.selection.selectedLineContainerTitlesNoFocus.length === 0) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.selection.selectedLineContainerTitles.indexOf(this.props.title) > -1) {\r\n            setTimeout(() => {\r\n                this.props.selection!.selectedLineContainerTitles = [];\r\n            });\r\n\r\n            this.setState({ isExpanded: true, isHighlighted: true });\r\n\r\n            window.setTimeout(() => {\r\n                this.setState({ isHighlighted: false });\r\n            }, 5000);\r\n        } else if (this.props.selection.selectedLineContainerTitlesNoFocus.indexOf(this.props.title) > -1) {\r\n            setTimeout(() => {\r\n                this.props.selection!.selectedLineContainerTitlesNoFocus = [];\r\n            });\r\n            this.setState({ isExpanded: true, isHighlighted: false });\r\n        } else {\r\n            this.setState({ isExpanded: false });\r\n        }\r\n    }\r\n\r\n    renderFluent() {\r\n        return <AccordionSection title={this.props.title}>{this.props.children}</AccordionSection>;\r\n    }\r\n\r\n    renderOriginal() {\r\n        if (!this.state.isExpanded) {\r\n            return (\r\n                <div className=\"paneContainer\">\r\n                    <div className=\"paneContainer-content\">{this.renderHeader()}</div>\r\n                </div>\r\n            );\r\n        }\r\n\r\n        return (\r\n            <div className=\"paneContainer\">\r\n                <div className=\"paneContainer-content\">\r\n                    {this.renderHeader()}\r\n                    <div className=\"paneList\">{this.props.children}</div>\r\n                </div>\r\n                <div className={\"paneContainer-highlight-border\" + (!this.state.isHighlighted ? \" transparent\" : \"\")}></div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/lines/lineWithFileButtonComponent.d.ts

@@ -16,6 +16,8 @@ export declare class LineWithFileButtonComponent extends React.Component<ILineWi
     constructor(props: ILineWithFileButtonComponentProps);
     onChange(evt: any): void;
     switchExpandedState(): void;
+    renderFluent(): import("react/jsx-runtime").JSX.Element;
+    renderOriginal(): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/lines/lineWithFileButtonComponent.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { DataStorage } from "@babylonjs/core/Misc/dataStorage.js";
+import { FileUploadLine } from "../fluent/hoc/fileUploadLine.js";
+import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
 export class LineWithFileButtonComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -22,8 +24,20 @@ export class LineWithFileButtonComponent extends React.Component {
         DataStorage.WriteBoolean(this.props.title, newState);
         this.setState({ isExpanded: newState });
     }
-    render() {
+    renderFluent() {
+        return (_jsx(FileUploadLine, { label: this.props.title ?? "file-upload", accept: this.props.accept, onClick: (files) => {
+                if (files && files.length) {
+                    for (const file of files) {
+                        this.props.onIconClick(file);
+                    }
+                }
+            } }));
+    }
+    renderOriginal() {
         return (_jsxs("div", { className: "nonDraggableLine withButton", children: [this.props.label, _jsx("div", { className: "icon", title: this.props.title, children: _jsx("img", { className: "img", src: this.props.iconImage }) }), _jsxs("div", { className: "buttonLine", title: this.props.title, children: [_jsx("label", { htmlFor: this.props.uploadName ? this.props.uploadName : "file-upload", className: "file-upload" }), _jsx("input", { ref: this._uploadRef, id: this.props.uploadName ? this.props.uploadName : "file-upload", type: "file", multiple: this.props.multiple, accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] })] }));
     }
+    render() {
+        return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal()) });
+    }
 }
 //# sourceMappingURL=lineWithFileButtonComponent.js.map

package/lines/lineWithFileButtonComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"lineWithFileButtonComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/lineWithFileButtonComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,4CAA8B;AAapD,MAAM,OAAO,2BAA4B,SAAQ,KAAK,CAAC,SAAqE;IAExH,YAAY,KAAwC;QAChD,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,MAAM,YAAY,GAAG,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACnF,IAAI,CAAC,KAAK,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC;QAC1C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IACxC,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YACjC,CAAC;QACL,CAAC;QACD,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,mBAAmB;QACf,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;QACxC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QACrD,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC5C,CAAC;IAEQ,MAAM;QACX,OAAO,CACH,eAAK,SAAS,EAAC,6BAA6B,aACvC,IAAI,CAAC,KAAK,CAAC,KAAK,EACjB,cAAK,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,YACzC,cAAK,SAAS,EAAC,KAAK,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAI,GAChD,EACN,eAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,aAC/C,gBAAO,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,EAAE,SAAS,EAAC,aAAa,GAAG,EACzG,gBACI,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,EACjE,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GACvC,IACA,IACJ,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { DataStorage } from \"core/Misc/dataStorage\";\r\n\r\ninterface ILineWithFileButtonComponentProps {\r\n    title: string;\r\n    closed?: boolean;\r\n    multiple?: boolean;\r\n    label: string;\r\n    iconImage: any;\r\n    onIconClick: (file: File) => void;\r\n    accept: string;\r\n    uploadName?: string;\r\n}\r\n\r\nexport class LineWithFileButtonComponent extends React.Component<ILineWithFileButtonComponentProps, { isExpanded: boolean }> {\r\n    private _uploadRef: React.RefObject<HTMLInputElement>;\r\n    constructor(props: ILineWithFileButtonComponentProps) {\r\n        super(props);\r\n\r\n        const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);\r\n        this.state = { isExpanded: initialState };\r\n        this._uploadRef = React.createRef();\r\n    }\r\n\r\n    onChange(evt: any) {\r\n        const files: File[] = evt.target.files;\r\n        if (files && files.length) {\r\n            for (const file of files) {\r\n                this.props.onIconClick(file);\r\n            }\r\n        }\r\n        evt.target.value = \"\";\r\n    }\r\n\r\n    switchExpandedState(): void {\r\n        const newState = !this.state.isExpanded;\r\n        DataStorage.WriteBoolean(this.props.title, newState);\r\n        this.setState({ isExpanded: newState });\r\n    }\r\n\r\n    override render() {\r\n        return (\r\n            <div className=\"nonDraggableLine withButton\">\r\n                {this.props.label}\r\n                <div className=\"icon\" title={this.props.title}>\r\n                    <img className=\"img\" src={this.props.iconImage} />\r\n                </div>\r\n                <div className=\"buttonLine\" title={this.props.title}>\r\n                    <label htmlFor={this.props.uploadName ? this.props.uploadName : \"file-upload\"} className=\"file-upload\" />\r\n                    <input\r\n                        ref={this._uploadRef}\r\n                        id={this.props.uploadName ? this.props.uploadName : \"file-upload\"}\r\n                        type=\"file\"\r\n                        multiple={this.props.multiple}\r\n                        accept={this.props.accept}\r\n                        onChange={(evt) => this.onChange(evt)}\r\n                    />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"lineWithFileButtonComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/lineWithFileButtonComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { DataStorage } from \"core/Misc/dataStorage\";\r\nimport { FileUploadLine } from \"../fluent/hoc/fileUploadLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\ninterface ILineWithFileButtonComponentProps {\r\n    title: string;\r\n    closed?: boolean;\r\n    multiple?: boolean;\r\n    label: string;\r\n    iconImage: any;\r\n    onIconClick: (file: File) => void;\r\n    accept: string;\r\n    uploadName?: string;\r\n}\r\n\r\nexport class LineWithFileButtonComponent extends React.Component<ILineWithFileButtonComponentProps, { isExpanded: boolean }> {\r\n    private _uploadRef: React.RefObject<HTMLInputElement>;\r\n    constructor(props: ILineWithFileButtonComponentProps) {\r\n        super(props);\r\n\r\n        const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);\r\n        this.state = { isExpanded: initialState };\r\n        this._uploadRef = React.createRef();\r\n    }\r\n\r\n    onChange(evt: any) {\r\n        const files: File[] = evt.target.files;\r\n        if (files && files.length) {\r\n            for (const file of files) {\r\n                this.props.onIconClick(file);\r\n            }\r\n        }\r\n        evt.target.value = \"\";\r\n    }\r\n\r\n    switchExpandedState(): void {\r\n        const newState = !this.state.isExpanded;\r\n        DataStorage.WriteBoolean(this.props.title, newState);\r\n        this.setState({ isExpanded: newState });\r\n    }\r\n\r\n    renderFluent() {\r\n        return (\r\n            <FileUploadLine\r\n                label={this.props.title ?? \"file-upload\"}\r\n                accept={this.props.accept}\r\n                onClick={(files) => {\r\n                    if (files && files.length) {\r\n                        for (const file of files) {\r\n                            this.props.onIconClick(file);\r\n                        }\r\n                    }\r\n                }}\r\n            />\r\n        );\r\n    }\r\n\r\n    renderOriginal() {\r\n        return (\r\n            <div className=\"nonDraggableLine withButton\">\r\n                {this.props.label}\r\n                <div className=\"icon\" title={this.props.title}>\r\n                    <img className=\"img\" src={this.props.iconImage} />\r\n                </div>\r\n                <div className=\"buttonLine\" title={this.props.title}>\r\n                    <label htmlFor={this.props.uploadName ? this.props.uploadName : \"file-upload\"} className=\"file-upload\" />\r\n                    <input\r\n                        ref={this._uploadRef}\r\n                        id={this.props.uploadName ? this.props.uploadName : \"file-upload\"}\r\n                        type=\"file\"\r\n                        multiple={this.props.multiple}\r\n                        accept={this.props.accept}\r\n                        onChange={(evt) => this.onChange(evt)}\r\n                    />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/lines/textLineComponent.js

@@ -5,7 +5,8 @@ import { copyCommandToClipboard } from "../copyCommandToClipboard.js";
 import { MergeClassNames } from "../styleHelper.js";
 import { TextPropertyLine } from "../fluent/hoc/textPropertyLine.js";
 import { LinkPropertyLine } from "../fluent/hoc/linkPropertyLine.js";
-import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
+import { ReadonlyBooleanLine } from "../fluent/hoc/readonlyBooleanLine.js";
 export class TextLineComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -57,6 +58,9 @@ export class TextLineComponent extends React.Component {
         if (isLink) {
             return _jsx(LinkPropertyLine, { ...sharedProps, value: this.props.url ? "doc" : this.props.value || "no name", url: this.props.url, onLink: this.props.onLink });
         }
+        else if (this.props.value === "Yes" || this.props.value === "No") {
+            return _jsx(ReadonlyBooleanLine, { label: this.props.label || "", value: this.props.value === "Yes" });
+        }
         else {
             return _jsx(TextPropertyLine, { ...sharedProps, value: this.props.value || "" });
         }

package/lines/textLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"textLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/textLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { copyCommandToClipboard } from \"../copyCommandToClipboard\";\r\nimport { MergeClassNames } from \"../styleHelper\";\r\nimport { TextPropertyLine } from \"../fluent/hoc/textPropertyLine\";\r\nimport { LinkPropertyLine } from \"../fluent/hoc/linkPropertyLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\ninterface ITextLineComponentProps {\r\n    label?: string;\r\n    value?: string;\r\n    color?: string;\r\n    underline?: boolean;\r\n    onLink?: () => void;\r\n    url?: string;\r\n    ignoreValue?: boolean;\r\n    additionalClass?: string;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    tooltip?: string;\r\n    onCopy?: true | (() => string);\r\n}\r\n\r\nexport class TextLineComponent extends React.Component<ITextLineComponentProps> {\r\n    constructor(props: ITextLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    onLink() {\r\n        if (this.props.url) {\r\n            window.open(this.props.url, \"_blank\");\r\n            return;\r\n        }\r\n        if (!this.props.onLink) {\r\n            return;\r\n        }\r\n\r\n        this.props.onLink();\r\n    }\r\n\r\n    copyFn() {\r\n        const onCopy = this.props.onCopy;\r\n        const val = this.props.value;\r\n        if (onCopy === true && val !== undefined) {\r\n            return () => val;\r\n        } else if (typeof onCopy === \"function\") {\r\n            return onCopy;\r\n        }\r\n        return undefined;\r\n    }\r\n\r\n    renderContent(isLink: boolean, tooltip: string) {\r\n        if (this.props.ignoreValue) {\r\n            return null;\r\n        }\r\n\r\n        if (isLink) {\r\n            return (\r\n                <div className=\"link-value\" title={tooltip} onClick={() => this.onLink()}>\r\n                    {this.props.url ? \"doc\" : this.props.value || \"no name\"}\r\n                </div>\r\n            );\r\n        }\r\n        return (\r\n            <div className=\"value\" title={tooltip} style={{ color: this.props.color ? this.props.color : \"\" }}>\r\n                {this.props.value || \"no name\"}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    renderOriginal(isLink: boolean, tooltip: string) {\r\n        return (\r\n            <div className={MergeClassNames([\"textLine\", [\"underline\", this.props.underline], this.props.additionalClass, [\"icon\", this.props.onCopy]])}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.tooltip ?? this.props.label ?? \"\"}>\r\n                    {this.props.label ?? \"\"}\r\n                </div>\r\n                {this.renderContent(isLink, tooltip)}\r\n                {this.props.onCopy && (\r\n                    <div\r\n                        className=\"copy hoverIcon\"\r\n                        onClick={() => {\r\n                            const copyFn = this.copyFn();\r\n                            if (copyFn) {\r\n                                copyCommandToClipboard(copyFn());\r\n                            }\r\n                        }}\r\n                        title=\"Copy to clipboard\"\r\n                    >\r\n                        <img src={copyIcon} alt=\"Copy\" />\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    renderFluent(isLink: boolean, tooltip: string) {\r\n        const sharedProps = {\r\n            tooltip,\r\n            label: this.props.label || \"\",\r\n            onCopy: this.copyFn(),\r\n        };\r\n        if (isLink) {\r\n            return <LinkPropertyLine {...sharedProps} value={this.props.url ? \"doc\" : this.props.value || \"no name\"} url={this.props.url} onLink={this.props.onLink} />;\r\n        } else {\r\n            return <TextPropertyLine {...sharedProps} value={this.props.value || \"\"} />;\r\n        }\r\n    }\r\n\r\n    override render() {\r\n        const tooltip = this.props.tooltip ?? this.props.value ?? this.props.label ?? \"\";\r\n        const isLink = this.props.onLink !== undefined || this.props.url !== undefined;\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent(isLink, tooltip) : this.renderOriginal(isLink, tooltip))}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"textLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/textLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { copyCommandToClipboard } from \"../copyCommandToClipboard\";\r\nimport { MergeClassNames } from \"../styleHelper\";\r\nimport { TextPropertyLine } from \"../fluent/hoc/textPropertyLine\";\r\nimport { LinkPropertyLine } from \"../fluent/hoc/linkPropertyLine\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\nimport { ReadonlyBooleanLine } from \"../fluent/hoc/readonlyBooleanLine\";\r\n\r\ninterface ITextLineComponentProps {\r\n    label?: string;\r\n    value?: string;\r\n    color?: string;\r\n    underline?: boolean;\r\n    onLink?: () => void;\r\n    url?: string;\r\n    ignoreValue?: boolean;\r\n    additionalClass?: string;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    tooltip?: string;\r\n    onCopy?: true | (() => string);\r\n}\r\n\r\nexport class TextLineComponent extends React.Component<ITextLineComponentProps> {\r\n    constructor(props: ITextLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    onLink() {\r\n        if (this.props.url) {\r\n            window.open(this.props.url, \"_blank\");\r\n            return;\r\n        }\r\n        if (!this.props.onLink) {\r\n            return;\r\n        }\r\n\r\n        this.props.onLink();\r\n    }\r\n\r\n    copyFn() {\r\n        const onCopy = this.props.onCopy;\r\n        const val = this.props.value;\r\n        if (onCopy === true && val !== undefined) {\r\n            return () => val;\r\n        } else if (typeof onCopy === \"function\") {\r\n            return onCopy;\r\n        }\r\n        return undefined;\r\n    }\r\n\r\n    renderContent(isLink: boolean, tooltip: string) {\r\n        if (this.props.ignoreValue) {\r\n            return null;\r\n        }\r\n\r\n        if (isLink) {\r\n            return (\r\n                <div className=\"link-value\" title={tooltip} onClick={() => this.onLink()}>\r\n                    {this.props.url ? \"doc\" : this.props.value || \"no name\"}\r\n                </div>\r\n            );\r\n        }\r\n        return (\r\n            <div className=\"value\" title={tooltip} style={{ color: this.props.color ? this.props.color : \"\" }}>\r\n                {this.props.value || \"no name\"}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    renderOriginal(isLink: boolean, tooltip: string) {\r\n        return (\r\n            <div className={MergeClassNames([\"textLine\", [\"underline\", this.props.underline], this.props.additionalClass, [\"icon\", this.props.onCopy]])}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.tooltip ?? this.props.label ?? \"\"}>\r\n                    {this.props.label ?? \"\"}\r\n                </div>\r\n                {this.renderContent(isLink, tooltip)}\r\n                {this.props.onCopy && (\r\n                    <div\r\n                        className=\"copy hoverIcon\"\r\n                        onClick={() => {\r\n                            const copyFn = this.copyFn();\r\n                            if (copyFn) {\r\n                                copyCommandToClipboard(copyFn());\r\n                            }\r\n                        }}\r\n                        title=\"Copy to clipboard\"\r\n                    >\r\n                        <img src={copyIcon} alt=\"Copy\" />\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    renderFluent(isLink: boolean, tooltip: string) {\r\n        const sharedProps = {\r\n            tooltip,\r\n            label: this.props.label || \"\",\r\n            onCopy: this.copyFn(),\r\n        };\r\n        if (isLink) {\r\n            return <LinkPropertyLine {...sharedProps} value={this.props.url ? \"doc\" : this.props.value || \"no name\"} url={this.props.url} onLink={this.props.onLink} />;\r\n        } else if (this.props.value === \"Yes\" || this.props.value === \"No\") {\r\n            return <ReadonlyBooleanLine label={this.props.label || \"\"} value={this.props.value === \"Yes\"} />;\r\n        } else {\r\n            return <TextPropertyLine {...sharedProps} value={this.props.value || \"\"} />;\r\n        }\r\n    }\r\n\r\n    override render() {\r\n        const tooltip = this.props.tooltip ?? this.props.value ?? this.props.label ?? \"\";\r\n        const isLink = this.props.onLink !== undefined || this.props.url !== undefined;\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent(isLink, tooltip) : this.renderOriginal(isLink, tooltip))}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs/shared-ui-components",
-    "version": "8.15.0",
+    "version": "8.16.0",
     "main": "index.js",
     "module": "index.js",
     "types": "index.d.ts",