@babylonjs/inspector 5.31.1 → 5.32.0

package/dist/babylon.inspector.module.d.ts

@@ -4506,8 +4506,9 @@ export type ButtonProps = {
     active?: boolean;
     onClick?: () => void;
     color: "light" | "dark";
-    size: "default" | "small" | "wide";
+    size: "default" | "small" | "wide" | "smaller";
     title?: string;
+    backgroundColor?: string;
 };
 export const Button: React.FC<ButtonProps>;
 
@@ -5117,6 +5118,29 @@ export class NumericInputComponent extends React.Component<INumericInputComponen
 }
 export {};
 
+}
+declare module "@babylonjs/inspector/components/lines/OptionsLineComponent" {
+/// <reference types="react" />
+/**
+ * This components represents an options menu with optional
+ * customizable properties. Option IDs should be unique.
+ */
+export interface IOption {
+    label: string;
+    value: string;
+    id: string;
+}
+export interface IOptionsLineComponentProps {
+    options: IOption[];
+    addOptionPlaceholder?: string;
+    onOptionAdded?: (newOption: IOption) => void;
+    onOptionSelected: (selectedOptionValue: string) => void;
+    selectedOptionValue: string;
+    validateNewOptionValue?: (newOptionValue: string) => boolean;
+    addOptionText?: string;
+}
+export const OptionsLineComponent: (props: IOptionsLineComponentProps) => JSX.Element;
+
 }
 declare module "@babylonjs/inspector/components/MessageDialog" {
 import * as React from "react";
@@ -5127,6 +5151,21 @@ export interface MessageDialogProps {
 }
 export const MessageDialog: React.FC<MessageDialogProps>;
 
+}
+declare module "@babylonjs/inspector/components/TextInputWithSubmit" {
+/// <reference types="react" />
+export interface ITextInputProps {
+    label?: string;
+    placeholder?: string;
+    submitValue: (newValue: string) => void;
+    validateValue?: (value: string) => boolean;
+    cancelSubmit?: () => void;
+}
+/**
+ * This component represents a text input that can be submitted or cancelled on buttons
+ */
+export const TextInputWithSubmit: (props: ITextInputProps) => JSX.Element;
+
 }
 declare module "@babylonjs/inspector/components/Toggle" {
 /// <reference types="react" />
@@ -5682,14 +5721,9 @@ export interface IOptionsLineComponentProps {
     target: any;
     propertyName: string;
     options: IInspectableOptions[];
-    addInput?: boolean;
     noDirectUpdate?: boolean;
     onSelect?: (value: number | string) => void;
     extractValue?: (target: any) => number | string;
-    addVal?: (newVal: {
-        label: string;
-        value: number;
-    }, prevVal: number) => void;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     allowNullValue?: boolean;
     icon?: string;
@@ -5697,13 +5731,9 @@ export interface IOptionsLineComponentProps {
     className?: string;
     valuesAreStrings?: boolean;
     defaultIfNull?: number;
-    fromFontDropdown?: boolean;
-    valueProp?: number;
-    fallbackValue?: number;
 }
 export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
     value: number | string;
-    addCustom: boolean;
 }> {
     private _localChange;
     private _remapValueIn;
@@ -5712,12 +5742,10 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
     constructor(props: IOptionsLineComponentProps);
     shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
         value: number;
-        addCustom: boolean;
     }): boolean;
     raiseOnPropertyChanged(newValue: number, previousValue: number): void;
     setValue(value: string | number): void;
     updateValue(valueString: string): void;
-    updateCustomValue(): void;
     render(): JSX.Element;
 }
 
@@ -6732,25 +6760,25 @@ export class PropertyChangedEvent {
 }
 declare module "@babylonjs/inspector/stories/bars/CommandBarComponent.stories" {
 /// <reference types="react" />
+import { CommandBarComponent } from "@babylonjs/inspector/components/bars/CommandBarComponent";
+
 const _default: {
 
 };
 export default _default;
-export const Default: {};
-export const WithArtboardColor: {
-    parameters: {
-        onArtboardColorChanged: (color: string) => void;
-    };
-};
+export const Default: StoryObj<typeof CommandBarComponent>;
+export const WithArtboardColor: StoryObj<typeof CommandBarComponent>;
 
 }
 declare module "@babylonjs/inspector/stories/bars/CommandButtonComponent.stories" {
 /// <reference types="react" />
+import { CommandButtonComponent } from "@babylonjs/inspector/components/bars/CommandButtonComponent";
+
 const _default: {
 
 };
 export default _default;
-export const Default: {};
+export const Default: StoryObj<typeof CommandButtonComponent>;
 
 }
 declare module "@babylonjs/inspector/stories/Button.stories" {
@@ -6767,17 +6795,13 @@ export const Small: any;
 
 }
 declare module "@babylonjs/inspector/stories/colorPicker/ColorPicker.stories" {
-import { Color3 } from "@babylonjs/core/Maths/math.color";
 import { ColorPicker } from "@babylonjs/inspector/components/colorPicker/ColorPicker";
+
 const _default: {
     component: typeof ColorPicker;
 };
 export default _default;
-export const Default: {
-    args: {
-        color: Color3;
-    };
-};
+export const Default: StoryObj<typeof ColorPicker>;
 
 }
 declare module "@babylonjs/inspector/stories/Icon.stories" {
@@ -6806,114 +6830,67 @@ export const Default: any;
 declare module "@babylonjs/inspector/stories/layout/FlexibleGridLayout.stories" {
 /// <reference types="react" />
 import { IFlexibleGridLayoutProps } from "@babylonjs/inspector/components/layout/FlexibleGridLayout";
+import { FlexibleGridLayout } from "@babylonjs/inspector/components/layout/FlexibleGridLayout";
+
 const _default: {
     component: import("react").FC<IFlexibleGridLayoutProps>;
 };
 export default _default;
-export const Default: {
-    render: (props: IFlexibleGridLayoutProps) => JSX.Element;
-    args: {
-        layoutDefinition: {
-            columns: {
-                id: string;
-                width: string;
-                rows: {
-                    id: string;
-                    height: string;
-                    selectedTab: string;
-                    tabs: {
-                        id: string;
-                        component: JSX.Element;
-                    }[];
-                }[];
-            }[];
-        };
-    };
-};
-export const TwoColumn: {
-    render: (props: IFlexibleGridLayoutProps) => JSX.Element;
-    args: {
-        layoutDefinition: {
-            columns: {
-                id: string;
-                width: string;
-                rows: {
-                    id: string;
-                    height: string;
-                    selectedTab: string;
-                    tabs: {
-                        id: string;
-                        component: JSX.Element;
-                    }[];
-                }[];
-            }[];
-        };
-    };
-};
+export const Default: StoryObj<typeof FlexibleGridLayout>;
+export const TwoColumn: StoryObj<typeof FlexibleGridLayout>;
 
 }
 declare module "@babylonjs/inspector/stories/lines/ColorLineComponent.stories" {
-/// <reference types="react" />
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { PropertyChangedEvent } from "@babylonjs/inspector/propertyChangedEvent";
-import { IColorLineComponentProps } from "@babylonjs/inspector/components/lines/ColorLineComponent";
 import { ColorLineComponent } from "@babylonjs/inspector/components/lines/ColorLineComponent";
+
 const _default: {
     component: typeof ColorLineComponent;
 };
 export default _default;
-export const Default: {
-    render: (args: IColorLineComponentProps) => JSX.Element;
-    args: {
-        target: {};
-        label: string;
-        propertyName: string;
-        lockObject: {
-            lock: boolean;
-        };
-        onPropertyChangedObservable: Observable<PropertyChangedEvent>;
-    };
-};
+export const Default: StoryObj<typeof ColorLineComponent>;
 
 }
 declare module "@babylonjs/inspector/stories/lines/ColorPickerLineComponent.stories" {
-/// <reference types="react" />
-import { Color3 } from "@babylonjs/core/Maths/math.color";
-import { IColorPickerComponentProps } from "@babylonjs/inspector/components/lines/ColorPickerLineComponent";
 import { ColorPickerLineComponent } from "@babylonjs/inspector/components/lines/ColorPickerLineComponent";
+
 const _default: {
     component: typeof ColorPickerLineComponent;
 };
 export default _default;
-export const Default: {
-    render: (args: IColorPickerComponentProps) => JSX.Element;
-    args: {
-        value: Color3;
-    };
-};
+export const Default: StoryObj<typeof ColorPickerLineComponent>;
 
 }
 declare module "@babylonjs/inspector/stories/lines/FileButtonLineComponent.stories" {
 import { FileButtonLineComponent } from "@babylonjs/inspector/components/lines/FileButtonLineComponent";
+
 const _default: {
     component: typeof FileButtonLineComponent;
 };
 export default _default;
-export const Default: {};
+export const Default: StoryObj<typeof FileButtonLineComponent>;
 
 }
 declare module "@babylonjs/inspector/stories/lines/NumericInputComponent.stories" {
 import { NumericInputComponent } from "@babylonjs/inspector/components/lines/NumericInputComponent";
+
 const _default: {
     component: typeof NumericInputComponent;
 };
 export default _default;
-export const Default: {
-    args: {
-        label: string;
-        value: number;
-    };
+export const Default: StoryObj<typeof NumericInputComponent>;
+
+}
+declare module "@babylonjs/inspector/stories/lines/OptionsLineComponent.stories" {
+/// <reference types="react" />
+
+const _default: {
+    component: (props: import("@babylonjs/inspector/components/lines/OptionsLineComponent").IOptionsLineComponentProps) => JSX.Element;
 };
+export default _default;
+const RenderComponent: (args: any) => JSX.Element;
+export const Default: StoryObj<typeof RenderComponent>;
+export const WithCustomOptions: StoryObj<typeof RenderComponent>;
+export const WithValidation: StoryObj<typeof RenderComponent>;
 
 }
 declare module "@babylonjs/inspector/stories/MessageDialog.stories" {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs/inspector",
-    "version": "5.31.1",
+    "version": "5.32.0",
     "module": "dist/babylon.inspector.bundle.max.js",
     "main": "dist/babylon.inspector.bundle.max.js",
     "typings": "dist/babylon.inspector.module.d.ts",
@@ -32,12 +32,12 @@
         "@types/react-dom": ">=16.0.9"
     },
     "devDependencies": {
-        "@babylonjs/core": "^5.31.1",
-        "@babylonjs/gui": "^5.31.1",
-        "@babylonjs/gui-editor": "^5.31.1",
-        "@babylonjs/loaders": "^5.31.1",
-        "@babylonjs/materials": "^5.31.1",
-        "@babylonjs/serializers": "^5.31.1",
+        "@babylonjs/core": "^5.32.0",
+        "@babylonjs/gui": "^5.32.0",
+        "@babylonjs/gui-editor": "^5.32.0",
+        "@babylonjs/loaders": "^5.32.0",
+        "@babylonjs/materials": "^5.32.0",
+        "@babylonjs/serializers": "^5.32.0",
         "@lts/gui": "1.0.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",