@babylonjs/shared-ui-components 8.44.1 → 8.45.1

package/fluent/primitives/nodeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"nodeSelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/nodeSelector.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAalD;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACxE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;IAC1C,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAE3D,OAAO,KAAC,cAAc,OAAK,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACjF,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport type { Scene } from \"core/scene\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { Node } from \"core/node\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\n\r\nimport { useCallback } from \"react\";\r\nimport { EntitySelector } from \"./entitySelector\";\r\n\r\nexport type NodeSelectorProps = PrimitiveProps<Nullable<Node>> & {\r\n    /**\r\n     * The scene to get nodes from\r\n     */\r\n    scene: Scene;\r\n    /**\r\n     * Optional filter function to filter which nodes are shown\r\n     */\r\n    filter?: (node: Node) => boolean;\r\n};\r\n\r\n/**\r\n * A primitive component with a ComboBox for selecting from existing scene nodes.\r\n * @param props NodeSelectorProps\r\n * @returns NodeSelector component\r\n */\r\nexport const NodeSelector: FunctionComponent<NodeSelectorProps> = (props) => {\r\n    NodeSelector.displayName = \"NodeSelector\";\r\n    const { scene, ...rest } = props;\r\n\r\n    const getNodes = useCallback(() => scene.getNodes(), [scene]);\r\n    const getName = useCallback((node: Node) => node.name, []);\r\n\r\n    return <EntitySelector {...rest} getEntities={getNodes} getName={getName} />;\r\n};\r\n"]}
+{"version":3,"file":"nodeSelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/nodeSelector.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAalD;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACxE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;IAC1C,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAE3D,OAAO,KAAC,cAAc,OAAK,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACjF,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport type { Scene } from \"core/scene\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { Node } from \"core/node\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport type { EntitySelectorProps } from \"./entitySelector\";\r\n\r\nimport { useCallback } from \"react\";\r\nimport { EntitySelector } from \"./entitySelector\";\r\n\r\nexport type NodeSelectorProps = PrimitiveProps<Nullable<Node>> & {\r\n    /**\r\n     * The scene to get nodes from\r\n     */\r\n    scene: Scene;\r\n    /**\r\n     * Optional filter function to filter which nodes are shown\r\n     */\r\n    filter?: (node: Node) => boolean;\r\n} & Omit<EntitySelectorProps<Node>, \"getEntities\" | \"getName\">;\r\n\r\n/**\r\n * A primitive component with a ComboBox for selecting from existing scene nodes.\r\n * @param props NodeSelectorProps\r\n * @returns NodeSelector component\r\n */\r\nexport const NodeSelector: FunctionComponent<NodeSelectorProps> = (props) => {\r\n    NodeSelector.displayName = \"NodeSelector\";\r\n    const { scene, ...rest } = props;\r\n\r\n    const getNodes = useCallback(() => scene.getNodes(), [scene]);\r\n    const getName = useCallback((node: Node) => node.name, []);\r\n\r\n    return <EntitySelector {...rest} getEntities={getNodes} getName={getName} />;\r\n};\r\n"]}

package/fluent/primitives/skeletonSelector.d.ts

@@ -0,0 +1,22 @@
+import type { FunctionComponent } from "react";
+import type { Scene } from "@babylonjs/core/scene.js";
+import type { Nullable } from "@babylonjs/core/types.js";
+import type { Skeleton } from "@babylonjs/core/Bones/skeleton.js";
+import type { PrimitiveProps } from "./primitive.js";
+import type { EntitySelectorProps } from "./entitySelector.js";
+export type SkeletonSelectorProps = PrimitiveProps<Nullable<Skeleton>> & {
+    /**
+     * The scene to get skeletons from
+     */
+    scene: Scene;
+    /**
+     * Optional filter function to filter which skeletons are shown
+     */
+    filter?: (skeleton: Skeleton) => boolean;
+} & Omit<EntitySelectorProps<Skeleton>, "getEntities" | "getName">;
+/**
+ * A primitive component with a ComboBox for selecting from existing scene skeletons.
+ * @param props SkeletonSelectorProps
+ * @returns SkeletonSelector component
+ */
+export declare const SkeletonSelector: FunctionComponent<SkeletonSelectorProps>;

package/fluent/primitives/skeletonSelector.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { EntitySelector } from "./entitySelector.js";
+/**
+ * A primitive component with a ComboBox for selecting from existing scene skeletons.
+ * @param props SkeletonSelectorProps
+ * @returns SkeletonSelector component
+ */
+export const SkeletonSelector = (props) => {
+    SkeletonSelector.displayName = "SkeletonSelector";
+    const { scene, ...rest } = props;
+    const getSkeletons = useCallback(() => scene.skeletons, [scene.skeletons]);
+    const getName = useCallback((skeleton) => skeleton.name, []);
+    return _jsx(EntitySelector, { ...rest, getEntities: getSkeletons, getName: getName });
+};
+//# sourceMappingURL=skeletonSelector.js.map

package/fluent/primitives/skeletonSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeletonSelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/skeletonSelector.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAalD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6C,CAAC,KAAK,EAAE,EAAE;IAChF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;IAClD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3E,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,QAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAEvE,OAAO,KAAC,cAAc,OAAK,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACrF,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport type { Scene } from \"core/scene\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { Skeleton } from \"core/Bones/skeleton\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport type { EntitySelectorProps } from \"./entitySelector\";\r\n\r\nimport { useCallback } from \"react\";\r\nimport { EntitySelector } from \"./entitySelector\";\r\n\r\nexport type SkeletonSelectorProps = PrimitiveProps<Nullable<Skeleton>> & {\r\n    /**\r\n     * The scene to get skeletons from\r\n     */\r\n    scene: Scene;\r\n    /**\r\n     * Optional filter function to filter which skeletons are shown\r\n     */\r\n    filter?: (skeleton: Skeleton) => boolean;\r\n} & Omit<EntitySelectorProps<Skeleton>, \"getEntities\" | \"getName\">;\r\n\r\n/**\r\n * A primitive component with a ComboBox for selecting from existing scene skeletons.\r\n * @param props SkeletonSelectorProps\r\n * @returns SkeletonSelector component\r\n */\r\nexport const SkeletonSelector: FunctionComponent<SkeletonSelectorProps> = (props) => {\r\n    SkeletonSelector.displayName = \"SkeletonSelector\";\r\n    const { scene, ...rest } = props;\r\n\r\n    const getSkeletons = useCallback(() => scene.skeletons, [scene.skeletons]);\r\n    const getName = useCallback((skeleton: Skeleton) => skeleton.name, []);\r\n\r\n    return <EntitySelector {...rest} getEntities={getSkeletons} getName={getName} />;\r\n};\r\n"]}

package/fluent/primitives/textureSelector.d.ts

@@ -3,6 +3,7 @@ import type { Scene } from "@babylonjs/core/scene.js";
 import type { Nullable } from "@babylonjs/core/types.js";
 import type { FunctionComponent } from "react";
 import type { PrimitiveProps } from "./primitive.js";
+import type { EntitySelectorProps } from "./entitySelector.js";
 export type TextureSelectorProps = PrimitiveProps<Nullable<BaseTexture>> & {
     /**
      * The scene to get textures from
@@ -16,7 +17,7 @@ export type TextureSelectorProps = PrimitiveProps<Nullable<BaseTexture>> & {
      * Whether to only allow cube textures
      */
     cubeOnly?: boolean;
-};
+} & Omit<EntitySelectorProps<BaseTexture>, "getEntities" | "getName">;
 /**
  * A primitive component with a ComboBox for selecting from existing scene textures
  * and a button for uploading new texture files.

package/fluent/primitives/textureSelector.js

@@ -19,11 +19,11 @@ const useStyles = makeStyles({
  */
 export const TextureSelector = (props) => {
     TextureSelector.displayName = "TextureSelector";
-    const { scene, cubeOnly, value, onChange } = props;
+    const { scene, cubeOnly, value, onChange, onLink, defaultValue } = props;
     const classes = useStyles();
     const getTextures = useCallback(() => scene.textures, [scene.textures]);
-    const getName = useCallback((texture) => texture.displayName || texture.name, []);
+    const getName = useCallback((texture) => texture.displayName || texture.name || `${texture.getClassName() || "Unnamed Texture"} (${texture.uniqueId})`, []);
     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 })] }));
+    return (_jsxs("div", { className: classes.container, children: [_jsx(EntitySelector, { value: value, onChange: onChange, onLink: onLink, defaultValue: defaultValue, getEntities: getTextures, getName: getName, filter: filter }), !value && _jsx(TextureUpload, { scene: scene, onChange: onChange, cubeOnly: cubeOnly })] }));
 };
 //# sourceMappingURL=textureSelector.js.map

package/fluent/primitives/textureSelector.js.map

@@ -1 +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"]}
+{"version":3,"file":"textureSelector.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textureSelector.tsx"],"names":[],"mappings":";AAOA,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,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IACzE,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,IAAI,GAAG,OAAO,CAAC,YAAY,EAAE,IAAI,iBAAiB,KAAK,OAAO,CAAC,QAAQ,GAAG,EAAE,EAAE,CAAC,CAAC;IACzK,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,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,GAAI,EAC3J,CAAC,KAAK,IAAI,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,IAChF,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\nimport type { EntitySelectorProps } from \"./entitySelector\";\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} & Omit<EntitySelectorProps<BaseTexture>, \"getEntities\" | \"getName\">;\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, onLink, defaultValue } = 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 || `${texture.getClassName() || \"Unnamed Texture\"} (${texture.uniqueId})`, []);\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} onLink={onLink} defaultValue={defaultValue} getEntities={getTextures} getName={getName} filter={filter} />\r\n            {!value && <TextureUpload scene={scene} onChange={onChange} cubeOnly={cubeOnly} />}\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/toggleButton.js

@@ -1,7 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ToggleButton as FluentToggleButton } from "@fluentui/react-components";
+import { ToggleButton as FluentToggleButton, makeStyles } from "@fluentui/react-components";
 import { useCallback, useContext, useEffect, useState } from "react";
 import { ToolContext } from "../hoc/fluentToolWrapper.js";
+const useStyles = makeStyles({
+    button: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
 /**
  * Toggles between two states using a button with icons.
  * If no disabledIcon is provided, the button will toggle between visual enabled/disabled states without an icon change
@@ -13,6 +20,7 @@ export const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle" } = props;
     const { size } = useContext(ToolContext);
+    const classes = useStyles();
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
         setChecked((prev) => {
@@ -24,6 +32,6 @@ export const ToggleButton = (props) => {
     useEffect(() => {
         setChecked(props.value);
     }, [props.value]);
-    return (_jsx(FluentToggleButton, { title: title, size: size, icon: checked ? _jsx(props.checkedIcon, {}) : props.uncheckedIcon ? _jsx(props.uncheckedIcon, {}) : _jsx(props.checkedIcon, {}), appearance: appearance, checked: checked, onClick: toggle }));
+    return (_jsx(FluentToggleButton, { className: classes.button, title: title, size: size, icon: checked ? _jsx(props.checkedIcon, {}) : props.uncheckedIcon ? _jsx(props.uncheckedIcon, {}) : _jsx(props.checkedIcon, {}), appearance: appearance, checked: checked, onClick: toggle }));
 };
 //# sourceMappingURL=toggleButton.js.map

package/fluent/primitives/toggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggleButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/toggleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhF,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AASvD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACxE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;IAC1C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IAChE,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE;YAChB,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC;YACtB,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,OAAO,OAAO,CAAC;QACnB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,SAAS,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,kBAAkB,IACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,aAAa,KAAG,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,EAC7G,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,MAAM,GACjB,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { ToggleButton as FluentToggleButton } from \"@fluentui/react-components\";\r\nimport type { ButtonProps } from \"./button\";\r\nimport { useCallback, useContext, useEffect, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\ntype ToggleButtonProps = Omit<ButtonProps, \"icon\" | \"onClick\"> & {\r\n    value: boolean;\r\n    checkedIcon: FluentIcon;\r\n    uncheckedIcon?: FluentIcon;\r\n    onChange: (checked: boolean) => void;\r\n};\r\n\r\n/**\r\n * Toggles between two states using a button with icons.\r\n * If no disabledIcon is provided, the button will toggle between visual enabled/disabled states without an icon change\r\n *\r\n * @param props\r\n * @returns\r\n */\r\nexport const ToggleButton: FunctionComponent<ToggleButtonProps> = (props) => {\r\n    ToggleButton.displayName = \"ToggleButton\";\r\n    const { value, onChange, title, appearance = \"subtle\" } = props;\r\n    const { size } = useContext(ToolContext);\r\n    const [checked, setChecked] = useState(value);\r\n    const toggle = useCallback(() => {\r\n        setChecked((prev) => {\r\n            const enabled = !prev;\r\n            onChange(enabled);\r\n            return enabled;\r\n        });\r\n    }, [setChecked]);\r\n\r\n    useEffect(() => {\r\n        setChecked(props.value);\r\n    }, [props.value]);\r\n\r\n    return (\r\n        <FluentToggleButton\r\n            title={title}\r\n            size={size}\r\n            icon={checked ? <props.checkedIcon /> : props.uncheckedIcon ? <props.uncheckedIcon /> : <props.checkedIcon />}\r\n            appearance={appearance}\r\n            checked={checked}\r\n            onClick={toggle}\r\n        />\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"toggleButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/toggleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE5F,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KAC3B;CACJ,CAAC,CAAC;AASH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACxE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;IAC1C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IAChE,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE;YAChB,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC;YACtB,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,OAAO,OAAO,CAAC;QACnB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,SAAS,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,kBAAkB,IACf,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,aAAa,KAAG,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,EAC7G,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,MAAM,GACjB,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { ToggleButton as FluentToggleButton, makeStyles } from \"@fluentui/react-components\";\r\nimport type { ButtonProps } from \"./button\";\r\nimport { useCallback, useContext, useEffect, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nconst useStyles = makeStyles({\r\n    button: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"center\",\r\n    },\r\n});\r\n\r\ntype ToggleButtonProps = Omit<ButtonProps, \"icon\" | \"onClick\"> & {\r\n    value: boolean;\r\n    checkedIcon: FluentIcon;\r\n    uncheckedIcon?: FluentIcon;\r\n    onChange: (checked: boolean) => void;\r\n};\r\n\r\n/**\r\n * Toggles between two states using a button with icons.\r\n * If no disabledIcon is provided, the button will toggle between visual enabled/disabled states without an icon change\r\n *\r\n * @param props\r\n * @returns\r\n */\r\nexport const ToggleButton: FunctionComponent<ToggleButtonProps> = (props) => {\r\n    ToggleButton.displayName = \"ToggleButton\";\r\n    const { value, onChange, title, appearance = \"subtle\" } = props;\r\n    const { size } = useContext(ToolContext);\r\n    const classes = useStyles();\r\n    const [checked, setChecked] = useState(value);\r\n    const toggle = useCallback(() => {\r\n        setChecked((prev) => {\r\n            const enabled = !prev;\r\n            onChange(enabled);\r\n            return enabled;\r\n        });\r\n    }, [setChecked]);\r\n\r\n    useEffect(() => {\r\n        setChecked(props.value);\r\n    }, [props.value]);\r\n\r\n    return (\r\n        <FluentToggleButton\r\n            className={classes.button}\r\n            title={title}\r\n            size={size}\r\n            icon={checked ? <props.checkedIcon /> : props.uncheckedIcon ? <props.uncheckedIcon /> : <props.checkedIcon />}\r\n            appearance={appearance}\r\n            checked={checked}\r\n            onClick={toggle}\r\n        />\r\n    );\r\n};\r\n"]}

package/package.json

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