@babylonjs/shared-ui-components 8.41.2 → 8.43.0

package/fluent/hoc/childWindow.d.ts

@@ -0,0 +1,61 @@
+import type { FunctionComponent, PropsWithChildren, Ref } from "react";
+export type ChildWindowOptions = {
+    /**
+     * The default width of the child window in pixels.
+     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.
+     */
+    defaultWidth?: number;
+    /**
+     * The default height of the child window in pixels.
+     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.
+     */
+    defaultHeight?: number;
+    /**
+     * The default left position of the child window in pixels.
+     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.
+     */
+    defaultLeft?: number;
+    /**
+     * The default top position of the child window in pixels.
+     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.
+     */
+    defaultTop?: number;
+    /**
+     * The title of the child window.
+     * @remarks If not provided, the id will be used instead (if any).
+     */
+    title?: string;
+};
+export type ChildWindow = {
+    /**
+     * Opens the child window.
+     * @param options Options for opening the child window.
+     */
+    open: (options?: ChildWindowOptions) => void;
+    /**
+     * Closes the child window.
+     */
+    close: () => void;
+};
+export type ChildWindowProps = {
+    /**
+     * An optional unique identity for the child window.
+     * @remarks If provided, the child window's bounds will be saved/restored using this identity.
+     */
+    id?: string;
+    /**
+     * Called when the open state of the child window changes.
+     * @param isOpen Whether the child window is open.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * A ref that exposes the ChildWindow imperative API.
+     */
+    imperativeRef?: Ref<ChildWindow>;
+};
+/**
+ * Allows displaying a child window that can contain child components.
+ * @param props Props for the child window.
+ * @returns The child window component.
+ */
+export declare const ChildWindow: FunctionComponent<PropsWithChildren<ChildWindowProps>>;

package/fluent/hoc/childWindow.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createDOMRenderer, FluentProvider, makeStyles, Portal, RendererProvider } from "@fluentui/react-components";
+import { useCallback, useEffect, useImperativeHandle, useState } from "react";
+import { Logger } from "@babylonjs/core/Misc/logger.js";
+function ToFeaturesString(options) {
+    const { defaultWidth, defaultHeight, defaultLeft, defaultTop } = options;
+    const features = [];
+    if (defaultWidth !== undefined) {
+        features.push({ key: "width", value: defaultWidth.toString() });
+    }
+    if (defaultHeight !== undefined) {
+        features.push({ key: "height", value: defaultHeight.toString() });
+    }
+    if (defaultLeft !== undefined) {
+        features.push({ key: "left", value: defaultLeft.toString() });
+    }
+    if (defaultTop !== undefined) {
+        features.push({ key: "top", value: defaultTop.toString() });
+    }
+    features.push({ key: "location", value: "no" });
+    return features.map((feature) => `${feature.key}=${feature.value}`).join(",");
+}
+const useStyles = makeStyles({
+    container: {
+        display: "flex",
+        flexGrow: 1,
+        flexDirection: "column",
+        overflow: "hidden",
+    },
+});
+/**
+ * Allows displaying a child window that can contain child components.
+ * @param props Props for the child window.
+ * @returns The child window component.
+ */
+export const ChildWindow = (props) => {
+    const { id, children, onOpenChange, imperativeRef: imperativeRef } = props;
+    const classes = useStyles();
+    const [windowState, setWindowState] = useState();
+    const [childWindow, setChildWindow] = useState();
+    const storageKey = id ? `Babylon/Settings/ChildWindow/${id}/Bounds` : null;
+    // This function is just for creating the child window itself. It is a function because
+    // it must be called synchronously in response to a user interaction (e.g. button click),
+    // otherwise the browser will block it as a scripted popup.
+    const createWindow = useCallback((options = {}) => {
+        if (storageKey) {
+            // If we are persisting window bounds, but the window is already open, just use the existing bounds.
+            // Otherwise, try to load bounds from storage.
+            if (childWindow) {
+                options.defaultLeft = childWindow.screenX;
+                options.defaultTop = childWindow.screenY;
+                options.defaultWidth = childWindow.innerWidth;
+                options.defaultHeight = childWindow.innerHeight;
+            }
+            else {
+                const savedBounds = localStorage.getItem(storageKey);
+                if (savedBounds) {
+                    try {
+                        const bounds = JSON.parse(savedBounds);
+                        options.defaultLeft = bounds.left;
+                        options.defaultTop = bounds.top;
+                        options.defaultWidth = bounds.width;
+                        options.defaultHeight = bounds.height;
+                    }
+                    catch {
+                        Logger.Warn(`Could not parse saved bounds for child window with key ${storageKey}`);
+                    }
+                }
+            }
+        }
+        // Half width by default.
+        if (!options.defaultWidth) {
+            options.defaultWidth = window.innerWidth * (2 / 3);
+        }
+        // Half height by default.
+        if (!options.defaultHeight) {
+            options.defaultHeight = window.innerHeight * (2 / 3);
+        }
+        // Horizontally centered by default.
+        if (!options.defaultLeft) {
+            options.defaultLeft = window.screenX + (window.innerWidth - options.defaultWidth) * (2 / 3);
+        }
+        // Vertically centered by default.
+        if (!options.defaultTop) {
+            options.defaultTop = window.screenY + (window.innerHeight - options.defaultHeight) * (2 / 3);
+        }
+        // Try to create the child window (can be null if popups are blocked).
+        const newChildWindow = window.open("", "", ToFeaturesString(options));
+        if (newChildWindow) {
+            // Set the title if provided.
+            newChildWindow.document.title = options.title ?? id ?? "";
+            // Set the child window state.
+            setChildWindow((current) => {
+                // But first close any existing child window.
+                current?.close();
+                return newChildWindow;
+            });
+        }
+    }, [childWindow, storageKey]);
+    useImperativeHandle(imperativeRef, () => {
+        return {
+            open: createWindow,
+            close: () => setChildWindow(undefined),
+        };
+    }, [createWindow]);
+    // This side effect runs any time the child window instance changes. It does the rest of the child window
+    // setup work, including creating resources and state needed to properly render the content of the child window.
+    useEffect(() => {
+        const disposeActions = [];
+        if (childWindow) {
+            const body = childWindow.document.body;
+            body.style.width = "100%";
+            body.style.height = "100%";
+            body.style.margin = "0";
+            body.style.padding = "0";
+            body.style.display = "flex";
+            body.style.overflow = "hidden";
+            const applyWindowState = () => {
+                // Setup the window state, including creating a Fluent/Griffel "renderer" for managing runtime styles/classes in the child window.
+                setWindowState({ mountNode: body, renderer: createDOMRenderer(childWindow.document) });
+                onOpenChange?.(true);
+            };
+            // Once the child window document is ready, setup the window state which will trigger another effect that renders into the child window.
+            if (childWindow.document.readyState === "complete") {
+                applyWindowState();
+            }
+            else {
+                const onChildWindowLoad = () => {
+                    applyWindowState();
+                };
+                childWindow.addEventListener("load", onChildWindowLoad, { once: true });
+                disposeActions.push(() => childWindow.removeEventListener("load", onChildWindowLoad));
+            }
+            // When the child window is closed for any reason, transition back to a closed state.
+            const onChildWindowUnload = () => {
+                setWindowState(undefined);
+                setChildWindow(undefined);
+                onOpenChange?.(false);
+            };
+            childWindow.addEventListener("unload", onChildWindowUnload, { once: true });
+            disposeActions.push(() => childWindow.removeEventListener("unload", onChildWindowUnload));
+            // If the main window closes, close any open child windows as well (don't leave them orphaned).
+            const onParentWindowUnload = () => {
+                childWindow.close();
+            };
+            window.addEventListener("unload", onParentWindowUnload, { once: true });
+            disposeActions.push(() => window.removeEventListener("unload", onParentWindowUnload));
+            // On dispose, close the child window.
+            disposeActions.push(() => childWindow.close());
+            // On dispose, save the window bounds.
+            disposeActions.push(() => {
+                if (storageKey) {
+                    localStorage.setItem(storageKey, JSON.stringify({
+                        left: childWindow.screenX,
+                        top: childWindow.screenY,
+                        width: childWindow.innerWidth,
+                        height: childWindow.innerHeight,
+                    }));
+                }
+            });
+        }
+        return () => {
+            disposeActions.reverse().forEach((dispose) => dispose());
+        };
+    }, [childWindow]);
+    if (!windowState) {
+        return null;
+    }
+    const { mountNode, renderer } = windowState;
+    return (
+    // Portal targets the body of the child window.
+    _jsx(Portal, { mountNode: mountNode, children: _jsx(RendererProvider, { renderer: renderer, targetDocument: mountNode.ownerDocument, children: _jsx(FluentProvider, { className: classes.container, applyStylesToPortals: false, targetDocument: mountNode.ownerDocument, children: children }) }) }));
+};
+//# sourceMappingURL=childWindow.js.map

package/fluent/hoc/childWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"childWindow.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/childWindow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { GriffelRenderer } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, PropsWithChildren, Ref } from \"react\";\r\n\r\nimport { createDOMRenderer, FluentProvider, makeStyles, Portal, RendererProvider } from \"@fluentui/react-components\";\r\nimport { useCallback, useEffect, useImperativeHandle, useState } from \"react\";\r\n\r\nimport { Logger } from \"core/Misc/logger\";\r\n\r\nfunction ToFeaturesString(options: ChildWindowOptions) {\r\n    const { defaultWidth, defaultHeight, defaultLeft, defaultTop } = options;\r\n\r\n    const features: { key: string; value: string }[] = [];\r\n\r\n    if (defaultWidth !== undefined) {\r\n        features.push({ key: \"width\", value: defaultWidth.toString() });\r\n    }\r\n    if (defaultHeight !== undefined) {\r\n        features.push({ key: \"height\", value: defaultHeight.toString() });\r\n    }\r\n    if (defaultLeft !== undefined) {\r\n        features.push({ key: \"left\", value: defaultLeft.toString() });\r\n    }\r\n    if (defaultTop !== undefined) {\r\n        features.push({ key: \"top\", value: defaultTop.toString() });\r\n    }\r\n    features.push({ key: \"location\", value: \"no\" });\r\n\r\n    return features.map((feature) => `${feature.key}=${feature.value}`).join(\",\");\r\n}\r\n\r\nconst useStyles = makeStyles({\r\n    container: {\r\n        display: \"flex\",\r\n        flexGrow: 1,\r\n        flexDirection: \"column\",\r\n        overflow: \"hidden\",\r\n    },\r\n});\r\n\r\nexport type ChildWindowOptions = {\r\n    /**\r\n     * The default width of the child window in pixels.\r\n     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.\r\n     */\r\n    defaultWidth?: number;\r\n\r\n    /**\r\n     * The default height of the child window in pixels.\r\n     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.\r\n     */\r\n    defaultHeight?: number;\r\n\r\n    /**\r\n     * The default left position of the child window in pixels.\r\n     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.\r\n     */\r\n    defaultLeft?: number;\r\n\r\n    /**\r\n     * The default top position of the child window in pixels.\r\n     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.\r\n     */\r\n    defaultTop?: number;\r\n\r\n    /**\r\n     * The title of the child window.\r\n     * @remarks If not provided, the id will be used instead (if any).\r\n     */\r\n    title?: string;\r\n};\r\n\r\nexport type ChildWindow = {\r\n    /**\r\n     * Opens the child window.\r\n     * @param options Options for opening the child window.\r\n     */\r\n    open: (options?: ChildWindowOptions) => void;\r\n\r\n    /**\r\n     * Closes the child window.\r\n     */\r\n    close: () => void;\r\n};\r\n\r\nexport type ChildWindowProps = {\r\n    /**\r\n     * An optional unique identity for the child window.\r\n     * @remarks If provided, the child window's bounds will be saved/restored using this identity.\r\n     */\r\n    id?: string;\r\n\r\n    /**\r\n     * Called when the open state of the child window changes.\r\n     * @param isOpen Whether the child window is open.\r\n     */\r\n    onOpenChange?: (isOpen: boolean) => void;\r\n\r\n    /**\r\n     * A ref that exposes the ChildWindow imperative API.\r\n     */\r\n    imperativeRef?: Ref<ChildWindow>;\r\n};\r\n\r\n/**\r\n * Allows displaying a child window that can contain child components.\r\n * @param props Props for the child window.\r\n * @returns The child window component.\r\n */\r\nexport const ChildWindow: FunctionComponent<PropsWithChildren<ChildWindowProps>> = (props) => {\r\n    const { id, children, onOpenChange, imperativeRef: imperativeRef } = props;\r\n    const classes = useStyles();\r\n\r\n    const [windowState, setWindowState] = useState<{ mountNode: HTMLElement; renderer: GriffelRenderer }>();\r\n    const [childWindow, setChildWindow] = useState<Window>();\r\n\r\n    const storageKey = id ? `Babylon/Settings/ChildWindow/${id}/Bounds` : null;\r\n\r\n    // This function is just for creating the child window itself. It is a function because\r\n    // it must be called synchronously in response to a user interaction (e.g. button click),\r\n    // otherwise the browser will block it as a scripted popup.\r\n    const createWindow = useCallback(\r\n        (options: ChildWindowOptions = {}) => {\r\n            if (storageKey) {\r\n                // If we are persisting window bounds, but the window is already open, just use the existing bounds.\r\n                // Otherwise, try to load bounds from storage.\r\n                if (childWindow) {\r\n                    options.defaultLeft = childWindow.screenX;\r\n                    options.defaultTop = childWindow.screenY;\r\n                    options.defaultWidth = childWindow.innerWidth;\r\n                    options.defaultHeight = childWindow.innerHeight;\r\n                } else {\r\n                    const savedBounds = localStorage.getItem(storageKey);\r\n                    if (savedBounds) {\r\n                        try {\r\n                            const bounds = JSON.parse(savedBounds);\r\n                            options.defaultLeft = bounds.left;\r\n                            options.defaultTop = bounds.top;\r\n                            options.defaultWidth = bounds.width;\r\n                            options.defaultHeight = bounds.height;\r\n                        } catch {\r\n                            Logger.Warn(`Could not parse saved bounds for child window with key ${storageKey}`);\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Half width by default.\r\n            if (!options.defaultWidth) {\r\n                options.defaultWidth = window.innerWidth * (2 / 3);\r\n            }\r\n            // Half height by default.\r\n            if (!options.defaultHeight) {\r\n                options.defaultHeight = window.innerHeight * (2 / 3);\r\n            }\r\n            // Horizontally centered by default.\r\n            if (!options.defaultLeft) {\r\n                options.defaultLeft = window.screenX + (window.innerWidth - options.defaultWidth) * (2 / 3);\r\n            }\r\n            // Vertically centered by default.\r\n            if (!options.defaultTop) {\r\n                options.defaultTop = window.screenY + (window.innerHeight - options.defaultHeight) * (2 / 3);\r\n            }\r\n\r\n            // Try to create the child window (can be null if popups are blocked).\r\n            const newChildWindow = window.open(\"\", \"\", ToFeaturesString(options));\r\n            if (newChildWindow) {\r\n                // Set the title if provided.\r\n                newChildWindow.document.title = options.title ?? id ?? \"\";\r\n\r\n                // Set the child window state.\r\n                setChildWindow((current) => {\r\n                    // But first close any existing child window.\r\n                    current?.close();\r\n                    return newChildWindow;\r\n                });\r\n            }\r\n        },\r\n        [childWindow, storageKey]\r\n    );\r\n\r\n    useImperativeHandle(imperativeRef, () => {\r\n        return {\r\n            open: createWindow,\r\n            close: () => setChildWindow(undefined),\r\n        };\r\n    }, [createWindow]);\r\n\r\n    // This side effect runs any time the child window instance changes. It does the rest of the child window\r\n    // setup work, including creating resources and state needed to properly render the content of the child window.\r\n    useEffect(() => {\r\n        const disposeActions: (() => void)[] = [];\r\n\r\n        if (childWindow) {\r\n            const body = childWindow.document.body;\r\n            body.style.width = \"100%\";\r\n            body.style.height = \"100%\";\r\n            body.style.margin = \"0\";\r\n            body.style.padding = \"0\";\r\n            body.style.display = \"flex\";\r\n            body.style.overflow = \"hidden\";\r\n\r\n            const applyWindowState = () => {\r\n                // Setup the window state, including creating a Fluent/Griffel \"renderer\" for managing runtime styles/classes in the child window.\r\n                setWindowState({ mountNode: body, renderer: createDOMRenderer(childWindow.document) });\r\n                onOpenChange?.(true);\r\n            };\r\n\r\n            // Once the child window document is ready, setup the window state which will trigger another effect that renders into the child window.\r\n            if (childWindow.document.readyState === \"complete\") {\r\n                applyWindowState();\r\n            } else {\r\n                const onChildWindowLoad = () => {\r\n                    applyWindowState();\r\n                };\r\n                childWindow.addEventListener(\"load\", onChildWindowLoad, { once: true });\r\n                disposeActions.push(() => childWindow.removeEventListener(\"load\", onChildWindowLoad));\r\n            }\r\n\r\n            // When the child window is closed for any reason, transition back to a closed state.\r\n            const onChildWindowUnload = () => {\r\n                setWindowState(undefined);\r\n                setChildWindow(undefined);\r\n                onOpenChange?.(false);\r\n            };\r\n            childWindow.addEventListener(\"unload\", onChildWindowUnload, { once: true });\r\n            disposeActions.push(() => childWindow.removeEventListener(\"unload\", onChildWindowUnload));\r\n\r\n            // If the main window closes, close any open child windows as well (don't leave them orphaned).\r\n            const onParentWindowUnload = () => {\r\n                childWindow.close();\r\n            };\r\n            window.addEventListener(\"unload\", onParentWindowUnload, { once: true });\r\n            disposeActions.push(() => window.removeEventListener(\"unload\", onParentWindowUnload));\r\n\r\n            // On dispose, close the child window.\r\n            disposeActions.push(() => childWindow.close());\r\n\r\n            // On dispose, save the window bounds.\r\n            disposeActions.push(() => {\r\n                if (storageKey) {\r\n                    localStorage.setItem(\r\n                        storageKey,\r\n                        JSON.stringify({\r\n                            left: childWindow.screenX,\r\n                            top: childWindow.screenY,\r\n                            width: childWindow.innerWidth,\r\n                            height: childWindow.innerHeight,\r\n                        })\r\n                    );\r\n                }\r\n            });\r\n        }\r\n\r\n        return () => {\r\n            disposeActions.reverse().forEach((dispose) => dispose());\r\n        };\r\n    }, [childWindow]);\r\n\r\n    if (!windowState) {\r\n        return null;\r\n    }\r\n\r\n    const { mountNode, renderer } = windowState;\r\n\r\n    return (\r\n        // Portal targets the body of the child window.\r\n        <Portal mountNode={mountNode}>\r\n            {/* RenderProvider manages Fluent style/class state. */}\r\n            <RendererProvider renderer={renderer} targetDocument={mountNode.ownerDocument}>\r\n                {/* Fluent Provider is needed for managing other Fluent state and applying the current theme mode. */}\r\n                <FluentProvider className={classes.container} applyStylesToPortals={false} targetDocument={mountNode.ownerDocument}>\r\n                    {children}\r\n                </FluentProvider>\r\n            </RendererProvider>\r\n        </Portal>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/fileUploadLine.d.ts

@@ -5,5 +5,10 @@ type FileUploadLineProps = Omit<ButtonProps, "onClick" | "label"> & {
     label: string;
     accept: string;
 };
+/**
+ * A full-width line with an upload button.
+ * For just the button without the line wrapper, use UploadButton directly.
+ * @returns An UploadButton wrapped in a LineContainer
+ */
 export declare const FileUploadLine: FunctionComponent<FileUploadLineProps>;
 export {};

package/fluent/hoc/fileUploadLine.js

@@ -1,20 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { ButtonLine } from "./buttonLine.js";
-import { ArrowUploadRegular } from "@fluentui/react-icons";
-export const FileUploadLine = (props) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LineContainer } from "./propertyLines/propertyLine.js";
+import { UploadButton } from "../primitives/uploadButton.js";
+/**
+ * A full-width line with an upload button.
+ * For just the button without the line wrapper, use UploadButton directly.
+ * @returns An UploadButton wrapped in a LineContainer
+ */
+export const FileUploadLine = ({ onClick, label, accept, ...buttonProps }) => {
     FileUploadLine.displayName = "FileUploadLine";
-    const inputRef = useRef(null);
-    const handleButtonClick = () => {
-        inputRef.current?.click();
-    };
-    const handleChange = (evt) => {
-        const files = evt.target.files;
-        if (files && files.length) {
-            props.onClick(files);
-        }
-        evt.target.value = "";
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(ButtonLine, { onClick: handleButtonClick, icon: ArrowUploadRegular, label: props.label }), _jsx("input", { ref: inputRef, type: "file", accept: props.accept, style: { display: "none" }, onChange: handleChange })] }));
+    return (_jsx(LineContainer, { children: _jsx(UploadButton, { onUpload: onClick, accept: accept, label: label, ...buttonProps }) }));
 };
 //# sourceMappingURL=fileUploadLine.js.map

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;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAQ3D,MAAM,CAAC,MAAM,cAAc,GAA2C,CAAC,KAAK,EAAE,EAAE;IAC5E,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;IAC9C,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,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAe,EACnG,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 { ButtonProps } from \"../primitives/button\";\r\nimport { ArrowUploadRegular } from \"@fluentui/react-icons\";\r\n\r\ntype FileUploadLineProps = Omit<ButtonProps, \"onClick\" | \"label\"> & {\r\n    onClick: (files: FileList) => void;\r\n    label: string; // Require a label when button is the entire line (by default, label is optional on a button)\r\n    accept: string;\r\n};\r\n\r\nexport const FileUploadLine: FunctionComponent<FileUploadLineProps> = (props) => {\r\n    FileUploadLine.displayName = \"FileUploadLine\";\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} icon={ArrowUploadRegular} 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":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAS1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAA2C,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,EAAE,EAAE;IACjH,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;IAE9C,OAAO,CACH,KAAC,aAAa,cACV,KAAC,YAAY,IAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAM,WAAW,GAAI,GACtE,CACnB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { LineContainer } from \"./propertyLines/propertyLine\";\r\nimport { UploadButton } from \"../primitives/uploadButton\";\r\nimport type { ButtonProps } from \"../primitives/button\";\r\n\r\ntype FileUploadLineProps = Omit<ButtonProps, \"onClick\" | \"label\"> & {\r\n    onClick: (files: FileList) => void;\r\n    label: string; // Require a label when button is the entire line (by default, label is optional on an UploadButton\r\n    accept: string;\r\n};\r\n\r\n/**\r\n * A full-width line with an upload button.\r\n * For just the button without the line wrapper, use UploadButton directly.\r\n * @returns An UploadButton wrapped in a LineContainer\r\n */\r\nexport const FileUploadLine: FunctionComponent<FileUploadLineProps> = ({ onClick, label, accept, ...buttonProps }) => {\r\n    FileUploadLine.displayName = \"FileUploadLine\";\r\n\r\n    return (\r\n        <LineContainer>\r\n            <UploadButton onUpload={onClick} accept={accept} label={label} {...buttonProps} />\r\n        </LineContainer>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/comboBoxPropertyLine.d.ts

@@ -0,0 +1,11 @@
+import type { FunctionComponent } from "react";
+import type { PropertyLineProps } from "./propertyLine.js";
+import type { ComboBoxProps } from "../../primitives/comboBox.js";
+type ComboBoxPropertyLineProps = ComboBoxProps & PropertyLineProps<string>;
+/**
+ * A property line with a filterable ComboBox
+ * @param props - ComboBoxProps & PropertyLineProps
+ * @returns property-line wrapped ComboBox component
+ */
+export declare const ComboBoxPropertyLine: FunctionComponent<ComboBoxPropertyLineProps>;
+export {};

package/fluent/hoc/propertyLines/comboBoxPropertyLine.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PropertyLine } from "./propertyLine.js";
+import { ComboBox } from "../../primitives/comboBox.js";
+/**
+ * A property line with a filterable ComboBox
+ * @param props - ComboBoxProps & PropertyLineProps
+ * @returns property-line wrapped ComboBox component
+ */
+export const ComboBoxPropertyLine = (props) => {
+    ComboBoxPropertyLine.displayName = "ComboBoxPropertyLine";
+    return (_jsx(PropertyLine, { ...props, children: _jsx(ComboBox, { ...props }) }));
+};
+//# sourceMappingURL=comboBoxPropertyLine.js.map

package/fluent/hoc/propertyLines/comboBoxPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"comboBoxPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/comboBoxPropertyLine.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIrD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAiD,CAAC,KAAK,EAAE,EAAE;IACxF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC;IAE1D,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { ComboBoxProps } from \"../../primitives/comboBox\";\r\n\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport { ComboBox } from \"../../primitives/comboBox\";\r\n\r\ntype ComboBoxPropertyLineProps = ComboBoxProps & PropertyLineProps<string>;\r\n\r\n/**\r\n * A property line with a filterable ComboBox\r\n * @param props - ComboBoxProps & PropertyLineProps\r\n * @returns property-line wrapped ComboBox component\r\n */\r\nexport const ComboBoxPropertyLine: FunctionComponent<ComboBoxPropertyLineProps> = (props) => {\r\n    ComboBoxPropertyLine.displayName = \"ComboBoxPropertyLine\";\r\n\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <ComboBox {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/entitySelectorPropertyLine.d.ts

@@ -0,0 +1,15 @@
+import type { Node } from "@babylonjs/core/node.js";
+import type { Nullable } from "@babylonjs/core/types.js";
+import type { PropertyLineProps } from "./propertyLine.js";
+import type { NodeSelectorProps } from "../../primitives/nodeSelector.js";
+import type { MaterialSelectorProps } from "../../primitives/materialSelector.js";
+import type { TextureSelectorProps } from "../../primitives/textureSelector.js";
+import type { Material } from "@babylonjs/core/Materials/material.js";
+import type { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture.js";
+type NodeSelectorPropertyLineProps = PropertyLineProps<Nullable<Node>> & NodeSelectorProps;
+type MaterialSelectorPropertyLineProps = PropertyLineProps<Nullable<Material>> & MaterialSelectorProps;
+type TextureSelectorPropertyLineProps = PropertyLineProps<Nullable<BaseTexture>> & TextureSelectorProps;
+export declare const NodeSelectorPropertyLine: (props: NodeSelectorPropertyLineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MaterialSelectorPropertyLine: (props: MaterialSelectorPropertyLineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextureSelectorPropertyLine: (props: TextureSelectorPropertyLineProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/fluent/hoc/propertyLines/entitySelectorPropertyLine.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MaterialSelector } from "../../primitives/materialSelector.js";
+import { PropertyLine } from "./propertyLine.js";
+import { NodeSelector } from "../../primitives/nodeSelector.js";
+import { TextureSelector } from "../../primitives/textureSelector.js";
+export const NodeSelectorPropertyLine = (props) => _jsx(PropertyLine, { ...props, children: _jsx(NodeSelector, { ...props }) });
+export const MaterialSelectorPropertyLine = (props) => _jsx(PropertyLine, { ...props, children: _jsx(MaterialSelector, { ...props }) });
+export const TextureSelectorPropertyLine = (props) => _jsx(PropertyLine, { ...props, children: _jsx(TextureSelector, { ...props }) });
+//# sourceMappingURL=entitySelectorPropertyLine.js.map

package/fluent/hoc/propertyLines/entitySelectorPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entitySelectorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/entitySelectorPropertyLine.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAKnE,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAE,EAAE,CAAC,KAAC,YAAY,OAAK,KAAK,EAAE,QAAQ,EAAE,KAAC,YAAY,OAAK,KAAK,GAAI,GAAI,CAAC;AACrJ,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAE,EAAE,CAAC,KAAC,YAAY,OAAK,KAAK,EAAE,QAAQ,EAAE,KAAC,gBAAgB,OAAK,KAAK,GAAI,GAAI,CAAC;AACjK,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAAuC,EAAE,EAAE,CAAC,KAAC,YAAY,OAAK,KAAK,EAAE,QAAQ,EAAE,KAAC,eAAe,OAAK,KAAK,GAAI,GAAI,CAAC","sourcesContent":["import type { Node } from \"core/node\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { NodeSelectorProps } from \"../../primitives/nodeSelector\";\r\nimport type { MaterialSelectorProps } from \"../../primitives/materialSelector\";\r\nimport type { TextureSelectorProps } from \"../../primitives/textureSelector\";\r\nimport type { Material } from \"core/Materials/material\";\r\nimport type { BaseTexture } from \"core/Materials/Textures/baseTexture\";\r\n\r\nimport { MaterialSelector } from \"../../primitives/materialSelector\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport { NodeSelector } from \"../../primitives/nodeSelector\";\r\nimport { TextureSelector } from \"../../primitives/textureSelector\";\r\ntype NodeSelectorPropertyLineProps = PropertyLineProps<Nullable<Node>> & NodeSelectorProps;\r\ntype MaterialSelectorPropertyLineProps = PropertyLineProps<Nullable<Material>> & MaterialSelectorProps;\r\ntype TextureSelectorPropertyLineProps = PropertyLineProps<Nullable<BaseTexture>> & TextureSelectorProps;\r\n\r\nexport const NodeSelectorPropertyLine = (props: NodeSelectorPropertyLineProps) => <PropertyLine {...props} children={<NodeSelector {...props} />} />;\r\nexport const MaterialSelectorPropertyLine = (props: MaterialSelectorPropertyLineProps) => <PropertyLine {...props} children={<MaterialSelector {...props} />} />;\r\nexport const TextureSelectorPropertyLine = (props: TextureSelectorPropertyLineProps) => <PropertyLine {...props} children={<TextureSelector {...props} />} />;\r\n"]}

package/fluent/hoc/textureUpload.d.ts

@@ -0,0 +1,40 @@
+import type { FunctionComponent } from "react";
+import type { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture.js";
+import type { Scene } from "@babylonjs/core/scene.js";
+type TextureUploadUpdateProps = {
+    /**
+     * Existing texture to update via updateURL
+     */
+    texture: BaseTexture;
+    /**
+     * Callback after texture is updated
+     */
+    onChange?: (texture: BaseTexture) => void;
+    scene?: never;
+    cubeOnly?: never;
+};
+type TextureUploadCreateProps = {
+    /**
+     * The scene to create the texture in
+     */
+    scene: Scene;
+    /**
+     * Callback when a new texture is created
+     */
+    onChange: (texture: BaseTexture) => void;
+    /**
+     * Whether to create cube textures
+     */
+    cubeOnly?: boolean;
+    texture?: never;
+};
+type TextureUploadProps = TextureUploadUpdateProps | TextureUploadCreateProps;
+/**
+ * A button that uploads a file and either:
+ * - Updates an existing Texture or CubeTexture via updateURL (if texture prop is provided)
+ * - Creates a new Texture or CubeTexture (if scene/onChange props are provided)
+ * @param props TextureUploadProps
+ * @returns UploadButton component that handles texture upload
+ */
+export declare const TextureUpload: FunctionComponent<TextureUploadProps>;
+export {};

package/fluent/hoc/textureUpload.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
+import { CubeTexture } from "@babylonjs/core/Materials/Textures/cubeTexture.js";
+import { ReadFile } from "@babylonjs/core/Misc/fileTools.js";
+import { UploadButton } from "../primitives/uploadButton.js";
+/**
+ * A button that uploads a file and either:
+ * - Updates an existing Texture or CubeTexture via updateURL (if texture prop is provided)
+ * - Creates a new Texture or CubeTexture (if scene/onChange props are provided)
+ * @param props TextureUploadProps
+ * @returns UploadButton component that handles texture upload
+ */
+export const TextureUpload = (props) => {
+    TextureUpload.displayName = "TextureUpload";
+    const label = props.texture ? "Upload Texture" : undefined;
+    // TODO: This should probably be dynamically fetching a list of supported texture extensions
+    const accept = ".jpg, .png, .tga, .dds, .env, .exr";
+    const handleUpload = useCallback((files) => {
+        const file = files[0];
+        if (!file) {
+            return;
+        }
+        ReadFile(file, (data) => {
+            const blob = new Blob([data], { type: "octet/stream" });
+            // Update existing texture
+            if (props.texture) {
+                const { texture, onChange } = props;
+                const reader = new FileReader();
+                reader.readAsDataURL(blob);
+                reader.onloadend = () => {
+                    const base64data = reader.result;
+                    if (texture instanceof CubeTexture) {
+                        let extension = undefined;
+                        if (file.name.toLowerCase().indexOf(".dds") > 0) {
+                            extension = ".dds";
+                        }
+                        else if (file.name.toLowerCase().indexOf(".env") > 0) {
+                            extension = ".env";
+                        }
+                        texture.updateURL(base64data, extension, () => onChange?.(texture));
+                    }
+                    else if (texture instanceof Texture) {
+                        texture.updateURL(base64data, null, () => onChange?.(texture));
+                    }
+                };
+            }
+            else {
+                // Create new texture
+                const { scene, cubeOnly, onChange } = props;
+                const url = URL.createObjectURL(blob);
+                const extension = file.name.split(".").pop()?.toLowerCase();
+                // Revoke the object URL after texture loads to prevent memory leak
+                const revokeUrl = () => URL.revokeObjectURL(url);
+                const newTexture = cubeOnly
+                    ? new CubeTexture(url, scene, [], false, undefined, revokeUrl, undefined, undefined, false, extension ? "." + extension : undefined)
+                    : new Texture(url, scene, false, false, undefined, revokeUrl);
+                onChange(newTexture);
+            }
+        }, undefined, true);
+    }, [props]);
+    return _jsx(UploadButton, { onUpload: handleUpload, accept: accept, title: "Upload Texture", label: label });
+};
+//# sourceMappingURL=textureUpload.js.map

package/fluent/hoc/textureUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textureUpload.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/textureUpload.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,OAAO,EAAE,sDAAwC;AAC1D,OAAO,EAAE,WAAW,EAAE,0DAA4C;AAClE,OAAO,EAAE,QAAQ,EAAE,0CAA4B;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAiC1D;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAA0C,CAAC,KAAK,EAAE,EAAE;IAC1E,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;IAC5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3D,4FAA4F;IAC5F,MAAM,MAAM,GAAG,oCAAoC,CAAC;IACpD,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,KAAe,EAAE,EAAE;QAChB,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACtB,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,OAAO;QACX,CAAC;QAED,QAAQ,CACJ,IAAI,EACJ,CAAC,IAAI,EAAE,EAAE;YACL,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC;YAExD,0BAA0B;YAC1B,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;gBAChB,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;gBACpC,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;gBAChC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;gBAC3B,MAAM,CAAC,SAAS,GAAG,GAAG,EAAE;oBACpB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAgB,CAAC;oBAE3C,IAAI,OAAO,YAAY,WAAW,EAAE,CAAC;wBACjC,IAAI,SAAS,GAAuB,SAAS,CAAC;wBAC9C,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;4BAC9C,SAAS,GAAG,MAAM,CAAC;wBACvB,CAAC;6BAAM,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;4BACrD,SAAS,GAAG,MAAM,CAAC;wBACvB,CAAC;wBACD,OAAO,CAAC,SAAS,CAAC,UAAU,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;oBACxE,CAAC;yBAAM,IAAI,OAAO,YAAY,OAAO,EAAE,CAAC;wBACpC,OAAO,CAAC,SAAS,CAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;oBACnE,CAAC;gBACL,CAAC,CAAC;YACN,CAAC;iBAAM,CAAC;gBACJ,qBAAqB;gBACrB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;gBAC5C,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;gBACtC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,WAAW,EAAE,CAAC;gBAE5D,mEAAmE;gBACnE,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;gBAEjD,MAAM,UAAU,GAAG,QAAQ;oBACvB,CAAC,CAAC,IAAI,WAAW,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;oBACpI,CAAC,CAAC,IAAI,OAAO,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;gBAElE,QAAQ,CAAC,UAAU,CAAC,CAAC;YACzB,CAAC;QACL,CAAC,EACD,SAAS,EACT,IAAI,CACP,CAAC;IACN,CAAC,EACD,CAAC,KAAK,CAAC,CACV,CAAC;IAEF,OAAO,KAAC,YAAY,IAAC,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;AAC3G,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { useCallback } from \"react\";\r\nimport type { BaseTexture } from \"core/Materials/Textures/baseTexture\";\r\nimport type { Scene } from \"core/scene\";\r\nimport { Texture } from \"core/Materials/Textures/texture\";\r\nimport { CubeTexture } from \"core/Materials/Textures/cubeTexture\";\r\nimport { ReadFile } from \"core/Misc/fileTools\";\r\nimport { UploadButton } from \"../primitives/uploadButton\";\r\n\r\ntype TextureUploadUpdateProps = {\r\n    /**\r\n     * Existing texture to update via updateURL\r\n     */\r\n    texture: BaseTexture;\r\n    /**\r\n     * Callback after texture is updated\r\n     */\r\n    onChange?: (texture: BaseTexture) => void;\r\n    scene?: never;\r\n    cubeOnly?: never;\r\n};\r\n\r\ntype TextureUploadCreateProps = {\r\n    /**\r\n     * The scene to create the texture in\r\n     */\r\n    scene: Scene;\r\n    /**\r\n     * Callback when a new texture is created\r\n     */\r\n    onChange: (texture: BaseTexture) => void;\r\n    /**\r\n     * Whether to create cube textures\r\n     */\r\n    cubeOnly?: boolean;\r\n    texture?: never;\r\n};\r\n\r\ntype TextureUploadProps = TextureUploadUpdateProps | TextureUploadCreateProps;\r\n\r\n/**\r\n * A button that uploads a file and either:\r\n * - Updates an existing Texture or CubeTexture via updateURL (if texture prop is provided)\r\n * - Creates a new Texture or CubeTexture (if scene/onChange props are provided)\r\n * @param props TextureUploadProps\r\n * @returns UploadButton component that handles texture upload\r\n */\r\nexport const TextureUpload: FunctionComponent<TextureUploadProps> = (props) => {\r\n    TextureUpload.displayName = \"TextureUpload\";\r\n    const label = props.texture ? \"Upload Texture\" : undefined;\r\n    // TODO: This should probably be dynamically fetching a list of supported texture extensions\r\n    const accept = \".jpg, .png, .tga, .dds, .env, .exr\";\r\n    const handleUpload = useCallback(\r\n        (files: FileList) => {\r\n            const file = files[0];\r\n            if (!file) {\r\n                return;\r\n            }\r\n\r\n            ReadFile(\r\n                file,\r\n                (data) => {\r\n                    const blob = new Blob([data], { type: \"octet/stream\" });\r\n\r\n                    // Update existing texture\r\n                    if (props.texture) {\r\n                        const { texture, onChange } = props;\r\n                        const reader = new FileReader();\r\n                        reader.readAsDataURL(blob);\r\n                        reader.onloadend = () => {\r\n                            const base64data = reader.result as string;\r\n\r\n                            if (texture instanceof CubeTexture) {\r\n                                let extension: string | undefined = undefined;\r\n                                if (file.name.toLowerCase().indexOf(\".dds\") > 0) {\r\n                                    extension = \".dds\";\r\n                                } else if (file.name.toLowerCase().indexOf(\".env\") > 0) {\r\n                                    extension = \".env\";\r\n                                }\r\n                                texture.updateURL(base64data, extension, () => onChange?.(texture));\r\n                            } else if (texture instanceof Texture) {\r\n                                texture.updateURL(base64data, null, () => onChange?.(texture));\r\n                            }\r\n                        };\r\n                    } else {\r\n                        // Create new texture\r\n                        const { scene, cubeOnly, onChange } = props;\r\n                        const url = URL.createObjectURL(blob);\r\n                        const extension = file.name.split(\".\").pop()?.toLowerCase();\r\n\r\n                        // Revoke the object URL after texture loads to prevent memory leak\r\n                        const revokeUrl = () => URL.revokeObjectURL(url);\r\n\r\n                        const newTexture = cubeOnly\r\n                            ? new CubeTexture(url, scene, [], false, undefined, revokeUrl, undefined, undefined, false, extension ? \".\" + extension : undefined)\r\n                            : new Texture(url, scene, false, false, undefined, revokeUrl);\r\n\r\n                        onChange(newTexture);\r\n                    }\r\n                },\r\n                undefined,\r\n                true\r\n            );\r\n        },\r\n        [props]\r\n    );\r\n\r\n    return <UploadButton onUpload={handleUpload} accept={accept} title={\"Upload Texture\"} label={label} />;\r\n};\r\n"]}

package/fluent/primitives/button.d.ts

@@ -1,10 +1,14 @@
-import type { FunctionComponent } from "react";
 import type { FluentIcon } from "@fluentui/react-icons";
 import type { BasePrimitiveProps } from "./primitive.js";
 export type ButtonProps = BasePrimitiveProps & {
-    onClick: () => void;
+    onClick?: () => void;
     icon?: FluentIcon;
     appearance?: "subtle" | "transparent" | "primary";
     label?: string;
 };
-export declare const Button: FunctionComponent<ButtonProps>;
+export declare const Button: import("react").ForwardRefExoticComponent<BasePrimitiveProps & {
+    onClick?: () => void;
+    icon?: FluentIcon;
+    appearance?: "subtle" | "transparent" | "primary";
+    label?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/fluent/primitives/button.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as FluentButton } from "@fluentui/react-components";
-import { useContext } from "react";
+import { forwardRef, useContext } from "react";
 import { ToolContext } from "../hoc/fluentToolWrapper.js";
-export const Button = (props) => {
-    Button.displayName = "Button";
+export const Button = forwardRef((props, ref) => {
     const { size } = useContext(ToolContext);
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const { icon: Icon, label, ...buttonProps } = props;
-    return (_jsx(FluentButton, { iconPosition: "after", ...buttonProps, size: size, icon: Icon && _jsx(Icon, {}), children: label && props.label }));
-};
+    return (_jsx(FluentButton, { ref: ref, iconPosition: "after", ...buttonProps, size: size, icon: Icon && _jsx(Icon, {}), children: label && props.label }));
+});
+Button.displayName = "Button";
 //# sourceMappingURL=button.js.map

package/fluent/primitives/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AASvD,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;IAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,gEAAgE;IAChE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IACpD,OAAO,CACH,KAAC,YAAY,IAAC,YAAY,EAAC,OAAO,KAAK,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,IAAI,KAAC,IAAI,KAAG,YACjF,KAAK,IAAI,KAAK,CAAC,KAAK,GACV,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Button as FluentButton } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { useContext } from \"react\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\nimport type { BasePrimitiveProps } from \"./primitive\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nexport type ButtonProps = BasePrimitiveProps & {\r\n    onClick: () => void;\r\n    icon?: FluentIcon;\r\n    appearance?: \"subtle\" | \"transparent\" | \"primary\";\r\n    label?: string;\r\n};\r\n\r\nexport const Button: FunctionComponent<ButtonProps> = (props) => {\r\n    Button.displayName = \"Button\";\r\n    const { size } = useContext(ToolContext);\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    const { icon: Icon, label, ...buttonProps } = props;\r\n    return (\r\n        <FluentButton iconPosition=\"after\" {...buttonProps} size={size} icon={Icon && <Icon />}>\r\n            {label && props.label}\r\n        </FluentButton>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AASvD,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC5E,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,gEAAgE;IAChE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IACpD,OAAO,CACH,KAAC,YAAY,IAAC,GAAG,EAAE,GAAG,EAAE,YAAY,EAAC,OAAO,KAAK,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,IAAI,KAAC,IAAI,KAAG,YAC3F,KAAK,IAAI,KAAK,CAAC,KAAK,GACV,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import { Button as FluentButton } from \"@fluentui/react-components\";\r\nimport { forwardRef, useContext } from \"react\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\nimport type { BasePrimitiveProps } from \"./primitive\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nexport type ButtonProps = BasePrimitiveProps & {\r\n    onClick?: () => void;\r\n    icon?: FluentIcon;\r\n    appearance?: \"subtle\" | \"transparent\" | \"primary\";\r\n    label?: string;\r\n};\r\n\r\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\r\n    const { size } = useContext(ToolContext);\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    const { icon: Icon, label, ...buttonProps } = props;\r\n    return (\r\n        <FluentButton ref={ref} iconPosition=\"after\" {...buttonProps} size={size} icon={Icon && <Icon />}>\r\n            {label && props.label}\r\n        </FluentButton>\r\n    );\r\n});\r\n\r\nButton.displayName = \"Button\";\r\n"]}

package/fluent/primitives/colorPicker.d.ts

@@ -4,7 +4,14 @@ import type { PrimitiveProps } from "./primitive.js";
 export type ColorPickerProps<C extends Color3 | Color4> = {
     isLinearMode?: boolean;
 } & PrimitiveProps<C>;
-export declare const ColorPickerPopup: FunctionComponent<ColorPickerProps<Color3 | Color4>>;
+export declare const ColorPickerPopup: import("react").ForwardRefExoticComponent<{
+    isLinearMode?: boolean;
+} & import("./primitive.js").BasePrimitiveProps & {
+    value: Color3 | Color4;
+    infoLabel?: import("./infoLabel.js").InfoLabelParentProps;
+} & {
+    onChange: (value: Color3 | Color4) => void;
+} & import("react").RefAttributes<HTMLButtonElement>>;
 export type InputHexProps = PrimitiveProps<Color3 | Color4> & {
     linearHex?: boolean;
     isLinearMode?: boolean;