babylonjs-inspector 8.1.1 → 8.2.0

package/babylon.inspector.d.ts

@@ -59,8 +59,12 @@ declare module INSPECTOR {
         private static _SceneExplorerHost;
         private static _ActionTabsHost;
         private static _EmbedHost;
-        private static _NewCanvasContainer;
         private static _PersistentPopupHost;
+        private static _SceneExplorerRoot;
+        private static _ActionTabsRoot;
+        private static _EmbedHostRoot;
+        private static _PersistentPopupRoot;
+        private static _NewCanvasContainer;
         private static _SceneExplorerWindow;
         private static _ActionTabsWindow;
         private static _EmbedHostWindow;
@@ -132,7 +136,7 @@ declare module INSPECTOR {
         onKeyUp?: (evt: KeyboardEvent) => void;
         onKeyDown?: (evt: KeyboardEvent) => void;
     }
-    export class PopupComponent extends React.Component<IPopupComponentProps, {
+    export class PopupComponent extends React.Component<React.PropsWithChildren<IPopupComponentProps>, {
         isComponentMounted: boolean;
         blockedByBrowser: boolean;
     }> {
@@ -255,6 +259,7 @@ declare module INSPECTOR {
         isSelected: boolean;
     }> {
         private _wasSelected;
+        private _thisRef;
         constructor(props: ITreeItemSelectableComponentProps);
         switchExpandedState(): void;
         shouldComponentUpdate(nextProps: ITreeItemSelectableComponentProps, nextState: {
@@ -4312,7 +4317,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props defines the split container properties
      * @returns the split container component
      */
-    export var SplitContainer: React.FC<ISplitContainerProps>;
+    export var SplitContainer: React.FC<React.PropsWithChildren<ISplitContainerProps>>;
 
 
 
@@ -6074,9 +6079,7 @@ declare module INSPECTOR.SharedUIComponents {
         constructor(props: IColorPickerLineProps);
         syncPositions(): void;
         shouldComponentUpdate(nextProps: IColorPickerLineProps, nextState: IColorPickerComponentState): boolean;
-        getHexString(props?: Readonly<IColorPickerLineProps> & Readonly<{
-            children?: React.ReactNode | undefined;
-        }>): string;
+        getHexString(props?: Readonly<IColorPickerLineProps>): string;
         componentDidUpdate(): void;
         componentDidMount(): void;
         render(): import("react/jsx-runtime").JSX.Element;
@@ -6109,9 +6112,7 @@ declare module INSPECTOR.SharedUIComponents {
     export class ColorLine extends React.Component<IColorLineProps, IColorLineComponentState> {
         constructor(props: IColorLineProps);
         shouldComponentUpdate(nextProps: IColorLineProps, nextState: IColorLineComponentState): boolean;
-        getValue(props?: Readonly<IColorLineProps> & Readonly<{
-            children?: React.ReactNode | undefined;
-        }>): BABYLON.Color4;
+        getValue(props?: Readonly<IColorLineProps>): BABYLON.Color4;
         setColorFromString(colorString: string): void;
         setColor(newColor: BABYLON.Color4): void;
         switchExpandState(): void;
@@ -6362,7 +6363,7 @@ declare module INSPECTOR.SharedUIComponents {
         title?: string;
         backgroundColor?: string;
     };
-    export var Button: React.FC<ButtonProps>;
+    export var Button: React.FC<React.PropsWithChildren<ButtonProps>>;
 
 
 
@@ -6452,7 +6453,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props
      * @returns
      */
-    export const NodeRenderer: (props: INodeRendererProps) => import("react/jsx-runtime").JSX.Element;
+    export const NodeRenderer: (props: React.PropsWithChildren<INodeRendererProps>) => import("react/jsx-runtime").JSX.Element;
 
 
 
@@ -6471,7 +6472,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props properties
      * @returns graph node container element
      */
-    export var GraphNodesContainer: React.FC<IGraphContainerProps>;
+    export var GraphNodesContainer: React.FC<React.PropsWithChildren<IGraphContainerProps>>;
 
 
 
@@ -6492,7 +6493,7 @@ declare module INSPECTOR.SharedUIComponents {
         highlighted?: boolean;
         parentContainerId: string;
     }
-    export var SingleGraphNode: React.FC<IGraphNodeProps>;
+    export var SingleGraphNode: React.FC<React.PropsWithChildren<IGraphNodeProps>>;
 
 
 
@@ -6516,7 +6517,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props
      * @returns
      */
-    export var GraphLinesContainer: React.FC<IGraphLinesContainerProps>;
+    export var GraphLinesContainer: React.FC<React.PropsWithChildren<IGraphLinesContainerProps>>;
 
 
 
@@ -6602,7 +6603,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props
      * @returns
      */
-    export var GraphContainer: React.FC<IGraphContainerProps>;
+    export var GraphContainer: React.FC<React.PropsWithChildren<IGraphContainerProps>>;
 
 
 
@@ -6654,7 +6655,7 @@ declare module INSPECTOR.SharedUIComponents {
      * drag the handle in a node and drop it in another node to create a connection.
      * @returns connector element
      */
-    export var GraphConnectorHandler: React.FC<IGraphConnectorHandlerProps>;
+    export var GraphConnectorHandler: React.FC<React.PropsWithChildren<IGraphConnectorHandlerProps>>;
 
 
 
@@ -6776,9 +6777,7 @@ declare module INSPECTOR.SharedUIComponents {
         constructor(props: IColorPickerLineComponentProps);
         syncPositions(): void;
         shouldComponentUpdate(nextProps: IColorPickerLineComponentProps, nextState: IColorPickerComponentState): boolean;
-        getHexString(props?: Readonly<IColorPickerLineComponentProps> & Readonly<{
-            children?: React.ReactNode | undefined;
-        }>): string;
+        getHexString(props?: Readonly<IColorPickerLineComponentProps>): string;
         componentDidUpdate(): void;
         componentDidMount(): void;
         render(): import("react/jsx-runtime").JSX.Element;
@@ -6811,9 +6810,7 @@ declare module INSPECTOR.SharedUIComponents {
     export class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
         constructor(props: IColorLineComponentProps);
         shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
-        getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
-            children?: React.ReactNode | undefined;
-        }>): BABYLON.Color4;
+        getValue(props?: Readonly<IColorLineComponentProps>): BABYLON.Color4;
         setColorFromString(colorString: string): void;
         setColor(newColor: BABYLON.Color4): void;
         switchExpandState(): void;
@@ -7173,7 +7170,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props properties
      * @returns drop zone element
      */
-    export var FlexibleDropZone: React.FC<IFlexibleDropZoneProps>;
+    export var FlexibleDropZone: React.FC<React.PropsWithChildren<IFlexibleDropZoneProps>>;
 
 
 
@@ -7201,7 +7198,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props properties
      * @returns DragHandler element
      */
-    export var FlexibleDragHandler: React.FC<IFlexibleDragHandlerProps>;
+    export var FlexibleDragHandler: React.FC<React.PropsWithChildren<IFlexibleDragHandlerProps>>;
 
 
 
@@ -7226,7 +7223,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props
      * @returns
      */
-    export var FlexibleColumn: React.FC<IFlexibleColumnProps>;
+    export var FlexibleColumn: React.FC<React.PropsWithChildren<IFlexibleColumnProps>>;
 
 
 
@@ -7435,7 +7432,7 @@ declare module INSPECTOR.SharedUIComponents {
         artboardColor?: string;
         artboardColorPickerColor?: string;
     }
-    export var CommandBarComponent: React.FC<ICommandBarComponentProps>;
+    export var CommandBarComponent: React.FC<React.PropsWithChildren<ICommandBarComponentProps>>;
 
 
 

package/babylon.inspector.module.d.ts

@@ -69,8 +69,12 @@ export class Inspector {
     private static _SceneExplorerHost;
     private static _ActionTabsHost;
     private static _EmbedHost;
-    private static _NewCanvasContainer;
     private static _PersistentPopupHost;
+    private static _SceneExplorerRoot;
+    private static _ActionTabsRoot;
+    private static _EmbedHostRoot;
+    private static _PersistentPopupRoot;
+    private static _NewCanvasContainer;
     private static _SceneExplorerWindow;
     private static _ActionTabsWindow;
     private static _EmbedHostWindow;
@@ -141,6 +145,7 @@ export class PropertyChangedEvent {
 }
 declare module "babylonjs-inspector/components/popupComponent" {
 import * as React from "react";
+import { PropsWithChildren } from "react";
 export interface IPopupComponentProps {
     id: string;
     title: string;
@@ -154,7 +159,7 @@ export interface IPopupComponentProps {
     onKeyUp?: (evt: KeyboardEvent) => void;
     onKeyDown?: (evt: KeyboardEvent) => void;
 }
-export class PopupComponent extends React.Component<IPopupComponentProps, {
+export class PopupComponent extends React.Component<PropsWithChildren<IPopupComponentProps>, {
     isComponentMounted: boolean;
     blockedByBrowser: boolean;
 }> {
@@ -307,6 +312,7 @@ export class TreeItemSelectableComponent extends React.Component<ITreeItemSelect
     isSelected: boolean;
 }> {
     private _wasSelected;
+    private _thisRef;
     constructor(props: ITreeItemSelectableComponentProps);
     switchExpandedState(): void;
     shouldComponentUpdate(nextProps: ITreeItemSelectableComponentProps, nextState: {
@@ -5270,6 +5276,7 @@ export const SplitContext: import("react").Context<ISplitContext>;
 
 }
 declare module "babylonjs-inspector/split/splitContainer" {
+import { PropsWithChildren } from "react";
 import { SplitDirection } from "babylonjs-inspector/split/splitContext";
 /**
  * Split container properties
@@ -5326,7 +5333,7 @@ export interface ISplitContainerProps {
  * @param props defines the split container properties
  * @returns the split container component
  */
-export const SplitContainer: React.FC<ISplitContainerProps>;
+export const SplitContainer: React.FC<PropsWithChildren<ISplitContainerProps>>;
 
 }
 declare module "babylonjs-inspector/nodeGraphSystem/typeLedger" {
@@ -6965,9 +6972,7 @@ export class ColorPickerLine extends React.Component<IColorPickerLineProps, ICol
     constructor(props: IColorPickerLineProps);
     syncPositions(): void;
     shouldComponentUpdate(nextProps: IColorPickerLineProps, nextState: IColorPickerComponentState): boolean;
-    getHexString(props?: Readonly<IColorPickerLineProps> & Readonly<{
-        children?: React.ReactNode | undefined;
-    }>): string;
+    getHexString(props?: Readonly<IColorPickerLineProps>): string;
     componentDidUpdate(): void;
     componentDidMount(): void;
 
@@ -7000,9 +7005,7 @@ interface IColorLineComponentState {
 export class ColorLine extends React.Component<IColorLineProps, IColorLineComponentState> {
     constructor(props: IColorLineProps);
     shouldComponentUpdate(nextProps: IColorLineProps, nextState: IColorLineComponentState): boolean;
-    getValue(props?: Readonly<IColorLineProps> & Readonly<{
-        children?: React.ReactNode | undefined;
-    }>): Color4;
+    getValue(props?: Readonly<IColorLineProps>): Color4;
     setColorFromString(colorString: string): void;
     setColor(newColor: Color4): void;
     switchExpandState(): void;
@@ -7189,6 +7192,7 @@ export const Icon: React.FC<IconProps>;
 
 }
 declare module "babylonjs-inspector/components/Button" {
+import { PropsWithChildren } from "react";
 export type ButtonProps = {
     disabled?: boolean;
     active?: boolean;
@@ -7198,7 +7202,7 @@ export type ButtonProps = {
     title?: string;
     backgroundColor?: string;
 };
-export const Button: React.FC<ButtonProps>;
+export const Button: React.FC<PropsWithChildren<ButtonProps>>;
 
 }
 declare module "babylonjs-inspector/components/reactGraphSystem/useGraphContext" {
@@ -7210,7 +7214,7 @@ export const useGraphContext: () => import("babylonjs-inspector/components/react
 
 }
 declare module "babylonjs-inspector/components/reactGraphSystem/NodeRenderer" {
-import { ComponentType } from "react";
+import { ComponentType, PropsWithChildren } from "react";
 import { Nullable } from "babylonjs/types";
 export type IVisualRecordsType = Record<string, {
     x: number;
@@ -7282,7 +7286,7 @@ export interface INodeRendererProps {
 
 }
 declare module "babylonjs-inspector/components/reactGraphSystem/GraphNodesContainer" {
-import { FC } from "react";
+import { FC, PropsWithChildren } from "react";
 export interface IGraphContainerProps {
     onNodeMoved: (id: string, x: number, y: number) => void;
     id: string;
@@ -7292,11 +7296,11 @@ export interface IGraphContainerProps {
  * @param props properties
  * @returns graph node container element
  */
-export const GraphNodesContainer: FC<IGraphContainerProps>;
+export const GraphNodesContainer: FC<PropsWithChildren<IGraphContainerProps>>;
 
 }
 declare module "babylonjs-inspector/components/reactGraphSystem/GraphNode" {
-import { FC } from "react";
+import { FC, PropsWithChildren } from "react";
 export interface IGraphNodeProps {
     id: string;
     name: string;
@@ -7308,11 +7312,11 @@ export interface IGraphNodeProps {
     highlighted?: boolean;
     parentContainerId: string;
 }
-export const SingleGraphNode: FC<IGraphNodeProps>;
+export const SingleGraphNode: FC<PropsWithChildren<IGraphNodeProps>>;
 
 }
 declare module "babylonjs-inspector/components/reactGraphSystem/GraphLinesContainer" {
-import { FC } from "react";
+import { FC, PropsWithChildren } from "react";
 /**
  * props for the GraphLineContainer
  */
@@ -7327,7 +7331,7 @@ export interface IGraphLinesContainerProps {
  * @param props
  * @returns
  */
-export const GraphLinesContainer: FC<IGraphLinesContainerProps>;
+export const GraphLinesContainer: FC<PropsWithChildren<IGraphLinesContainerProps>>;
 
 }
 declare module "babylonjs-inspector/components/reactGraphSystem/GraphLine" {
@@ -7388,7 +7392,7 @@ export const GraphContextManager: import("react").Context<IGraphContext>;
 
 }
 declare module "babylonjs-inspector/components/reactGraphSystem/GraphContainer" {
-import { FC } from "react";
+import { FC, PropsWithChildren } from "react";
 export interface IGraphContainerProps {
 }
 /**
@@ -7397,11 +7401,11 @@ export interface IGraphContainerProps {
  * @param props
  * @returns
  */
-export const GraphContainer: FC<IGraphContainerProps>;
+export const GraphContainer: FC<PropsWithChildren<IGraphContainerProps>>;
 
 }
 declare module "babylonjs-inspector/components/reactGraphSystem/GraphConnectorHandle" {
-import { FC } from "react";
+import { FC, PropsWithChildren } from "react";
 /**
  * Props for the connector
  */
@@ -7444,7 +7448,7 @@ export interface IGraphConnectorHandlerProps {
  * drag the handle in a node and drop it in another node to create a connection.
  * @returns connector element
  */
-export const GraphConnectorHandler: FC<IGraphConnectorHandlerProps>;
+export const GraphConnectorHandler: FC<PropsWithChildren<IGraphConnectorHandlerProps>>;
 
 }
 declare module "babylonjs-inspector/components/lines/OptionsLineComponent" {
@@ -7549,9 +7553,7 @@ export class ColorPickerLineComponent extends React.Component<IColorPickerLineCo
     constructor(props: IColorPickerLineComponentProps);
     syncPositions(): void;
     shouldComponentUpdate(nextProps: IColorPickerLineComponentProps, nextState: IColorPickerComponentState): boolean;
-    getHexString(props?: Readonly<IColorPickerLineComponentProps> & Readonly<{
-        children?: React.ReactNode | undefined;
-    }>): string;
+    getHexString(props?: Readonly<IColorPickerLineComponentProps>): string;
     componentDidUpdate(): void;
     componentDidMount(): void;
 
@@ -7584,9 +7586,7 @@ interface IColorLineComponentState {
 export class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
     constructor(props: IColorLineComponentProps);
     shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
-    getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
-        children?: React.ReactNode | undefined;
-    }>): Color4;
+    getValue(props?: Readonly<IColorLineComponentProps>): Color4;
     setColorFromString(colorString: string): void;
     setColor(newColor: Color4): void;
     switchExpandState(): void;
@@ -7886,7 +7886,7 @@ export const FlexibleGridContainer: FC<IFlexibleGridContainerProps>;
 
 }
 declare module "babylonjs-inspector/components/layout/FlexibleDropZone" {
-import { FC } from "react";
+import { FC, PropsWithChildren } from "react";
 /**
  * Arguments for the FlexibleDropZone component.
  */
@@ -7906,11 +7906,11 @@ export interface IFlexibleDropZoneProps {
  * @param props properties
  * @returns drop zone element
  */
-export const FlexibleDropZone: FC<IFlexibleDropZoneProps>;
+export const FlexibleDropZone: FC<PropsWithChildren<IFlexibleDropZoneProps>>;
 
 }
 declare module "babylonjs-inspector/components/layout/FlexibleDragHandler" {
-import { FC } from "react";
+import { FC, PropsWithChildren } from "react";
 /**
  * Arguments for the DragHandler component.
  */
@@ -7929,11 +7929,11 @@ export interface IFlexibleDragHandlerProps {
  * @param props properties
  * @returns DragHandler element
  */
-export const FlexibleDragHandler: FC<IFlexibleDragHandlerProps>;
+export const FlexibleDragHandler: FC<PropsWithChildren<IFlexibleDragHandlerProps>>;
 
 }
 declare module "babylonjs-inspector/components/layout/FlexibleColumn" {
-import { FC } from "react";
+import { FC, PropsWithChildren } from "react";
 /**
  * Arguments for the Column component.
  */
@@ -7949,7 +7949,7 @@ export interface IFlexibleColumnProps {
  * @param props
  * @returns
  */
-export const FlexibleColumn: FC<IFlexibleColumnProps>;
+export const FlexibleColumn: FC<PropsWithChildren<IFlexibleColumnProps>>;
 
 }
 declare module "babylonjs-inspector/components/layout/DraggableIcon" {
@@ -8114,7 +8114,7 @@ export const CommandButtonComponent: React.FC<ICommandButtonComponentProps>;
 
 }
 declare module "babylonjs-inspector/components/bars/CommandBarComponent" {
-import { FC } from "react";
+import { FC, PropsWithChildren } from "react";
 export interface ICommandBarComponentProps {
     onSaveButtonClicked?: () => void;
     onSaveToSnippetButtonClicked?: () => void;
@@ -8129,7 +8129,7 @@ export interface ICommandBarComponentProps {
     artboardColor?: string;
     artboardColorPickerColor?: string;
 }
-export const CommandBarComponent: FC<ICommandBarComponentProps>;
+export const CommandBarComponent: FC<PropsWithChildren<ICommandBarComponentProps>>;
 
 }
 declare module "babylonjs-inspector/colorPicker/hexColor" {
@@ -8288,8 +8288,12 @@ declare module INSPECTOR {
         private static _SceneExplorerHost;
         private static _ActionTabsHost;
         private static _EmbedHost;
-        private static _NewCanvasContainer;
         private static _PersistentPopupHost;
+        private static _SceneExplorerRoot;
+        private static _ActionTabsRoot;
+        private static _EmbedHostRoot;
+        private static _PersistentPopupRoot;
+        private static _NewCanvasContainer;
         private static _SceneExplorerWindow;
         private static _ActionTabsWindow;
         private static _EmbedHostWindow;
@@ -8361,7 +8365,7 @@ declare module INSPECTOR {
         onKeyUp?: (evt: KeyboardEvent) => void;
         onKeyDown?: (evt: KeyboardEvent) => void;
     }
-    export class PopupComponent extends React.Component<IPopupComponentProps, {
+    export class PopupComponent extends React.Component<React.PropsWithChildren<IPopupComponentProps>, {
         isComponentMounted: boolean;
         blockedByBrowser: boolean;
     }> {
@@ -8484,6 +8488,7 @@ declare module INSPECTOR {
         isSelected: boolean;
     }> {
         private _wasSelected;
+        private _thisRef;
         constructor(props: ITreeItemSelectableComponentProps);
         switchExpandedState(): void;
         shouldComponentUpdate(nextProps: ITreeItemSelectableComponentProps, nextState: {
@@ -12541,7 +12546,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props defines the split container properties
      * @returns the split container component
      */
-    export var SplitContainer: React.FC<ISplitContainerProps>;
+    export var SplitContainer: React.FC<React.PropsWithChildren<ISplitContainerProps>>;
 
 
 
@@ -14303,9 +14308,7 @@ declare module INSPECTOR.SharedUIComponents {
         constructor(props: IColorPickerLineProps);
         syncPositions(): void;
         shouldComponentUpdate(nextProps: IColorPickerLineProps, nextState: IColorPickerComponentState): boolean;
-        getHexString(props?: Readonly<IColorPickerLineProps> & Readonly<{
-            children?: React.ReactNode | undefined;
-        }>): string;
+        getHexString(props?: Readonly<IColorPickerLineProps>): string;
         componentDidUpdate(): void;
         componentDidMount(): void;
         render(): import("react/jsx-runtime").JSX.Element;
@@ -14338,9 +14341,7 @@ declare module INSPECTOR.SharedUIComponents {
     export class ColorLine extends React.Component<IColorLineProps, IColorLineComponentState> {
         constructor(props: IColorLineProps);
         shouldComponentUpdate(nextProps: IColorLineProps, nextState: IColorLineComponentState): boolean;
-        getValue(props?: Readonly<IColorLineProps> & Readonly<{
-            children?: React.ReactNode | undefined;
-        }>): BABYLON.Color4;
+        getValue(props?: Readonly<IColorLineProps>): BABYLON.Color4;
         setColorFromString(colorString: string): void;
         setColor(newColor: BABYLON.Color4): void;
         switchExpandState(): void;
@@ -14591,7 +14592,7 @@ declare module INSPECTOR.SharedUIComponents {
         title?: string;
         backgroundColor?: string;
     };
-    export var Button: React.FC<ButtonProps>;
+    export var Button: React.FC<React.PropsWithChildren<ButtonProps>>;
 
 
 
@@ -14681,7 +14682,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props
      * @returns
      */
-    export const NodeRenderer: (props: INodeRendererProps) => import("react/jsx-runtime").JSX.Element;
+    export const NodeRenderer: (props: React.PropsWithChildren<INodeRendererProps>) => import("react/jsx-runtime").JSX.Element;
 
 
 
@@ -14700,7 +14701,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props properties
      * @returns graph node container element
      */
-    export var GraphNodesContainer: React.FC<IGraphContainerProps>;
+    export var GraphNodesContainer: React.FC<React.PropsWithChildren<IGraphContainerProps>>;
 
 
 
@@ -14721,7 +14722,7 @@ declare module INSPECTOR.SharedUIComponents {
         highlighted?: boolean;
         parentContainerId: string;
     }
-    export var SingleGraphNode: React.FC<IGraphNodeProps>;
+    export var SingleGraphNode: React.FC<React.PropsWithChildren<IGraphNodeProps>>;
 
 
 
@@ -14745,7 +14746,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props
      * @returns
      */
-    export var GraphLinesContainer: React.FC<IGraphLinesContainerProps>;
+    export var GraphLinesContainer: React.FC<React.PropsWithChildren<IGraphLinesContainerProps>>;
 
 
 
@@ -14831,7 +14832,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props
      * @returns
      */
-    export var GraphContainer: React.FC<IGraphContainerProps>;
+    export var GraphContainer: React.FC<React.PropsWithChildren<IGraphContainerProps>>;
 
 
 
@@ -14883,7 +14884,7 @@ declare module INSPECTOR.SharedUIComponents {
      * drag the handle in a node and drop it in another node to create a connection.
      * @returns connector element
      */
-    export var GraphConnectorHandler: React.FC<IGraphConnectorHandlerProps>;
+    export var GraphConnectorHandler: React.FC<React.PropsWithChildren<IGraphConnectorHandlerProps>>;
 
 
 
@@ -15005,9 +15006,7 @@ declare module INSPECTOR.SharedUIComponents {
         constructor(props: IColorPickerLineComponentProps);
         syncPositions(): void;
         shouldComponentUpdate(nextProps: IColorPickerLineComponentProps, nextState: IColorPickerComponentState): boolean;
-        getHexString(props?: Readonly<IColorPickerLineComponentProps> & Readonly<{
-            children?: React.ReactNode | undefined;
-        }>): string;
+        getHexString(props?: Readonly<IColorPickerLineComponentProps>): string;
         componentDidUpdate(): void;
         componentDidMount(): void;
         render(): import("react/jsx-runtime").JSX.Element;
@@ -15040,9 +15039,7 @@ declare module INSPECTOR.SharedUIComponents {
     export class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
         constructor(props: IColorLineComponentProps);
         shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
-        getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
-            children?: React.ReactNode | undefined;
-        }>): BABYLON.Color4;
+        getValue(props?: Readonly<IColorLineComponentProps>): BABYLON.Color4;
         setColorFromString(colorString: string): void;
         setColor(newColor: BABYLON.Color4): void;
         switchExpandState(): void;
@@ -15402,7 +15399,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props properties
      * @returns drop zone element
      */
-    export var FlexibleDropZone: React.FC<IFlexibleDropZoneProps>;
+    export var FlexibleDropZone: React.FC<React.PropsWithChildren<IFlexibleDropZoneProps>>;
 
 
 
@@ -15430,7 +15427,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props properties
      * @returns DragHandler element
      */
-    export var FlexibleDragHandler: React.FC<IFlexibleDragHandlerProps>;
+    export var FlexibleDragHandler: React.FC<React.PropsWithChildren<IFlexibleDragHandlerProps>>;
 
 
 
@@ -15455,7 +15452,7 @@ declare module INSPECTOR.SharedUIComponents {
      * @param props
      * @returns
      */
-    export var FlexibleColumn: React.FC<IFlexibleColumnProps>;
+    export var FlexibleColumn: React.FC<React.PropsWithChildren<IFlexibleColumnProps>>;
 
 
 
@@ -15664,7 +15661,7 @@ declare module INSPECTOR.SharedUIComponents {
         artboardColor?: string;
         artboardColorPickerColor?: string;
     }
-    export var CommandBarComponent: React.FC<ICommandBarComponentProps>;
+    export var CommandBarComponent: React.FC<React.PropsWithChildren<ICommandBarComponentProps>>;
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "babylonjs-inspector",
-    "version": "8.1.1",
+    "version": "8.2.0",
     "main": "babylon.inspector.bundle.max.js",
     "types": "babylon.inspector.module.d.ts",
     "files": [
@@ -14,27 +14,27 @@
         "clean": "rimraf dist && rimraf babylon*.* -g"
     },
     "dependencies": {
-        "babylonjs": "^8.1.1",
-        "babylonjs-gui": "^8.1.1",
-        "babylonjs-gui-editor": "^8.1.1",
-        "babylonjs-loaders": "^8.1.1",
-        "babylonjs-materials": "^8.1.1",
-        "babylonjs-serializers": "^8.1.1"
+        "babylonjs": "^8.2.0",
+        "babylonjs-gui": "^8.2.0",
+        "babylonjs-gui-editor": "^8.2.0",
+        "babylonjs-loaders": "^8.2.0",
+        "babylonjs-materials": "^8.2.0",
+        "babylonjs-serializers": "^8.2.0"
     },
     "devDependencies": {
         "@dev/build-tools": "1.0.0",
         "@dev/inspector": "1.0.0",
         "@dev/shared-ui-components": "1.0.0",
-        "@types/react": "^17.0.30",
-        "@types/react-dom": "^17.0.10",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
         "css-loader": "^7.1.0",
-        "react": "^17.0.2",
+        "react": "^18.2.0",
         "react-contextmenu": "RaananW/react-contextmenu",
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.2.0",
         "sass-loader": "^16.0.0",
         "source-map-loader": "^4.0.0",
         "ts-loader": "^9.2.6",
-        "webpack": "^5.73.0",
+        "webpack": "^5.98.0",
         "webpack-cli": "^5.1.0",
         "webpack-merge": "^5.8.0"
     },