devexpress-dashboard-react 23.2.6 → 24.1.2-beta

package/README.md

@@ -1,19 +1,19 @@
-## About
-[DevExpress Dashboard](https://www.devexpress.com/products/net/dashboard/) for React helps you create dashboards and view them on the web and mobile devices. With the Dashboard React component, you can easily add DevExpress Dashboard to your React application and bind it to the ASP.NET Core or ASP.NET MVC dashboard backend.
- 
-- [Get Started - Build Web Dashboard Applications](https://docs.devexpress.com/Dashboard/400423#create-client-and-server-applications)
-- [Web Dashboard Technical Overview](https://docs.devexpress.com/Dashboard/119283/)
-- [Web Dashboard for React](https://docs.devexpress.com/Dashboard/400683/)
- 
-## Demos
- 
-- [HTML Javascript Dashboard demo](https://devexpress.github.io/web-dashboard-demo/)
-- [Web Dashboard demos](https://demos.devexpress.com/Dashboard/)
- 
-## License
-A valid, commercial license for the DevExpress Universal subscription is required to use this package. Use of this package is governed by the terms and conditions set forth in the applicable Developer Express Inc. End-User License Agreement (EULA) found at https://www.devexpress.com/support/eulas/.
- 
-Please visit https://www.devexpress.com for more information on acquiring and a subscription license.
- 
-## Support
+## About
+[DevExpress Dashboard](https://www.devexpress.com/products/net/dashboard/) for React helps you create dashboards and view them on the web and mobile devices. With the Dashboard React component, you can easily add DevExpress Dashboard to your React application and bind it to the ASP.NET Core or ASP.NET MVC dashboard backend.
+ 
+- [Get Started - Build Web Dashboard Applications](https://docs.devexpress.com/Dashboard/400423#create-client-and-server-applications)
+- [Web Dashboard Technical Overview](https://docs.devexpress.com/Dashboard/119283/)
+- [Web Dashboard for React](https://docs.devexpress.com/Dashboard/400683/)
+ 
+## Demos
+ 
+- [HTML Javascript Dashboard demo](https://devexpress.github.io/web-dashboard-demo/)
+- [Web Dashboard demos](https://demos.devexpress.com/Dashboard/)
+ 
+## License
+A valid, commercial license for the DevExpress Universal subscription is required to use this package. Use of this package is governed by the terms and conditions set forth in the applicable Developer Express Inc. End-User License Agreement (EULA) found at https://www.devexpress.com/support/eulas/.
+ 
+Please visit https://www.devexpress.com for more information on acquiring and a subscription license.
+ 
+## Support
 For any questions regarding reporting controls, please refer to our [DevExpress Support Center](https://www.devexpress.com/Support/Center).

package/dashboard-control.d.ts

@@ -1,56 +1,38 @@
-/// <reference types="react" />
+import * as React from "react";
+import { Ref, ReactElement } from "react";
 import dxDashboardControl, { Properties } from "devexpress-dashboard/integration/index";
-import { Component as BaseComponent, IHtmlOptions } from "devextreme-react/core/component";
-import NestedOption from "devextreme-react/core/nested-option";
-declare type IDashboardControlOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
+import { IHtmlOptions, IElementDescriptor } from "devextreme-react/core/component";
+type IDashboardControlOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
     defaultDashboardId?: string;
     defaultWorkingMode?: string;
     onDashboardIdChange?: (value: string) => void;
     onWorkingModeChange?: (value: string) => void;
 }>;
-declare class DashboardControl extends BaseComponent<React.PropsWithChildren<IDashboardControlOptions>> {
-    get instance(): dxDashboardControl;
-    protected _WidgetClass: typeof dxDashboardControl;
-    protected subscribableOptions: string[];
-    protected independentEvents: string[];
-    protected _defaults: {
-        defaultDashboardId: string;
-        defaultWorkingMode: string;
-    };
-    protected _expectedChildren: {
-        ajaxRemoteService: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        dataRequestOptions: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        extensions: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        fetchRemoteService: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-    };
+interface DashboardControlRef {
+    instance: () => dxDashboardControl;
 }
-declare type IAjaxRemoteServiceProps = React.PropsWithChildren<{
+declare const DashboardControl: (props: React.PropsWithChildren<IDashboardControlOptions> & {
+    ref?: Ref<DashboardControlRef>;
+}) => ReactElement | null;
+type IAjaxRemoteServiceProps = React.PropsWithChildren<{
     beforeSend?: ((jqXHR: any, settings: any) => any);
     complete?: ((jqXHR: any, textStatus: string) => any);
     headers?: Record<string, any>;
 }>;
-declare class AjaxRemoteService extends NestedOption<IAjaxRemoteServiceProps> {
-    static OptionName: string;
-}
-declare type IChartIndicatorsProps = React.PropsWithChildren<{
+declare const _componentAjaxRemoteService: React.MemoExoticComponent<(props: IAjaxRemoteServiceProps) => React.FunctionComponentElement<{
+    beforeSend?: (jqXHR: any, settings: any) => any;
+    complete?: (jqXHR: any, textStatus: string) => any;
+    headers?: Record<string, any>;
+}>>;
+declare const AjaxRemoteService: typeof _componentAjaxRemoteService & IElementDescriptor;
+type IChartIndicatorsProps = React.PropsWithChildren<{
     customIndicatorTypes?: Record<string, any>;
 }>;
-declare class ChartIndicators extends NestedOption<IChartIndicatorsProps> {
-    static OptionName: string;
-}
-declare type IDashboardExportProps = React.PropsWithChildren<{
+declare const _componentChartIndicators: React.MemoExoticComponent<(props: IChartIndicatorsProps) => React.FunctionComponentElement<{
+    customIndicatorTypes?: Record<string, any>;
+}>>;
+declare const ChartIndicators: typeof _componentChartIndicators & IElementDescriptor;
+type IDashboardExportProps = React.PropsWithChildren<{
     allowExportDashboard?: boolean;
     allowExportDashboardItems?: boolean;
     onExportDialogHidden?: ((args: {
@@ -66,10 +48,24 @@ declare type IDashboardExportProps = React.PropsWithChildren<{
         element: any;
     }) => void);
 }>;
-declare class DashboardExport extends NestedOption<IDashboardExportProps> {
-    static OptionName: string;
-}
-declare type IDashboardParameterDialogProps = React.PropsWithChildren<{
+declare const _componentDashboardExport: React.MemoExoticComponent<(props: IDashboardExportProps) => React.FunctionComponentElement<{
+    allowExportDashboard?: boolean;
+    allowExportDashboardItems?: boolean;
+    onExportDialogHidden?: (args: {
+        component: any;
+        element: any;
+    }) => void;
+    onExportDialogShowing?: (args: {
+        component: any;
+        element: any;
+    }) => void;
+    onExportDialogShown?: (args: {
+        component: any;
+        element: any;
+    }) => void;
+}>>;
+declare const DashboardExport: typeof _componentDashboardExport & IElementDescriptor;
+type IDashboardParameterDialogProps = React.PropsWithChildren<{
     onDynamicLookUpValuesLoaded?: ((args: {
         parameterName: string;
     }) => void);
@@ -89,10 +85,28 @@ declare type IDashboardParameterDialogProps = React.PropsWithChildren<{
         model: any;
     }) => any);
 }>;
-declare class DashboardParameterDialog extends NestedOption<IDashboardParameterDialogProps> {
-    static OptionName: string;
-}
-declare type IDataInspectorProps = React.PropsWithChildren<{
+declare const _componentDashboardParameterDialog: React.MemoExoticComponent<(props: IDashboardParameterDialogProps) => React.FunctionComponentElement<{
+    onDynamicLookUpValuesLoaded?: (args: {
+        parameterName: string;
+    }) => void;
+    onHidden?: (args: {
+        component: any;
+        element: any;
+        model: any;
+    }) => any;
+    onShowing?: (args: {
+        component: any;
+        element: any;
+        model: any;
+    }) => any;
+    onShown?: (args: {
+        component: any;
+        element: any;
+        model: any;
+    }) => any;
+}>>;
+declare const DashboardParameterDialog: typeof _componentDashboardParameterDialog & IElementDescriptor;
+type IDataInspectorProps = React.PropsWithChildren<{
     allowInspectAggregatedData?: boolean;
     allowInspectRawData?: boolean;
     onDialogHidden?: ((args: {
@@ -116,17 +130,41 @@ declare type IDataInspectorProps = React.PropsWithChildren<{
         element: any;
     }) => void);
 }>;
-declare class DataInspector extends NestedOption<IDataInspectorProps> {
-    static OptionName: string;
-}
-declare type IDataRequestOptionsProps = React.PropsWithChildren<{
+declare const _componentDataInspector: React.MemoExoticComponent<(props: IDataInspectorProps) => React.FunctionComponentElement<{
+    allowInspectAggregatedData?: boolean;
+    allowInspectRawData?: boolean;
+    onDialogHidden?: (args: {
+        component: any;
+        element: any;
+    }) => void;
+    onDialogShowing?: (args: {
+        component: any;
+        element: any;
+    }) => void;
+    onDialogShown?: (args: {
+        component: any;
+        element: any;
+    }) => void;
+    onGridContentReady?: (args: {
+        component: any;
+        element: any;
+    }) => void;
+    onGridInitialized?: (args: {
+        component: any;
+        element: any;
+    }) => void;
+}>>;
+declare const DataInspector: typeof _componentDataInspector & IElementDescriptor;
+type IDataRequestOptionsProps = React.PropsWithChildren<{
     itemDataLoadingMode?: string;
     itemDataRequestMode?: string;
 }>;
-declare class DataRequestOptions extends NestedOption<IDataRequestOptionsProps> {
-    static OptionName: string;
-}
-declare type IDataSourceWizardProps = React.PropsWithChildren<{
+declare const _componentDataRequestOptions: React.MemoExoticComponent<(props: IDataRequestOptionsProps) => React.FunctionComponentElement<{
+    itemDataLoadingMode?: string;
+    itemDataRequestMode?: string;
+}>>;
+declare const DataRequestOptions: typeof _componentDataRequestOptions & IElementDescriptor;
+type IDataSourceWizardProps = React.PropsWithChildren<{
     allowCreateNewJsonConnection?: boolean;
     enableCustomSql?: boolean;
     onCustomizeDataSourceWizard?: ((args: {
@@ -134,26 +172,31 @@ declare type IDataSourceWizardProps = React.PropsWithChildren<{
     }) => void);
     wizardSettings?: any;
 }>;
-declare class DataSourceWizard extends NestedOption<IDataSourceWizardProps> {
-    static OptionName: string;
-    static ExpectedChildren: {
-        wizardSettings: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-    };
-}
-declare type IDesignerToolbarProps = React.PropsWithChildren<{
+declare const _componentDataSourceWizard: React.MemoExoticComponent<(props: IDataSourceWizardProps) => React.FunctionComponentElement<{
+    allowCreateNewJsonConnection?: boolean;
+    enableCustomSql?: boolean;
+    onCustomizeDataSourceWizard?: (args: {
+        type: any;
+    }) => void;
+    wizardSettings?: any;
+}>>;
+declare const DataSourceWizard: typeof _componentDataSourceWizard & IElementDescriptor;
+type IDesignerToolbarProps = React.PropsWithChildren<{
     onPreparing?: ((args: {
         component: any;
         dashboard: any;
         items: Array<any | string>;
     }) => void);
 }>;
-declare class DesignerToolbar extends NestedOption<IDesignerToolbarProps> {
-    static OptionName: string;
-}
-declare type IExtensionsProps = React.PropsWithChildren<{
+declare const _componentDesignerToolbar: React.MemoExoticComponent<(props: IDesignerToolbarProps) => React.FunctionComponentElement<{
+    onPreparing?: (args: {
+        component: any;
+        dashboard: any;
+        items: Array<any | string>;
+    }) => void;
+}>>;
+declare const DesignerToolbar: typeof _componentDesignerToolbar & IElementDescriptor;
+type IExtensionsProps = React.PropsWithChildren<{
     chartIndicators?: Record<string, any> | {
         customIndicatorTypes?: Record<string, any>;
     };
@@ -351,84 +394,250 @@ declare type IExtensionsProps = React.PropsWithChildren<{
         }) => void);
     };
 }>;
-declare class Extensions extends NestedOption<IExtensionsProps> {
-    static OptionName: string;
-    static ExpectedChildren: {
-        chartIndicators: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        dashboardExport: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        dashboardParameterDialog: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        dataInspector: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        dataSourceWizard: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        designerToolbar: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        itemBindingPanel: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        itemOptionsPanel: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        mobileLayout: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        viewerApi: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
+declare const _componentExtensions: React.MemoExoticComponent<(props: IExtensionsProps) => React.FunctionComponentElement<{
+    chartIndicators?: Record<string, any> | {
+        customIndicatorTypes?: Record<string, any>;
     };
-}
-declare type IFetchRemoteServiceProps = React.PropsWithChildren<{
+    dashboardExport?: Record<string, any> | {
+        allowExportDashboard?: boolean;
+        allowExportDashboardItems?: boolean;
+        onExportDialogHidden?: (args: {
+            component: any;
+            element: any;
+        }) => void;
+        onExportDialogShowing?: (args: {
+            component: any;
+            element: any;
+        }) => void;
+        onExportDialogShown?: (args: {
+            component: any;
+            element: any;
+        }) => void;
+    };
+    dashboardParameterDialog?: Record<string, any> | {
+        onDynamicLookUpValuesLoaded?: (args: {
+            parameterName: string;
+        }) => void;
+        onHidden?: (args: {
+            component: any;
+            element: any;
+            model: any;
+        }) => any;
+        onShowing?: (args: {
+            component: any;
+            element: any;
+            model: any;
+        }) => any;
+        onShown?: (args: {
+            component: any;
+            element: any;
+            model: any;
+        }) => any;
+    };
+    dataInspector?: Record<string, any> | {
+        allowInspectAggregatedData?: boolean;
+        allowInspectRawData?: boolean;
+        onDialogHidden?: (args: {
+            component: any;
+            element: any;
+        }) => void;
+        onDialogShowing?: (args: {
+            component: any;
+            element: any;
+        }) => void;
+        onDialogShown?: (args: {
+            component: any;
+            element: any;
+        }) => void;
+        onGridContentReady?: (args: {
+            component: any;
+            element: any;
+        }) => void;
+        onGridInitialized?: (args: {
+            component: any;
+            element: any;
+        }) => void;
+    };
+    dataSourceWizard?: Record<string, any> | {
+        allowCreateNewJsonConnection?: boolean;
+        enableCustomSql?: boolean;
+        onCustomizeDataSourceWizard?: (args: {
+            type: any;
+        }) => void;
+        wizardSettings?: any;
+    };
+    designerToolbar?: Record<string, any> | {
+        onPreparing?: (args: {
+            component: any;
+            dashboard: any;
+            items: Array<any | string>;
+        }) => void;
+    };
+    itemBindingPanel?: Record<string, any> | {
+        onCustomizeDataItemContainerSections?: (args: {
+            addSection: (() => void);
+            dashboardItem: any;
+            dataItemContainer: any;
+        }) => void;
+    };
+    itemOptionsPanel?: Record<string, any> | {
+        onCustomizeSections?: (args: {
+            addSection: (() => void);
+            dashboardItem: any;
+        }) => void;
+    };
+    mobileLayout?: Record<string, any> | {
+        mobileLayoutEnabled?: string;
+    };
+    viewerApi?: Record<string, any> | {
+        onDashboardTitleToolbarUpdated?: (args: {
+            dashboard: any;
+            options: any;
+        }) => void;
+        onItemActionAvailabilityChanged?: (args: {
+            dashboardItem: any;
+            itemName: string;
+        }) => void;
+        onItemCaptionToolbarUpdated?: (args: {
+            dashboardItem: any;
+            itemName: string;
+            options: any;
+        }) => void;
+        onItemClick?: (args: {
+            dashboardItem: any;
+            getAxisPoint: (() => void);
+            getData: (() => void);
+            getDeltas: (() => void);
+            getDimensions: (() => void);
+            getMeasures: (() => void);
+            itemName: string;
+            requestUnderlyingData: (() => void);
+        }) => void;
+        onItemDrillDownStateChanged?: (args: {
+            action: any | any;
+            dashboardItem: any;
+            itemName: string;
+            values: Array<any>;
+        }) => void;
+        onItemElementCustomColor?: (args: {
+            dashboardItem: any;
+            getColor: (() => void);
+            getMeasures: (() => void);
+            getTargetElement: (() => void);
+            itemName: string;
+            setColor: (() => void);
+        }) => void;
+        onItemMasterFilterStateChanged?: (args: {
+            dashboardItem: any;
+            itemName: string;
+            values: Array<any>;
+        }) => void;
+        onItemSelectionChanged?: (args: {
+            dashboardItem: any;
+            getCurrentSelection: (() => void);
+            itemName: string;
+        }) => void;
+        onItemVisualInteractivity?: (args: {
+            dashboardItem: any;
+            enableHighlighting: (() => void);
+            getDefaultSelection: (() => void);
+            getSelectionMode: (() => void);
+            getTargetAxes: (() => void);
+            isHighlightingEnabled: (() => void);
+            itemName: string;
+            setDefaultSelection: (() => void);
+            setSelectionMode: (() => void);
+            setTargetAxes: (() => void);
+        }) => void;
+        onItemWidgetCreated?: (args: {
+            chartContext: any;
+            dashboardItem: any;
+            gaugeContext: any;
+            getWidget: (() => void);
+            gridContext: any;
+            itemData: any;
+            itemName: string;
+        }) => void;
+        onItemWidgetOptionsPrepared?: (args: {
+            chartContext: any;
+            dashboardItem: any;
+            gaugeContext: any;
+            gridContext: any;
+            itemData: any;
+            itemName: string;
+            options: Record<string, any>;
+        }) => void;
+        onItemWidgetUpdated?: (args: {
+            chartContext: any;
+            dashboardItem: any;
+            gaugeContext: any;
+            getWidget: (() => void);
+            gridContext: any;
+            itemData: any;
+            itemName: string;
+        }) => void;
+        onItemWidgetUpdating?: (args: {
+            chartContext: any;
+            dashboardItem: any;
+            gaugeContext: any;
+            getWidget: (() => void);
+            gridContext: any;
+            itemData: any;
+            itemName: string;
+        }) => void;
+        onSelectedTabPageChanged?: (args: {
+            previousPage: string;
+            selectedPage: string;
+            tabContainerName: string;
+        }) => void;
+    };
+}>>;
+declare const Extensions: typeof _componentExtensions & IElementDescriptor;
+type IFetchRemoteServiceProps = React.PropsWithChildren<{
     beforeSend?: ((settings: any) => void);
     headers?: Record<string, any>;
 }>;
-declare class FetchRemoteService extends NestedOption<IFetchRemoteServiceProps> {
-    static OptionName: string;
-}
-declare type IItemBindingPanelProps = React.PropsWithChildren<{
+declare const _componentFetchRemoteService: React.MemoExoticComponent<(props: IFetchRemoteServiceProps) => React.FunctionComponentElement<{
+    beforeSend?: (settings: any) => void;
+    headers?: Record<string, any>;
+}>>;
+declare const FetchRemoteService: typeof _componentFetchRemoteService & IElementDescriptor;
+type IItemBindingPanelProps = React.PropsWithChildren<{
     onCustomizeDataItemContainerSections?: ((args: {
         addSection: (() => void);
         dashboardItem: any;
         dataItemContainer: any;
     }) => void);
 }>;
-declare class ItemBindingPanel extends NestedOption<IItemBindingPanelProps> {
-    static OptionName: string;
-}
-declare type IItemOptionsPanelProps = React.PropsWithChildren<{
+declare const _componentItemBindingPanel: React.MemoExoticComponent<(props: IItemBindingPanelProps) => React.FunctionComponentElement<{
+    onCustomizeDataItemContainerSections?: (args: {
+        addSection: (() => void);
+        dashboardItem: any;
+        dataItemContainer: any;
+    }) => void;
+}>>;
+declare const ItemBindingPanel: typeof _componentItemBindingPanel & IElementDescriptor;
+type IItemOptionsPanelProps = React.PropsWithChildren<{
     onCustomizeSections?: ((args: {
         addSection: (() => void);
         dashboardItem: any;
     }) => void);
 }>;
-declare class ItemOptionsPanel extends NestedOption<IItemOptionsPanelProps> {
-    static OptionName: string;
-}
-declare type IMobileLayoutProps = React.PropsWithChildren<{
+declare const _componentItemOptionsPanel: React.MemoExoticComponent<(props: IItemOptionsPanelProps) => React.FunctionComponentElement<{
+    onCustomizeSections?: (args: {
+        addSection: (() => void);
+        dashboardItem: any;
+    }) => void;
+}>>;
+declare const ItemOptionsPanel: typeof _componentItemOptionsPanel & IElementDescriptor;
+type IMobileLayoutProps = React.PropsWithChildren<{
     mobileLayoutEnabled?: string;
 }>;
-declare class MobileLayout extends NestedOption<IMobileLayoutProps> {
-    static OptionName: string;
-}
-declare type IViewerApiProps = React.PropsWithChildren<{
+declare const _componentMobileLayout: React.MemoExoticComponent<(props: IMobileLayoutProps) => React.FunctionComponentElement<{
+    mobileLayoutEnabled?: string;
+}>>;
+declare const MobileLayout: typeof _componentMobileLayout & IElementDescriptor;
+type IViewerApiProps = React.PropsWithChildren<{
     onDashboardTitleToolbarUpdated?: ((args: {
         dashboard: any;
         options: any;
@@ -530,17 +739,121 @@ declare type IViewerApiProps = React.PropsWithChildren<{
         tabContainerName: string;
     }) => void);
 }>;
-declare class ViewerApi extends NestedOption<IViewerApiProps> {
-    static OptionName: string;
-}
-declare type IWizardSettingsProps = React.PropsWithChildren<{
+declare const _componentViewerApi: React.MemoExoticComponent<(props: IViewerApiProps) => React.FunctionComponentElement<{
+    onDashboardTitleToolbarUpdated?: (args: {
+        dashboard: any;
+        options: any;
+    }) => void;
+    onItemActionAvailabilityChanged?: (args: {
+        dashboardItem: any;
+        itemName: string;
+    }) => void;
+    onItemCaptionToolbarUpdated?: (args: {
+        dashboardItem: any;
+        itemName: string;
+        options: any;
+    }) => void;
+    onItemClick?: (args: {
+        dashboardItem: any;
+        getAxisPoint: (() => void);
+        getData: (() => void);
+        getDeltas: (() => void);
+        getDimensions: (() => void);
+        getMeasures: (() => void);
+        itemName: string;
+        requestUnderlyingData: (() => void);
+    }) => void;
+    onItemDrillDownStateChanged?: (args: {
+        action: any | any;
+        dashboardItem: any;
+        itemName: string;
+        values: Array<any>;
+    }) => void;
+    onItemElementCustomColor?: (args: {
+        dashboardItem: any;
+        getColor: (() => void);
+        getMeasures: (() => void);
+        getTargetElement: (() => void);
+        itemName: string;
+        setColor: (() => void);
+    }) => void;
+    onItemMasterFilterStateChanged?: (args: {
+        dashboardItem: any;
+        itemName: string;
+        values: Array<any>;
+    }) => void;
+    onItemSelectionChanged?: (args: {
+        dashboardItem: any;
+        getCurrentSelection: (() => void);
+        itemName: string;
+    }) => void;
+    onItemVisualInteractivity?: (args: {
+        dashboardItem: any;
+        enableHighlighting: (() => void);
+        getDefaultSelection: (() => void);
+        getSelectionMode: (() => void);
+        getTargetAxes: (() => void);
+        isHighlightingEnabled: (() => void);
+        itemName: string;
+        setDefaultSelection: (() => void);
+        setSelectionMode: (() => void);
+        setTargetAxes: (() => void);
+    }) => void;
+    onItemWidgetCreated?: (args: {
+        chartContext: any;
+        dashboardItem: any;
+        gaugeContext: any;
+        getWidget: (() => void);
+        gridContext: any;
+        itemData: any;
+        itemName: string;
+    }) => void;
+    onItemWidgetOptionsPrepared?: (args: {
+        chartContext: any;
+        dashboardItem: any;
+        gaugeContext: any;
+        gridContext: any;
+        itemData: any;
+        itemName: string;
+        options: Record<string, any>;
+    }) => void;
+    onItemWidgetUpdated?: (args: {
+        chartContext: any;
+        dashboardItem: any;
+        gaugeContext: any;
+        getWidget: (() => void);
+        gridContext: any;
+        itemData: any;
+        itemName: string;
+    }) => void;
+    onItemWidgetUpdating?: (args: {
+        chartContext: any;
+        dashboardItem: any;
+        gaugeContext: any;
+        getWidget: (() => void);
+        gridContext: any;
+        itemData: any;
+        itemName: string;
+    }) => void;
+    onSelectedTabPageChanged?: (args: {
+        previousPage: string;
+        selectedPage: string;
+        tabContainerName: string;
+    }) => void;
+}>>;
+declare const ViewerApi: typeof _componentViewerApi & IElementDescriptor;
+type IWizardSettingsProps = React.PropsWithChildren<{
     enableFederationDataSource?: boolean;
     enableJsonDataSource?: boolean;
     enableOlapDataSource?: boolean;
     enableSqlDataSource?: boolean;
 }>;
-declare class WizardSettings extends NestedOption<IWizardSettingsProps> {
-    static OptionName: string;
-}
+declare const _componentWizardSettings: React.MemoExoticComponent<(props: IWizardSettingsProps) => React.FunctionComponentElement<{
+    enableFederationDataSource?: boolean;
+    enableJsonDataSource?: boolean;
+    enableOlapDataSource?: boolean;
+    enableSqlDataSource?: boolean;
+}>>;
+declare const WizardSettings: typeof _componentWizardSettings & IElementDescriptor;
 export default DashboardControl;
-export { DashboardControl, IDashboardControlOptions, AjaxRemoteService, IAjaxRemoteServiceProps, ChartIndicators, IChartIndicatorsProps, DashboardExport, IDashboardExportProps, DashboardParameterDialog, IDashboardParameterDialogProps, DataInspector, IDataInspectorProps, DataRequestOptions, IDataRequestOptionsProps, DataSourceWizard, IDataSourceWizardProps, DesignerToolbar, IDesignerToolbarProps, Extensions, IExtensionsProps, FetchRemoteService, IFetchRemoteServiceProps, ItemBindingPanel, IItemBindingPanelProps, ItemOptionsPanel, IItemOptionsPanelProps, MobileLayout, IMobileLayoutProps, ViewerApi, IViewerApiProps, WizardSettings, IWizardSettingsProps };
+export { DashboardControl, IDashboardControlOptions, DashboardControlRef, AjaxRemoteService, IAjaxRemoteServiceProps, ChartIndicators, IChartIndicatorsProps, DashboardExport, IDashboardExportProps, DashboardParameterDialog, IDashboardParameterDialogProps, DataInspector, IDataInspectorProps, DataRequestOptions, IDataRequestOptionsProps, DataSourceWizard, IDataSourceWizardProps, DesignerToolbar, IDesignerToolbarProps, Extensions, IExtensionsProps, FetchRemoteService, IFetchRemoteServiceProps, ItemBindingPanel, IItemBindingPanelProps, ItemOptionsPanel, IItemOptionsPanelProps, MobileLayout, IMobileLayoutProps, ViewerApi, IViewerApiProps, WizardSettings, IWizardSettingsProps };

package/dashboard-control.js

@@ -1,134 +1,156 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WizardSettings = exports.ViewerApi = exports.MobileLayout = exports.ItemOptionsPanel = exports.ItemBindingPanel = exports.FetchRemoteService = exports.Extensions = exports.DesignerToolbar = exports.DataSourceWizard = exports.DataRequestOptions = exports.DataInspector = exports.DashboardParameterDialog = exports.DashboardExport = exports.ChartIndicators = exports.AjaxRemoteService = exports.DashboardControl = void 0;
+const React = require("react");
+const react_1 = require("react");
 const index_1 = require("devexpress-dashboard/integration/index");
-const PropTypes = require("prop-types");
 const component_1 = require("devextreme-react/core/component");
 const nested_option_1 = require("devextreme-react/core/nested-option");
-class DashboardControl extends component_1.Component {
-    constructor() {
-        super(...arguments);
-        this._WidgetClass = index_1.default;
-        this.subscribableOptions = ["dashboardId", "workingMode"];
-        this.independentEvents = ["onBeforeRender", "onDashboardBeginUpdate", "onDashboardEndUpdate", "onDashboardInitialized", "onDashboardInitializing", "onInitializing", "onItemBeginUpdate", "onItemEndUpdate"];
-        this._defaults = {
-            defaultDashboardId: "dashboardId",
-            defaultWorkingMode: "workingMode"
-        };
-        this._expectedChildren = {
-            ajaxRemoteService: { optionName: "ajaxRemoteService", isCollectionItem: false },
-            dataRequestOptions: { optionName: "dataRequestOptions", isCollectionItem: false },
-            extensions: { optionName: "extensions", isCollectionItem: false },
-            fetchRemoteService: { optionName: "fetchRemoteService", isCollectionItem: false }
-        };
-    }
-    get instance() {
-        return this._instance;
-    }
-}
+const DashboardControl = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
+    const baseRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        instance() {
+            var _a;
+            return (_a = baseRef.current) === null || _a === void 0 ? void 0 : _a.getInstance();
+        }
+    }), [baseRef.current]);
+    const subscribableOptions = (0, react_1.useMemo)(() => (["dashboardId", "workingMode"]), []);
+    const independentEvents = (0, react_1.useMemo)(() => (["onBeforeRender", "onDashboardBeginUpdate", "onDashboardEndUpdate", "onDashboardInitialized", "onDashboardInitializing", "onInitializing", "onItemBeginUpdate", "onItemEndUpdate"]), []);
+    const defaults = (0, react_1.useMemo)(() => ({
+        defaultDashboardId: "dashboardId",
+        defaultWorkingMode: "workingMode",
+    }), []);
+    const expectedChildren = (0, react_1.useMemo)(() => ({
+        ajaxRemoteService: { optionName: "ajaxRemoteService", isCollectionItem: false },
+        dataRequestOptions: { optionName: "dataRequestOptions", isCollectionItem: false },
+        extensions: { optionName: "extensions", isCollectionItem: false },
+        fetchRemoteService: { optionName: "fetchRemoteService", isCollectionItem: false }
+    }), []);
+    return (React.createElement((component_1.Component), Object.assign({ WidgetClass: index_1.default, ref: baseRef, subscribableOptions,
+        independentEvents,
+        defaults,
+        expectedChildren }, props)));
+}));
 exports.DashboardControl = DashboardControl;
-DashboardControl.propTypes = {
-    ajaxRemoteService: PropTypes.object,
-    allowMaximizeItems: PropTypes.bool,
-    dashboardId: PropTypes.string,
-    dataRequestOptions: PropTypes.object,
-    encodeHtml: PropTypes.bool,
-    endpoint: PropTypes.string,
-    extensions: PropTypes.object,
-    fetchRemoteService: PropTypes.object,
-    initialDashboardId: PropTypes.string,
-    initialDashboardState: PropTypes.string,
-    limitVisibleDataMode: PropTypes.string,
-    loadDefaultDashboard: PropTypes.bool,
-    nonce: PropTypes.string,
-    onBeforeRender: PropTypes.func,
-    onDashboardBeginUpdate: PropTypes.func,
-    onDashboardEndUpdate: PropTypes.func,
-    onDashboardInitialized: PropTypes.func,
-    onDashboardInitializing: PropTypes.func,
-    onDashboardStateChanged: PropTypes.func,
-    onInitializing: PropTypes.func,
-    onItemBeginUpdate: PropTypes.func,
-    onItemEndUpdate: PropTypes.func,
-    onOptionChanged: PropTypes.func,
-    resizeByTimer: PropTypes.bool,
-    showConfirmationOnBrowserClosing: PropTypes.bool,
-    useNeutralFilterMode: PropTypes.bool,
-    workingMode: PropTypes.string
-};
-class AjaxRemoteService extends nested_option_1.default {
-}
+const _componentAjaxRemoteService = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const AjaxRemoteService = Object.assign(_componentAjaxRemoteService, {
+    OptionName: "ajaxRemoteService",
+});
 exports.AjaxRemoteService = AjaxRemoteService;
-AjaxRemoteService.OptionName = "ajaxRemoteService";
-class ChartIndicators extends nested_option_1.default {
-}
+const _componentChartIndicators = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const ChartIndicators = Object.assign(_componentChartIndicators, {
+    OptionName: "chartIndicators",
+});
 exports.ChartIndicators = ChartIndicators;
-ChartIndicators.OptionName = "chartIndicators";
-class DashboardExport extends nested_option_1.default {
-}
+const _componentDashboardExport = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const DashboardExport = Object.assign(_componentDashboardExport, {
+    OptionName: "dashboardExport",
+});
 exports.DashboardExport = DashboardExport;
-DashboardExport.OptionName = "dashboardExport";
-class DashboardParameterDialog extends nested_option_1.default {
-}
+const _componentDashboardParameterDialog = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const DashboardParameterDialog = Object.assign(_componentDashboardParameterDialog, {
+    OptionName: "dashboardParameterDialog",
+});
 exports.DashboardParameterDialog = DashboardParameterDialog;
-DashboardParameterDialog.OptionName = "dashboardParameterDialog";
-class DataInspector extends nested_option_1.default {
-}
+const _componentDataInspector = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const DataInspector = Object.assign(_componentDataInspector, {
+    OptionName: "dataInspector",
+});
 exports.DataInspector = DataInspector;
-DataInspector.OptionName = "dataInspector";
-class DataRequestOptions extends nested_option_1.default {
-}
+const _componentDataRequestOptions = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const DataRequestOptions = Object.assign(_componentDataRequestOptions, {
+    OptionName: "dataRequestOptions",
+});
 exports.DataRequestOptions = DataRequestOptions;
-DataRequestOptions.OptionName = "dataRequestOptions";
-class DataSourceWizard extends nested_option_1.default {
-}
+const _componentDataSourceWizard = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const DataSourceWizard = Object.assign(_componentDataSourceWizard, {
+    OptionName: "dataSourceWizard",
+    ExpectedChildren: {
+        wizardSettings: { optionName: "wizardSettings", isCollectionItem: false }
+    },
+});
 exports.DataSourceWizard = DataSourceWizard;
-DataSourceWizard.OptionName = "dataSourceWizard";
-DataSourceWizard.ExpectedChildren = {
-    wizardSettings: { optionName: "wizardSettings", isCollectionItem: false }
-};
-class DesignerToolbar extends nested_option_1.default {
-}
+const _componentDesignerToolbar = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const DesignerToolbar = Object.assign(_componentDesignerToolbar, {
+    OptionName: "designerToolbar",
+});
 exports.DesignerToolbar = DesignerToolbar;
-DesignerToolbar.OptionName = "designerToolbar";
-class Extensions extends nested_option_1.default {
-}
+const _componentExtensions = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const Extensions = Object.assign(_componentExtensions, {
+    OptionName: "extensions",
+    ExpectedChildren: {
+        chartIndicators: { optionName: "chartIndicators", isCollectionItem: false },
+        dashboardExport: { optionName: "dashboardExport", isCollectionItem: false },
+        dashboardParameterDialog: { optionName: "dashboardParameterDialog", isCollectionItem: false },
+        dataInspector: { optionName: "dataInspector", isCollectionItem: false },
+        dataSourceWizard: { optionName: "dataSourceWizard", isCollectionItem: false },
+        designerToolbar: { optionName: "designerToolbar", isCollectionItem: false },
+        itemBindingPanel: { optionName: "itemBindingPanel", isCollectionItem: false },
+        itemOptionsPanel: { optionName: "itemOptionsPanel", isCollectionItem: false },
+        mobileLayout: { optionName: "mobileLayout", isCollectionItem: false },
+        viewerApi: { optionName: "viewerApi", isCollectionItem: false }
+    },
+});
 exports.Extensions = Extensions;
-Extensions.OptionName = "extensions";
-Extensions.ExpectedChildren = {
-    chartIndicators: { optionName: "chartIndicators", isCollectionItem: false },
-    dashboardExport: { optionName: "dashboardExport", isCollectionItem: false },
-    dashboardParameterDialog: { optionName: "dashboardParameterDialog", isCollectionItem: false },
-    dataInspector: { optionName: "dataInspector", isCollectionItem: false },
-    dataSourceWizard: { optionName: "dataSourceWizard", isCollectionItem: false },
-    designerToolbar: { optionName: "designerToolbar", isCollectionItem: false },
-    itemBindingPanel: { optionName: "itemBindingPanel", isCollectionItem: false },
-    itemOptionsPanel: { optionName: "itemOptionsPanel", isCollectionItem: false },
-    mobileLayout: { optionName: "mobileLayout", isCollectionItem: false },
-    viewerApi: { optionName: "viewerApi", isCollectionItem: false }
-};
-class FetchRemoteService extends nested_option_1.default {
-}
+const _componentFetchRemoteService = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const FetchRemoteService = Object.assign(_componentFetchRemoteService, {
+    OptionName: "fetchRemoteService",
+});
 exports.FetchRemoteService = FetchRemoteService;
-FetchRemoteService.OptionName = "fetchRemoteService";
-class ItemBindingPanel extends nested_option_1.default {
-}
+const _componentItemBindingPanel = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const ItemBindingPanel = Object.assign(_componentItemBindingPanel, {
+    OptionName: "itemBindingPanel",
+});
 exports.ItemBindingPanel = ItemBindingPanel;
-ItemBindingPanel.OptionName = "itemBindingPanel";
-class ItemOptionsPanel extends nested_option_1.default {
-}
+const _componentItemOptionsPanel = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const ItemOptionsPanel = Object.assign(_componentItemOptionsPanel, {
+    OptionName: "itemOptionsPanel",
+});
 exports.ItemOptionsPanel = ItemOptionsPanel;
-ItemOptionsPanel.OptionName = "itemOptionsPanel";
-class MobileLayout extends nested_option_1.default {
-}
+const _componentMobileLayout = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const MobileLayout = Object.assign(_componentMobileLayout, {
+    OptionName: "mobileLayout",
+});
 exports.MobileLayout = MobileLayout;
-MobileLayout.OptionName = "mobileLayout";
-class ViewerApi extends nested_option_1.default {
-}
+const _componentViewerApi = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const ViewerApi = Object.assign(_componentViewerApi, {
+    OptionName: "viewerApi",
+});
 exports.ViewerApi = ViewerApi;
-ViewerApi.OptionName = "viewerApi";
-class WizardSettings extends nested_option_1.default {
-}
+const _componentWizardSettings = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), Object.assign({}, props));
+});
+const WizardSettings = Object.assign(_componentWizardSettings, {
+    OptionName: "wizardSettings",
+});
 exports.WizardSettings = WizardSettings;
-WizardSettings.OptionName = "wizardSettings";
 exports.default = DashboardControl;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "devexpress-dashboard-react",
   "author": "Developer Express Inc.",
-  "version": "23.2.6",
+  "version": "24.1.2-beta",
   "description": "A component that integrates DevExpress Web Dashboard in a React application",
   "homepage": "https://www.devexpress.com/products/net/dashboard/",
   "bugs": "https://www.devexpress.com/support/",
@@ -17,9 +17,9 @@
     "prop-types": "^15.6.1"
   },
   "peerDependencies": {
-    "devexpress-dashboard": "23.2.6",
-    "devextreme": "23.2.6",
-    "devextreme-react": "23.2.6",
-    "@devexpress/analytics-core": "23.2.6"
+    "devexpress-dashboard": "24.1.2-beta",
+    "devextreme": "24.1.2-beta",
+    "devextreme-react": "24.1.2-beta",
+    "@devexpress/analytics-core": "24.1.2-beta"
   }
 }