@babylonjs/shared-ui-components 8.41.2 → 8.43.0

package/fluent/primitives/textureSelector.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles, tokens } from "@fluentui/react-components";
+import { useCallback } from "react";
+import { TextureUpload } from "../hoc/textureUpload.js";
+import { EntitySelector } from "./entitySelector.js";
+const useStyles = makeStyles({
+    container: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+    },
+});
+/**
+ * A primitive component with a ComboBox for selecting from existing scene textures
+ * and a button for uploading new texture files.
+ * @param props TextureSelectorProps
+ * @returns TextureSelector component
+ */
+export const TextureSelector = (props) => {
+    TextureSelector.displayName = "TextureSelector";
+    const { scene, cubeOnly, value, onChange } = props;
+    const classes = useStyles();
+    const getTextures = useCallback(() => scene.textures, [scene.textures]);
+    const getName = useCallback((texture) => texture.displayName || texture.name, []);
+    const filter = useCallback((texture) => !cubeOnly || texture.isCube, [cubeOnly]);
+    return (_jsxs("div", { className: classes.container, children: [_jsx(EntitySelector, { value: value, onChange: onChange, getEntities: getTextures, getName: getName, filter: filter }), _jsx(TextureUpload, { scene: scene, onChange: onChange, cubeOnly: cubeOnly })] }));
+};
+//# sourceMappingURL=textureSelector.js.map

package/fluent/primitives/textureSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textureSelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textureSelector.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,MAAM,CAAC,kBAAkB;KACjC;CACJ,CAAC,CAAC;AAiBH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAA4C,CAAC,KAAK,EAAE,EAAE;IAC9E,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;IAChD,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IACxE,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,OAAoB,EAAE,EAAE,CAAC,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAC/F,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,OAAoB,EAAE,EAAE,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE9F,OAAO,CACH,eAAK,SAAS,EAAE,OAAO,CAAC,SAAS,aAC7B,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,GAAI,EAChH,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,IACrE,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { BaseTexture } from \"core/Materials/Textures/baseTexture\";\r\nimport type { Scene } from \"core/scene\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nimport { makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { useCallback } from \"react\";\r\nimport { TextureUpload } from \"../hoc/textureUpload\";\r\nimport { EntitySelector } from \"./entitySelector\";\r\n\r\nconst useStyles = makeStyles({\r\n    container: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        alignItems: \"center\",\r\n        gap: tokens.spacingHorizontalS,\r\n    },\r\n});\r\n\r\nexport type TextureSelectorProps = PrimitiveProps<Nullable<BaseTexture>> & {\r\n    /**\r\n     * The scene to get textures from\r\n     */\r\n    scene: Scene;\r\n    /**\r\n     * File types to accept for upload\r\n     */\r\n    accept?: string;\r\n    /**\r\n     * Whether to only allow cube textures\r\n     */\r\n    cubeOnly?: boolean;\r\n};\r\n\r\n/**\r\n * A primitive component with a ComboBox for selecting from existing scene textures\r\n * and a button for uploading new texture files.\r\n * @param props TextureSelectorProps\r\n * @returns TextureSelector component\r\n */\r\nexport const TextureSelector: FunctionComponent<TextureSelectorProps> = (props) => {\r\n    TextureSelector.displayName = \"TextureSelector\";\r\n    const { scene, cubeOnly, value, onChange } = props;\r\n    const classes = useStyles();\r\n\r\n    const getTextures = useCallback(() => scene.textures, [scene.textures]);\r\n    const getName = useCallback((texture: BaseTexture) => texture.displayName || texture.name, []);\r\n    const filter = useCallback((texture: BaseTexture) => !cubeOnly || texture.isCube, [cubeOnly]);\r\n\r\n    return (\r\n        <div className={classes.container}>\r\n            <EntitySelector value={value} onChange={onChange} getEntities={getTextures} getName={getName} filter={filter} />\r\n            <TextureUpload scene={scene} onChange={onChange} cubeOnly={cubeOnly} />\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/uploadButton.d.ts

@@ -0,0 +1,24 @@
+import type { FunctionComponent } from "react";
+import type { ButtonProps } from "./button.js";
+type UploadButtonProps = Omit<ButtonProps, "onClick" | "icon"> & {
+    /**
+     * Callback when files are selected
+     */
+    onUpload: (files: FileList) => void;
+    /**
+     * File types to accept (e.g., ".jpg, .png, .dds")
+     */
+    accept?: string;
+    /**
+     * Text label to display on the button (optional)
+     */
+    label?: string;
+};
+/**
+ * A button that triggers a file upload dialog.
+ * Combines a Button with a hidden file input.
+ * @param props UploadButtonProps
+ * @returns UploadButton component
+ */
+export declare const UploadButton: FunctionComponent<UploadButtonProps>;
+export {};

package/fluent/primitives/uploadButton.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { ArrowUploadRegular } from "@fluentui/react-icons";
+import { Button } from "./button.js";
+/**
+ * A button that triggers a file upload dialog.
+ * Combines a Button with a hidden file input.
+ * @param props UploadButtonProps
+ * @returns UploadButton component
+ */
+export const UploadButton = (props) => {
+    const { onUpload, accept, label, ...buttonProps } = props;
+    UploadButton.displayName = "UploadButton";
+    const inputRef = useRef(null);
+    const handleClick = () => {
+        inputRef.current?.click();
+    };
+    const handleChange = (evt) => {
+        const files = evt.target.files;
+        if (files && files.length) {
+            onUpload(files);
+        }
+        evt.target.value = "";
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { icon: ArrowUploadRegular, title: label ?? "Upload", label: label, onClick: handleClick, ...buttonProps }), _jsx("input", { ref: inputRef, type: "file", accept: accept, style: { display: "none" }, onChange: handleChange })] }));
+};
+//# sourceMappingURL=uploadButton.js.map

package/fluent/primitives/uploadButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uploadButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/uploadButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAkBlC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACxE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IAC1D,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;IAC1C,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,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,QAAQ,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;QACD,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,KAAK,IAAI,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,KAAM,WAAW,GAAI,EACnH,gBAAO,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,YAAY,GAAI,IACzG,CACN,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { useRef } from \"react\";\r\nimport { ArrowUploadRegular } from \"@fluentui/react-icons\";\r\nimport { Button } from \"./button\";\r\nimport type { ButtonProps } from \"./button\";\r\n\r\ntype UploadButtonProps = Omit<ButtonProps, \"onClick\" | \"icon\"> & {\r\n    /**\r\n     * Callback when files are selected\r\n     */\r\n    onUpload: (files: FileList) => void;\r\n    /**\r\n     * File types to accept (e.g., \".jpg, .png, .dds\")\r\n     */\r\n    accept?: string;\r\n    /**\r\n     * Text label to display on the button (optional)\r\n     */\r\n    label?: string;\r\n};\r\n\r\n/**\r\n * A button that triggers a file upload dialog.\r\n * Combines a Button with a hidden file input.\r\n * @param props UploadButtonProps\r\n * @returns UploadButton component\r\n */\r\nexport const UploadButton: FunctionComponent<UploadButtonProps> = (props) => {\r\n    const { onUpload, accept, label, ...buttonProps } = props;\r\n    UploadButton.displayName = \"UploadButton\";\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n\r\n    const handleClick = () => {\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            onUpload(files);\r\n        }\r\n        evt.target.value = \"\";\r\n    };\r\n\r\n    return (\r\n        <>\r\n            <Button icon={ArrowUploadRegular} title={label ?? \"Upload\"} label={label} onClick={handleClick} {...buttonProps} />\r\n            <input ref={inputRef} type=\"file\" accept={accept} style={{ display: \"none\" }} onChange={handleChange} />\r\n        </>\r\n    );\r\n};\r\n"]}

package/package.json

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