devexpress-reporting-react 24.1.2-beta

package/README.md

@@ -0,0 +1,30 @@
+## About
+
+DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
+
+## Install
+
+To install with `npm`, run the following command:
+
+```shell
+npm install devexpress-reporting-react devexpress-reporting @devexpress/analytics-core devextreme devextreme-react
+```
+
+## Documentation
+
+To get started with HTML/JS DevExpress Reporting controls, see the following pages of the documentation:
+- [HTML5 Document Viewer](https://docs.devexpress.com/XtraReports/17738/create-end-user-reporting-applications/web-reporting/asp-net-webforms-reporting/document-viewer/html5-document-viewer)
+- [End-User Report Designer for ASP.NET](https://docs.devexpress.com/XtraReports/17103/create-end-user-reporting-applications/web-reporting/asp-net-webforms-reporting/end-user-report-designer)
+
+## Demos
+
+Take a look at the [DevExpress Reporting web demos]
+(http://demos.devexpress.com/XtraReportsDemos/).
+
+## License
+
+A commercial license for DevExpress ASP.NET controls is required to use this package. Please visit [this page](https://www.devexpress.com/buy/net/) for more information about [licensing](https://www.devexpress.com/support/eulas/).
+
+## Support
+
+For any questions regarding the use of DevExpress Reporting tools, please refer to our [Support Center](https://www.devexpress.com/Support/Center).

package/core/options-manager.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    getControlOptions: (props: any, propTypes: any, defaultProps: any, validChildComponents: any) => any;
+    getEventRaiser: <T>(callbacks: {
+        [key: string]: () => void;
+    }, getSender: () => T) => (eventName: any, args?: any) => any;
+};
+export default _default;

package/core/options-manager.js

@@ -0,0 +1,27 @@
+import React from 'react';
+const getComponentOptions = (props, propTypes, defaultProps) => {
+    const validProps = Object.keys(propTypes);
+    const propKeys = Object.keys(props).filter(propName => validProps.indexOf(propName) !== -1 && propName !== 'children');
+    return propKeys.length === 0 ? void 0 : propKeys.reduce((acc, propName) => {
+        acc[propName] = typeof props[propName] !== 'undefined' ? props[propName] : defaultProps && defaultProps[propName];
+        return acc;
+    }, {});
+};
+const getControlOptions = (props, propTypes, defaultProps, validChildComponents) => {
+    var _a;
+    const controlOptions = (_a = getComponentOptions(props, propTypes, defaultProps)) !== null && _a !== void 0 ? _a : {};
+    const childReactElements = React.Children.toArray(props.children)
+        .filter(x => React.isValidElement(x));
+    validChildComponents && Object.keys(validChildComponents).forEach(optionsComponentkey => {
+        const componentRecord = validChildComponents[optionsComponentkey];
+        const childComponent = childReactElements.find(x => x && x.type && x.type.displayName === componentRecord.component.displayName);
+        if (childComponent) {
+            controlOptions[optionsComponentkey] = getControlOptions(childComponent.props, componentRecord.component.propTypes, componentRecord.component.defaultProps, componentRecord.children);
+        }
+    });
+    return controlOptions;
+};
+const getEventRaiser = (callbacks, getSender) => {
+    return (eventName, args) => callbacks && callbacks[eventName] && callbacks[eventName].call(getSender(), { sender: getSender(), args: args, component: void 0 }); // TODO - ensure component is optional
+};
+export default { getControlOptions, getEventRaiser };

package/dx-report-designer/DxReportDesigner.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type DxReportDesignerPropsType = {
+    reportUrl?: string;
+    height?: string;
+    width?: string;
+    cssClass?: string;
+    developmentMode?: boolean;
+    children?: React.ReactNode | React.ReactNode[];
+};
+declare const DxReportDesigner: React.FC<DxReportDesignerPropsType>;
+export default DxReportDesigner;

package/dx-report-designer/DxReportDesigner.js

@@ -0,0 +1,43 @@
+import * as PropTypes from 'prop-types';
+import React from 'react';
+import Callbacks from './options/Callbacks';
+import RequestSettings from './options/RequestSettings';
+import DesignerModelSettings from './options/DesignerModelSettings';
+import OptionsManager from '../core/options-manager';
+import { validChildComponents as designerModelSettingsValidChildren } from './options/DesignerModelSettings';
+import { JSReportDesignerBinding } from 'devexpress-reporting/dx-reportdesigner';
+import * as ko from 'knockout';
+const validChildComponents = {
+    'callbacks': { component: Callbacks },
+    'requestOptions': { component: RequestSettings },
+    'designerModelSettings': { component: DesignerModelSettings, children: designerModelSettingsValidChildren },
+};
+const DxReportDesigner = (props) => {
+    const designerRef = React.useRef(null);
+    React.useEffect(() => {
+        const options = OptionsManager.getControlOptions(props, DxReportDesigner.propTypes, DxReportDesignerDefaultProps, validChildComponents);
+        const callbacks = options.callbacks;
+        options.callbacks = { designer: {}, preview: {} };
+        const binding = new JSReportDesignerBinding(options, OptionsManager.getEventRaiser(callbacks, () => binding.sender));
+        binding.applyBindings(designerRef.current);
+        return () => {
+            ko.cleanNode(designerRef.current);
+        };
+    }, [props]);
+    return (React.createElement("div", { ref: designerRef, className: props.cssClass, style: { width: props.width || DxReportDesignerDefaultProps.width, height: props.height || DxReportDesignerDefaultProps.height } },
+        React.createElement("div", { "data-bind": "dxReportDesigner: $data" })));
+};
+DxReportDesigner.displayName = 'DxReportDesigner';
+DxReportDesigner.propTypes = {
+    height: PropTypes.string,
+    width: PropTypes.string,
+    cssClass: PropTypes.string,
+    developmentMode: PropTypes.bool,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+const DxReportDesignerDefaultProps = {
+    height: '800px',
+    width: '100%',
+    cssClass: '',
+};
+export default DxReportDesigner;

package/dx-report-designer/index.d.ts

@@ -0,0 +1,9 @@
+import DxReportDesigner from './DxReportDesigner';
+import Callbacks from './options/Callbacks';
+import DataSourceSetting from './options/DataSourceSettings';
+import DesignerModelSettings from './options/DesignerModelSettings';
+import PreviewSettings from './options/PreviewSettings';
+import RequestSettings from './options/RequestSettings';
+import WizardSettings from './options/WizardSettings';
+export { Callbacks, DataSourceSetting, DesignerModelSettings, PreviewSettings, RequestSettings, WizardSettings, DxReportDesigner };
+export default DxReportDesigner;

package/dx-report-designer/index.js

@@ -0,0 +1,9 @@
+import DxReportDesigner from './DxReportDesigner';
+import Callbacks from './options/Callbacks';
+import DataSourceSetting from './options/DataSourceSettings';
+import DesignerModelSettings from './options/DesignerModelSettings';
+import PreviewSettings from './options/PreviewSettings';
+import RequestSettings from './options/RequestSettings';
+import WizardSettings from './options/WizardSettings';
+export { Callbacks, DataSourceSetting, DesignerModelSettings, PreviewSettings, RequestSettings, WizardSettings, DxReportDesigner };
+export default DxReportDesigner;

package/dx-report-designer/options/Callbacks.d.ts

@@ -0,0 +1,38 @@
+import { FunctionComponent } from 'react';
+type CallbacksPropsType = {
+    CustomizeElements?: () => void;
+    ExitDesigner?: () => void;
+    ReportSaving?: () => void;
+    ReportSaved?: () => void;
+    ReportOpened?: () => void;
+    ReportOpening?: () => void;
+    TabChanged?: () => void;
+    ReportTabClosing?: () => void;
+    ReportTabClosed?: () => void;
+    ComponentAdded?: () => void;
+    CustomizeParameterEditors?: () => void;
+    CustomizeParameterLookUpSource?: () => void;
+    CustomizeSaveDialog?: () => void;
+    CustomizeSaveAsDialog?: () => void;
+    CustomizeOpenDialog?: () => void;
+    CustomizeToolbox?: () => void;
+    CustomizeFieldListActions?: () => void;
+    CustomizeMenuActions?: () => void;
+    CustomizeLocalization?: () => void;
+    OnInitializing?: () => void;
+    BeforeRender?: () => void;
+    OnServerError?: () => void;
+    CustomizeWizard?: () => void;
+    PreviewClick?: () => void;
+    PreviewCustomizeElements?: () => void;
+    PreviewCustomizeMenuActions?: () => void;
+    PreviewEditingFieldChanged?: () => void;
+    PreviewDocumentReady?: () => void;
+    PreviewParametersReset?: () => void;
+    PreviewParametersInitialized?: () => void;
+    PreviewCustomizeExportOptions?: () => void;
+    PreviewParametersSubmitted?: () => void;
+    PreviewOnExport?: () => void;
+};
+declare const Callbacks: FunctionComponent<CallbacksPropsType>;
+export default Callbacks;

package/dx-report-designer/options/Callbacks.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+const Callbacks = () => null;
+Callbacks.displayName = 'DxReportDesignerCallbacks';
+Callbacks.propTypes = {
+    CustomizeElements: PropTypes.func,
+    ExitDesigner: PropTypes.func,
+    ReportSaving: PropTypes.func,
+    ReportSaved: PropTypes.func,
+    ReportOpened: PropTypes.func,
+    ReportOpening: PropTypes.func,
+    TabChanged: PropTypes.func,
+    ReportTabClosing: PropTypes.func,
+    ReportTabClosed: PropTypes.func,
+    ComponentAdded: PropTypes.func,
+    CustomizeParameterEditors: PropTypes.func,
+    CustomizeParameterLookUpSource: PropTypes.func,
+    CustomizeSaveDialog: PropTypes.func,
+    CustomizeSaveAsDialog: PropTypes.func,
+    CustomizeOpenDialog: PropTypes.func,
+    CustomizeToolbox: PropTypes.func,
+    CustomizeFieldListActions: PropTypes.func,
+    CustomizeMenuActions: PropTypes.func,
+    CustomizeLocalization: PropTypes.func,
+    OnInitializing: PropTypes.func,
+    BeforeRender: PropTypes.func,
+    OnServerError: PropTypes.func,
+    CustomizeWizard: PropTypes.func,
+    PreviewClick: PropTypes.func,
+    PreviewCustomizeElements: PropTypes.func,
+    PreviewCustomizeMenuActions: PropTypes.func,
+    PreviewEditingFieldChanged: PropTypes.func,
+    PreviewDocumentReady: PropTypes.func,
+    PreviewParametersReset: PropTypes.func,
+    PreviewParametersInitialized: PropTypes.func,
+    PreviewCustomizeExportOptions: PropTypes.func,
+    PreviewParametersSubmitted: PropTypes.func,
+    PreviewOnExport: PropTypes.func,
+};
+export default Callbacks;

package/dx-report-designer/options/DataSourceSettings.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+type DataSourceSettingsPropsType = {
+    allowAddDataSource?: boolean;
+    allowRemoveDataSource?: boolean;
+    allowEditDataSource?: boolean;
+};
+declare const DataSourceSettings: FunctionComponent<DataSourceSettingsPropsType>;
+export default DataSourceSettings;

package/dx-report-designer/options/DataSourceSettings.js

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+const DataSourceSettings = () => null;
+DataSourceSettings.displayName = 'DxReportDesignerDataSourceSettings';
+DataSourceSettings.propTypes = {
+    allowAddDataSource: PropTypes.bool,
+    allowRemoveDataSource: PropTypes.bool,
+    allowEditDataSource: PropTypes.bool,
+};
+export default DataSourceSettings;

package/dx-report-designer/options/DesignerModelSettings.d.ts

@@ -0,0 +1,63 @@
+import { FunctionComponent } from 'react';
+export declare const validChildComponents: {
+    reportPreviewSettings: {
+        component: import("react").FC<{
+            children: import("react").ReactNode | import("react").ReactNode[];
+        }>;
+        children: {
+            progressbarSettings: {
+                component: FunctionComponent<{
+                    position?: string;
+                    keepOnVisibleArea?: boolean;
+                }>;
+            };
+            exportSettings: {
+                component: FunctionComponent<{
+                    useSameTab?: boolean;
+                    useAsynchronousExport?: boolean;
+                    showPrintNotificationDialog?: boolean;
+                }>;
+            };
+            searchSettings: {
+                component: FunctionComponent<{
+                    useAsyncSearch?: boolean;
+                    searchEnabled?: boolean;
+                }>;
+            };
+        };
+    };
+    wizardSettings: {
+        component: FunctionComponent<{
+            useMasterDetailWizard?: boolean;
+            enableJsonDataSource?: boolean;
+            enableSqlDataSource?: boolean;
+            enableObjectDataSource?: boolean;
+            enableFederationDataSource?: boolean;
+            useFullscreenWizard?: boolean;
+            reportWizardTemplatesSearchBoxVisibility?: import("devexpress-reporting/dx-reportdesigner").SearchBoxVisibilityMode;
+        }>;
+    };
+    dataSourceSettings: {
+        component: FunctionComponent<{
+            allowAddDataSource?: boolean;
+            allowRemoveDataSource?: boolean;
+            allowEditDataSource?: boolean;
+        }>;
+    };
+    parameterEditingSettings: {
+        component: FunctionComponent<{
+            allowReorderParameters?: boolean;
+            allowEditParameterCollection?: boolean;
+            allowEditProperties?: boolean;
+            allowEditParameterGroups?: boolean;
+            allowEditParameterSeparators?: boolean;
+        }>;
+    };
+};
+type DesignerModelSettingsPropsType = {
+    allowMDI?: boolean;
+    rightToLeft?: boolean;
+    children?: React.ReactNode | React.ReactNode[];
+};
+declare const DesignerModelSettings: FunctionComponent<DesignerModelSettingsPropsType>;
+export default DesignerModelSettings;

package/dx-report-designer/options/DesignerModelSettings.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import PreviewSettings from './PreviewSettings';
+import WizardSettings from './WizardSettings';
+import DataSourceSettings from './DataSourceSettings';
+import { validChildComponents as reportPreviewValidChildrenComponents } from './PreviewSettings';
+import ReportDesignerParameterEditingSettings from './ParameterEditingSettings';
+export const validChildComponents = {
+    'reportPreviewSettings': { component: PreviewSettings, children: reportPreviewValidChildrenComponents },
+    'wizardSettings': { component: WizardSettings },
+    'dataSourceSettings': { component: DataSourceSettings },
+    'parameterEditingSettings': { component: ReportDesignerParameterEditingSettings },
+};
+const DesignerModelSettings = () => null;
+DesignerModelSettings.displayName = 'DxReportDesignerDesignerModelSettings';
+DesignerModelSettings.propTypes = {
+    allowMDI: PropTypes.bool,
+    rightToLeft: PropTypes.bool,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+export default DesignerModelSettings;

package/dx-report-designer/options/ParameterEditingSettings.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+type ParameterEditingSettingsPropsType = {
+    allowReorderParameters?: boolean;
+    allowEditParameterCollection?: boolean;
+    allowEditProperties?: boolean;
+    allowEditParameterGroups?: boolean;
+    allowEditParameterSeparators?: boolean;
+};
+declare const ReportDesignerParameterEditingSettings: FunctionComponent<ParameterEditingSettingsPropsType>;
+export default ReportDesignerParameterEditingSettings;

package/dx-report-designer/options/ParameterEditingSettings.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+const ReportDesignerParameterEditingSettings = () => null;
+ReportDesignerParameterEditingSettings.displayName = 'DxReportDesignerParameterEditingSettings';
+ReportDesignerParameterEditingSettings.propTypes = {
+    allowReorderParameters: PropTypes.bool,
+    allowEditParameterCollection: PropTypes.bool,
+    allowEditProperties: PropTypes.bool,
+    allowEditParameterGroups: PropTypes.bool,
+    allowEditParameterSeparators: PropTypes.bool,
+};
+export default ReportDesignerParameterEditingSettings;

package/dx-report-designer/options/PreviewSettings.d.ts

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+export declare const validChildComponents: {
+    progressbarSettings: {
+        component: React.FunctionComponent<{
+            position?: string;
+            keepOnVisibleArea?: boolean;
+        }>;
+    };
+    exportSettings: {
+        component: React.FunctionComponent<{
+            useSameTab?: boolean;
+            useAsynchronousExport?: boolean;
+            showPrintNotificationDialog?: boolean;
+        }>;
+    };
+    searchSettings: {
+        component: React.FunctionComponent<{
+            useAsyncSearch?: boolean;
+            searchEnabled?: boolean;
+        }>;
+    };
+};
+type PreviewSettingsPropsType = {
+    children: React.ReactNode | React.ReactNode[];
+};
+declare const PreviewSettings: FC<PreviewSettingsPropsType>;
+export default PreviewSettings;

package/dx-report-designer/options/PreviewSettings.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+import ProgressBarSettings from '../../dx-report-viewer/options/ProgressBarSettings';
+import ExportSettings from '../../dx-report-viewer/options/ExportSettings';
+import SearchSettings from '../../dx-report-viewer/options/SearchSettings';
+export const validChildComponents = {
+    'progressbarSettings': { component: ProgressBarSettings },
+    'exportSettings': { component: ExportSettings },
+    'searchSettings': { component: SearchSettings },
+};
+const PreviewSettings = () => null;
+PreviewSettings.displayName = 'DxReportDesignerPreviewSettings';
+PreviewSettings.propTypes = {
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+export default PreviewSettings;

package/dx-report-designer/options/RequestSettings.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+export type RequestSettingsPropsType = {
+    getDesignerModelAction: string;
+    getLocalizationAction?: string;
+    host: string;
+};
+declare const RequestSettings: FunctionComponent<RequestSettingsPropsType>;
+export default RequestSettings;

package/dx-report-designer/options/RequestSettings.js

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+const RequestSettings = () => null;
+RequestSettings.displayName = 'DxReportDesignerRequestSettings';
+RequestSettings.propTypes = {
+    getDesignerModelAction: PropTypes.string.isRequired,
+    getLocalizationAction: PropTypes.string,
+    host: PropTypes.string.isRequired
+};
+export default RequestSettings;

package/dx-report-designer/options/WizardSettings.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent } from 'react';
+import { SearchBoxVisibilityMode } from 'devexpress-reporting/designer/utils/inititalizer';
+type WizardSettingsPropsType = {
+    useMasterDetailWizard?: boolean;
+    enableJsonDataSource?: boolean;
+    enableSqlDataSource?: boolean;
+    enableObjectDataSource?: boolean;
+    enableFederationDataSource?: boolean;
+    useFullscreenWizard?: boolean;
+    reportWizardTemplatesSearchBoxVisibility?: SearchBoxVisibilityMode;
+};
+declare const WizardSettings: FunctionComponent<WizardSettingsPropsType>;
+export default WizardSettings;

package/dx-report-designer/options/WizardSettings.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+import { SearchBoxVisibilityMode } from 'devexpress-reporting/designer/utils/inititalizer';
+const WizardSettings = () => null;
+WizardSettings.displayName = 'DxReportDesignerWizardSettings';
+WizardSettings.propTypes = {
+    useMasterDetailWizard: PropTypes.bool,
+    enableJsonDataSource: PropTypes.bool,
+    enableSqlDataSource: PropTypes.bool,
+    enableObjectDataSource: PropTypes.bool,
+    enableFederationDataSource: PropTypes.bool,
+    useFullscreenWizard: PropTypes.bool,
+    reportWizardTemplatesSearchBoxVisibility: PropTypes.oneOf(Object.keys(SearchBoxVisibilityMode).map(x => SearchBoxVisibilityMode[x]))
+};
+export default WizardSettings;

package/dx-report-viewer/DxReportViewer.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TemplateEngine } from './core/template-engine';
+import '@devexpress/analytics-core/dx-analytics-core-svg-templates';
+import 'devexpress-reporting/dx-reporting-svg-templates';
+type DxReportViewerPropsType = {
+    height?: string;
+    width?: string;
+    cssClass?: string;
+    templateEngine?: TemplateEngine;
+    isMobile?: boolean;
+    accessibilityCompliant?: boolean;
+    keepReportOnComponentDisposal?: boolean;
+    reportUrl?: string;
+    rtl?: boolean;
+    developmentMode?: boolean;
+    children?: React.ReactNode;
+};
+declare const DxReportViewer: React.FunctionComponent<DxReportViewerPropsType>;
+export default DxReportViewer;

package/dx-report-viewer/DxReportViewer.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Callbacks from './options/Callbacks';
+import ExportSettings from './options/ExportSettings';
+import MobileModeSettings from './options/MobileModeSettings';
+import ProgressBarSettings from './options/ProgressBarSettings';
+import RemoteSettings from './options/RemoteSettings';
+import RequestSettings from './options/RequestSettings';
+import SearchSettings from './options/SearchSettings';
+import TabPanelSettings from './options/TabPanelSettings';
+import OptionsManager from '../core/options-manager';
+import { TemplateEngine } from './core/template-engine';
+import { JSReportViewerBinding } from 'devexpress-reporting/viewer/binding/jsReportViewerBinding';
+import AccessibilitySettingsProvider from './components/core/AccessibilitySettingsProvider';
+import TemplateEngineProvider from './components/core/TemplateEngineProvider';
+import Template from './components/core/Template';
+import { ViewModelChangedEvent, viewModelGeneratorSettings } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
+import '@devexpress/analytics-core/dx-analytics-core-svg-templates';
+import 'devexpress-reporting/dx-reporting-svg-templates';
+const validChildComponents = {
+    'callbacks': { component: Callbacks },
+    'exportSettings': { component: ExportSettings },
+    'mobileModeSettings': { component: MobileModeSettings },
+    'progressBarSettings': { component: ProgressBarSettings },
+    'remoteSettings': { component: RemoteSettings },
+    'requestOptions': { component: RequestSettings },
+    'searchSettings': { component: SearchSettings },
+    'tabPanelSettings': { component: TabPanelSettings },
+};
+const DxReportViewer = (props) => {
+    const viewerRef = React.useRef(null);
+    const [viewModel, setViewModel] = React.useState(null);
+    viewModelGeneratorSettings.ensureChangesImmutable = false;
+    React.useEffect(() => {
+        let disposeViewModelSubscription;
+        const updateViewModel = (model) => {
+            var _a, _b;
+            const viewModel = (_a = model.GetPreviewModel()) === null || _a === void 0 ? void 0 : _a.getViewModel();
+            setViewModel(Object.assign({}, viewModel));
+            disposeViewModelSubscription && disposeViewModelSubscription();
+            disposeViewModelSubscription = (_b = viewModel === null || viewModel === void 0 ? void 0 : viewModel._viewModelEvents) === null || _b === void 0 ? void 0 : _b.on(ViewModelChangedEvent, () => setViewModel(Object.assign({}, viewModel)));
+        };
+        const controlOptions = OptionsManager.getControlOptions(props, DxReportViewer.propTypes, DxReportViewerDefaultProps, validChildComponents);
+        const binding = new JSReportViewerBinding(Object.assign(Object.assign({}, controlOptions), { callbacks: {} }), OptionsManager.getEventRaiser(controlOptions.callbacks, () => binding.sender), false);
+        binding.applyBindings(viewerRef.current);
+        const model = binding.sender;
+        updateViewModel(model);
+        const disposeModelSubscription = model.events.on('propertyChanged', (args) => {
+            if (args.propertyName === 'previewModel') {
+                updateViewModel(model);
+            }
+        });
+        return () => {
+            binding.dispose();
+            disposeModelSubscription && disposeModelSubscription();
+            disposeViewModelSubscription && disposeViewModelSubscription();
+        };
+    }, [props]);
+    return (React.createElement(TemplateEngineProvider, { templateEngine: props.templateEngine },
+        React.createElement(AccessibilitySettingsProvider, { value: { accessibilityCompliant: viewModel === null || viewModel === void 0 ? void 0 : viewModel.accessibilityCompliant } },
+            React.createElement("div", { ref: viewerRef, className: props.cssClass, style: { width: props.width || DxReportViewerDefaultProps.width, height: DxReportViewerDefaultProps.height } },
+                React.createElement("div", { className: "dx-designer" }, !!viewModel && React.createElement(Template, { template: "dx-designer", data: viewModel }))))));
+};
+DxReportViewer.displayName = 'DxReportViewer';
+DxReportViewer.propTypes = {
+    height: PropTypes.string,
+    width: PropTypes.string,
+    cssClass: PropTypes.string,
+    templateEngine: PropTypes.instanceOf(TemplateEngine),
+    isMobile: PropTypes.bool,
+    accessibilityCompliant: PropTypes.bool,
+    keepReportOnComponentDisposal: PropTypes.bool,
+    reportUrl: PropTypes.string,
+    rtl: PropTypes.bool,
+    developmentMode: PropTypes.bool,
+    children: PropTypes.node,
+};
+const DxReportViewerDefaultProps = {
+    height: '800px',
+    width: '100%',
+    cssClass: '',
+};
+export default DxReportViewer;

package/dx-report-viewer/components/analytics/Actions/Actions.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IActionViewModel, IContentActionViewModel } from '@devexpress/analytics-core/widgets/utils';
+declare const Actions: React.FC<{
+    data: Array<IActionViewModel | IContentActionViewModel>;
+}>;
+export default Actions;

package/dx-report-viewer/components/analytics/Actions/Actions.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Template from '../../core/Template';
+const DefaultAction = ({ action }) => {
+    var _a, _b, _c;
+    return (React.createElement("div", { style: { display: action.visible ? '' : 'none' }, className: `dxrd-toolbar-item ${action.actionClass}` },
+        React.createElement("div", { role: "button", className: "dx-accessibility-toolbar-item dx-accessibility-focus-border-accented", "aria-label": (_a = action.block) === null || _a === void 0 ? void 0 : _a.attr['aria-label'], "aria-disabled": (_b = action.block) === null || _b === void 0 ? void 0 : _b.attr['aria-disabled'], "aria-pressed": (_c = action.block) === null || _c === void 0 ? void 0 : _c.attr['aria-pressed'] },
+            React.createElement("div", { className: action.image.class, title: action.displayText, onClick: action.click },
+                React.createElement(Template, { template: action.image.templateName, data: null })),
+            React.createElement("div", { className: "dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary", hidden: !action.hasSeparator }))));
+};
+const Action = ({ action }) => {
+    if (!action.templateName)
+        return React.createElement(DefaultAction, { action: action });
+    else
+        return React.createElement(Template, { template: action.templateName, data: action['contentData'] || action });
+};
+const Actions = ({ data }) => {
+    return (React.createElement(React.Fragment, null, data.map((action, index) => (React.createElement("div", { key: index, style: { display: 'inline-block', verticalAlign: 'top' } },
+        React.createElement(Action, { action: action }))))));
+};
+export default Actions;

package/dx-report-viewer/components/analytics/Actions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Actions';
+export { default } from './Actions';

package/dx-report-viewer/components/analytics/Actions/index.js

@@ -0,0 +1,2 @@
+export * from './Actions';
+export { default } from './Actions';

package/dx-report-viewer/components/analytics/Designer/Designer.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IDesignerPart } from '@devexpress/analytics-core/core/utils/_utils.designerPart';
+type ViewModel = {
+    parts?: IDesignerPart[];
+    surfaceClass: (element: HTMLElement) => string;
+    rootStyle: string;
+    rtl?: boolean;
+    addOns?: IDesignerPart[];
+    accessibilityCompliant?: any;
+    designMode?: any;
+};
+declare const Designer: React.FC<{
+    data: ViewModel;
+}>;
+export default Designer;

package/dx-report-viewer/components/analytics/Designer/Designer.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Template from '../../core/Template';
+const Designer = ({ data }) => {
+    var _a, _b;
+    const rootElt = React.useRef();
+    const [surfaceClassName, setSurfaceClassName] = React.useState('');
+    React.useEffect(() => {
+        if (rootElt.current && data.surfaceClass) {
+            setSurfaceClassName(data.surfaceClass(rootElt.current));
+        }
+    }, [data, rootElt.current, setSurfaceClassName]);
+    return (React.createElement("div", { ref: rootElt, tabIndex: -1, className: `dx-designer-viewport ${surfaceClassName} ${data.accessibilityCompliant ? 'dx-accessibility' : ''}` },
+        React.createElement("div", { className: `dxrd-designer-wrapper dx-editors dxd-surface-back-color dxd-scrollbar-color ${data.rtl ? 'dx-rtl' : 'dx-ltr'} ${data.rootStyle}`, hidden: data.designMode && data.designMode() }, (_a = data.parts) === null || _a === void 0 ? void 0 : _a.map(part => React.createElement(Template, { key: part.id, template: part.templateName, data: part.viewModel || part.model }))),
+        React.createElement("div", null, (_b = data.addOns) === null || _b === void 0 ? void 0 : _b.map(addon => React.createElement(Template, { key: addon.id, template: addon.templateName, data: addon.model }))),
+        React.createElement("div", { id: "dxrd-designer-last-focus-item-blank", className: "dxrd-visually-hidden", tabIndex: -1 })));
+};
+export default Designer;

package/dx-report-viewer/components/analytics/Designer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Designer';
+export { default } from './Designer';

package/dx-report-viewer/components/analytics/Designer/index.js

@@ -0,0 +1,2 @@
+export * from './Designer';
+export { default } from './Designer';