devexpress-reporting-react 24.1.2-beta → 24.1.4

package/README.md

@@ -23,7 +23,7 @@ Take a look at the [DevExpress Reporting web demos]
 
 ## 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/).
+A [commercial license](https://www.devexpress.com/support/eulas/) for the DevExpress Reporting Web UI components (Document Viewer, Report Designer) is required to use this package. Please review [the Reporting section on this page](https://www.devexpress.com/subscriptions/reporting/web/#Pricing) to determine which subscription includes a license for the Web UI components you plan to use in your application.
 
 ## Support
 

package/core/options-manager.js

@@ -8,8 +8,7 @@ const getComponentOptions = (props, propTypes, defaultProps) => {
     }, {});
 };
 const getControlOptions = (props, propTypes, defaultProps, validChildComponents) => {
-    var _a;
-    const controlOptions = (_a = getComponentOptions(props, propTypes, defaultProps)) !== null && _a !== void 0 ? _a : {};
+    const controlOptions = getComponentOptions(props, propTypes, defaultProps) ?? {};
     const childReactElements = React.Children.toArray(props.children)
         .filter(x => React.isValidElement(x));
     validChildComponents && Object.keys(validChildComponents).forEach(optionsComponentkey => {

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

@@ -1,5 +1,6 @@
 import React from 'react';
-type DxReportDesignerPropsType = {
+import { JSReportDesigner } from 'devexpress-reporting/dx-reportdesigner';
+export type DxReportDesignerProps = {
     reportUrl?: string;
     height?: string;
     width?: string;
@@ -7,5 +8,8 @@ type DxReportDesignerPropsType = {
     developmentMode?: boolean;
     children?: React.ReactNode | React.ReactNode[];
 };
-declare const DxReportDesigner: React.FC<DxReportDesignerPropsType>;
+export type DxReportDesignerRef = {
+    instance: () => JSReportDesigner;
+};
+declare const DxReportDesigner: React.ForwardRefExoticComponent<DxReportDesignerProps & React.RefAttributes<DxReportDesignerRef>>;
 export default DxReportDesigner;

package/dx-report-designer/DxReportDesigner.js

@@ -1,7 +1,7 @@
 import * as PropTypes from 'prop-types';
 import React from 'react';
 import Callbacks from './options/Callbacks';
-import RequestSettings from './options/RequestSettings';
+import RequestOptions from './options/RequestOptions';
 import DesignerModelSettings from './options/DesignerModelSettings';
 import OptionsManager from '../core/options-manager';
 import { validChildComponents as designerModelSettingsValidChildren } from './options/DesignerModelSettings';
@@ -9,30 +9,43 @@ import { JSReportDesignerBinding } from 'devexpress-reporting/dx-reportdesigner'
 import * as ko from 'knockout';
 const validChildComponents = {
     'callbacks': { component: Callbacks },
-    'requestOptions': { component: RequestSettings },
+    'requestOptions': { component: RequestOptions },
     'designerModelSettings': { component: DesignerModelSettings, children: designerModelSettingsValidChildren },
 };
-const DxReportDesigner = (props) => {
+const DxReportDesigner = React.forwardRef(({ reportUrl, ...props }, ref) => {
     const designerRef = React.useRef(null);
+    const [designerBinding, setDesignerBinding] = React.useState(null);
+    React.useImperativeHandle(ref, () => ({
+        instance() {
+            return designerBinding?.sender;
+        }
+    }), [designerBinding]);
     React.useEffect(() => {
-        const options = OptionsManager.getControlOptions(props, DxReportDesigner.propTypes, DxReportDesignerDefaultProps, validChildComponents);
+        if (designerBinding) {
+            designerBinding.sender.OpenReport(reportUrl);
+        }
+    }, [reportUrl]);
+    React.useEffect(() => {
+        const options = OptionsManager.getControlOptions({ ...props, reportUrl }, DxReportDesigner.propTypes, DxReportDesignerDefaultProps, validChildComponents);
         const callbacks = options.callbacks;
         options.callbacks = { designer: {}, preview: {} };
-        const binding = new JSReportDesignerBinding(options, OptionsManager.getEventRaiser(callbacks, () => binding.sender));
+        const binding = new JSReportDesignerBinding(options, OptionsManager.getEventRaiser(callbacks, () => binding?.sender));
         binding.applyBindings(designerRef.current);
+        setDesignerBinding(binding);
         return () => {
-            ko.cleanNode(designerRef.current);
+            designerRef.current && 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,
+    reportUrl: PropTypes.string,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 };
 const DxReportDesignerDefaultProps = {

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

@@ -1,9 +1,11 @@
-import DxReportDesigner from './DxReportDesigner';
+import DxReportDesigner, { DxReportDesignerRef, DxReportDesignerProps } from './DxReportDesigner';
 import Callbacks from './options/Callbacks';
-import DataSourceSetting from './options/DataSourceSettings';
+import DataSourceSettings from './options/DataSourceSettings';
 import DesignerModelSettings from './options/DesignerModelSettings';
 import PreviewSettings from './options/PreviewSettings';
-import RequestSettings from './options/RequestSettings';
+import RequestOptions from './options/RequestOptions';
 import WizardSettings from './options/WizardSettings';
-export { Callbacks, DataSourceSetting, DesignerModelSettings, PreviewSettings, RequestSettings, WizardSettings, DxReportDesigner };
+import ParameterEditingSettings from './options/ParameterEditingSettings';
+export { Callbacks, DataSourceSettings, DesignerModelSettings, PreviewSettings, RequestOptions, WizardSettings, ParameterEditingSettings, DxReportDesigner };
+export type { DxReportDesignerRef, DxReportDesignerProps };
 export default DxReportDesigner;

package/dx-report-designer/index.js

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

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

@@ -1,38 +1,39 @@
 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;
+    CustomizeElements?: (args: any) => void;
+    ExitDesigner?: (args: any) => void;
+    ReportSaving?: (args: any) => void;
+    ReportSaved?: (args: any) => void;
+    ReportOpened?: (args: any) => void;
+    ReportOpening?: (args: any) => void;
+    TabChanged?: (args: any) => void;
+    ReportTabClosing?: (args: any) => void;
+    ReportTabClosed?: (args: any) => void;
+    ComponentAdded?: (args: any) => void;
+    CustomizeParameterEditors?: (args: any) => void;
+    CustomizeParameterProperties?: (args: any) => void;
+    CustomizeSaveDialog?: (args: any) => void;
+    CustomizeSaveAsDialog?: (args: any) => void;
+    CustomizeOpenDialog?: (args: any) => void;
+    CustomizeToolbox?: (args: any) => void;
+    CustomizeFieldListActions?: (args: any) => void;
+    CustomizeMenuActions?: (args: any) => void;
+    CustomizeLocalization?: (args: any) => void;
+    OnInitializing?: (args: any) => void;
+    BeforeRender?: (args: any) => void;
+    OnServerError?: (args: any) => void;
+    CustomizeWizard?: (args: any) => void;
+    PreviewClick?: (args: any) => void;
+    PreviewCustomizeElements?: (args: any) => void;
+    PreviewCustomizeMenuActions?: (args: any) => void;
+    PreviewEditingFieldChanged?: (args: any) => void;
+    PreviewDocumentReady?: (args: any) => void;
+    PreviewParametersReset?: (args: any) => void;
+    PreviewCustomizeParameterLookUpSource?: (args: any) => void;
+    PreviewParametersInitialized?: (args: any) => void;
+    PreviewCustomizeExportOptions?: (args: any) => void;
+    PreviewParametersSubmitted?: (args: any) => void;
+    PreviewOnExport?: (args: any) => void;
 };
 declare const Callbacks: FunctionComponent<CallbacksPropsType>;
 export default Callbacks;

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

@@ -13,7 +13,7 @@ Callbacks.propTypes = {
     ReportTabClosed: PropTypes.func,
     ComponentAdded: PropTypes.func,
     CustomizeParameterEditors: PropTypes.func,
-    CustomizeParameterLookUpSource: PropTypes.func,
+    CustomizeParameterProperties: PropTypes.func,
     CustomizeSaveDialog: PropTypes.func,
     CustomizeSaveAsDialog: PropTypes.func,
     CustomizeOpenDialog: PropTypes.func,
@@ -31,6 +31,7 @@ Callbacks.propTypes = {
     PreviewEditingFieldChanged: PropTypes.func,
     PreviewDocumentReady: PropTypes.func,
     PreviewParametersReset: PropTypes.func,
+    PreviewCustomizeParameterLookUpSource: PropTypes.func,
     PreviewParametersInitialized: PropTypes.func,
     PreviewCustomizeExportOptions: PropTypes.func,
     PreviewParametersSubmitted: PropTypes.func,

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

@@ -3,12 +3,12 @@ import PreviewSettings from './PreviewSettings';
 import WizardSettings from './WizardSettings';
 import DataSourceSettings from './DataSourceSettings';
 import { validChildComponents as reportPreviewValidChildrenComponents } from './PreviewSettings';
-import ReportDesignerParameterEditingSettings from './ParameterEditingSettings';
+import ParameterEditingSettings from './ParameterEditingSettings';
 export const validChildComponents = {
     'reportPreviewSettings': { component: PreviewSettings, children: reportPreviewValidChildrenComponents },
     'wizardSettings': { component: WizardSettings },
     'dataSourceSettings': { component: DataSourceSettings },
-    'parameterEditingSettings': { component: ReportDesignerParameterEditingSettings },
+    'parameterEditingSettings': { component: ParameterEditingSettings },
 };
 const DesignerModelSettings = () => null;
 DesignerModelSettings.displayName = 'DxReportDesignerDesignerModelSettings';

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

@@ -6,5 +6,5 @@ type ParameterEditingSettingsPropsType = {
     allowEditParameterGroups?: boolean;
     allowEditParameterSeparators?: boolean;
 };
-declare const ReportDesignerParameterEditingSettings: FunctionComponent<ParameterEditingSettingsPropsType>;
-export default ReportDesignerParameterEditingSettings;
+declare const ParameterEditingSettings: FunctionComponent<ParameterEditingSettingsPropsType>;
+export default ParameterEditingSettings;

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

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

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

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

package/dx-report-designer/options/{RequestSettings.js → RequestOptions.js}

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

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import { JSReportViewer } from 'devexpress-reporting/viewer/binding/jsReportViewer';
 import { TemplateEngine } from './core/template-engine';
 import '@devexpress/analytics-core/dx-analytics-core-svg-templates';
 import 'devexpress-reporting/dx-reporting-svg-templates';
-type DxReportViewerPropsType = {
+export type DxReportViewerProps = {
     height?: string;
     width?: string;
     cssClass?: string;
@@ -15,5 +16,8 @@ type DxReportViewerPropsType = {
     developmentMode?: boolean;
     children?: React.ReactNode;
 };
-declare const DxReportViewer: React.FunctionComponent<DxReportViewerPropsType>;
+export type DxReportViewerRef = {
+    instance: () => JSReportViewer;
+};
+declare const DxReportViewer: React.ForwardRefExoticComponent<DxReportViewerProps & React.RefAttributes<DxReportViewerRef>>;
 export default DxReportViewer;

package/dx-report-viewer/DxReportViewer.js

@@ -5,7 +5,7 @@ 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 RequestOptions from './options/RequestOptions';
 import SearchSettings from './options/SearchSettings';
 import TabPanelSettings from './options/TabPanelSettings';
 import OptionsManager from '../core/options-manager';
@@ -23,26 +23,39 @@ const validChildComponents = {
     'mobileModeSettings': { component: MobileModeSettings },
     'progressBarSettings': { component: ProgressBarSettings },
     'remoteSettings': { component: RemoteSettings },
-    'requestOptions': { component: RequestSettings },
+    'requestOptions': { component: RequestOptions },
     'searchSettings': { component: SearchSettings },
     'tabPanelSettings': { component: TabPanelSettings },
 };
-const DxReportViewer = (props) => {
+const DxReportViewer = React.forwardRef(({ reportUrl, ...props }, ref) => {
     const viewerRef = React.useRef(null);
     const [viewModel, setViewModel] = React.useState(null);
+    const [viewerBinding, setViewerBinding] = React.useState(null);
+    React.useImperativeHandle(ref, () => ({
+        instance() {
+            return viewerBinding?.sender;
+        }
+    }), [viewerBinding]);
     viewModelGeneratorSettings.ensureChangesImmutable = false;
+    React.useEffect(() => {
+        if (viewerBinding && viewModel) {
+            viewerBinding.sender.OpenReport(reportUrl);
+            setViewModel({ ...viewModel });
+        }
+    }, [reportUrl]);
     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));
+            const viewModel = model.GetPreviewModel()?.getViewModel();
+            setViewModel({ ...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)));
+            disposeViewModelSubscription = viewModel?._viewModelEvents?.on(ViewModelChangedEvent, () => setViewModel({ ...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);
+        const controlOptions = OptionsManager.getControlOptions({ ...props, reportUrl }, DxReportViewer.propTypes, DxReportViewerDefaultProps, validChildComponents);
+        let binding;
+        binding = new JSReportViewerBinding({ ...controlOptions, callbacks: {} }, OptionsManager.getEventRaiser(controlOptions.callbacks, () => binding?.sender), false);
         binding.applyBindings(viewerRef.current);
+        setViewerBinding(binding);
         const model = binding.sender;
         updateViewModel(model);
         const disposeModelSubscription = model.events.on('propertyChanged', (args) => {
@@ -51,16 +64,20 @@ const DxReportViewer = (props) => {
             }
         });
         return () => {
-            binding.dispose();
             disposeModelSubscription && disposeModelSubscription();
             disposeViewModelSubscription && disposeViewModelSubscription();
+            setViewModel(null);
+            setViewerBinding(null);
+            setTimeout(() => {
+                binding && binding.dispose();
+            });
         };
-    }, [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 } },
+    }, []);
+    return (React.createElement(TemplateEngineProvider, { templateEngine: props.templateEngine ?? new TemplateEngine() },
+        React.createElement(AccessibilitySettingsProvider, { value: { accessibilityCompliant: !!viewModel?.accessibilityCompliant } },
+            React.createElement("div", { ref: viewerRef, className: props.cssClass, style: { width: props.width || DxReportViewerDefaultProps.width, height: props.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,

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

@@ -1,13 +1,10 @@
 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 DefaultAction = ({ action }) => (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": action.block?.attr['aria-label'], "aria-disabled": action.block?.attr['aria-disabled'], "aria-pressed": action.block?.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 });

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

@@ -1,7 +1,6 @@
 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(() => {
@@ -10,8 +9,8 @@ const Designer = ({ data }) => {
         }
     }, [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", { 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() }, data.parts?.map(part => React.createElement(Template, { key: part.id, template: part.templateName, data: part.viewModel || part.model }))),
+        React.createElement("div", null, data.addOns?.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/Properties/CollectionEditor/CollectionEditor.js

@@ -34,7 +34,7 @@ const CollectionEditorWrapper = ({ data, contentTemplate }) => {
         setViewModel(editorViewModel);
         return () => {
             subscription && subscription();
-            editorModel === null || editorModel === void 0 ? void 0 : editorModel.dispose();
+            editorModel?.dispose();
             setViewModel(null);
         };
     }, []);

package/dx-report-viewer/components/analytics/Properties/Editors/EditorBase/EditorBase.js

@@ -9,9 +9,8 @@ React.createElement("div", null,
     React.createElement(Template, { className: `dx-collapsing-image dxrd-display-inline-block ${!data.collapsed ? 'dx-image-expanded' : ''}`, template: "dxrd-svg-collapsed" }),
     React.createElement("div", { className: "dx-group-header-font", title: data.displayName, "data-bind": data.textToSearch ? `searchHighlighting: { text: displayName, textToSearch: ${data.textToSearch} }` : undefined }, !data.textToSearch ? data.displayName : undefined)));
 const EditorLabel = ({ data }) => {
-    var _a;
     const buttonWithTemplateRef = React.useRef();
-    useDxButtonWithTemplate(buttonWithTemplateRef, { onClick: (_a = data.editorDescriptionAddon) === null || _a === void 0 ? void 0 : _a.data.onClick, icon: 'dxrd-svg-tabs-description_info' });
+    useDxButtonWithTemplate(buttonWithTemplateRef, { onClick: data.editorDescriptionAddon?.data.onClick, icon: 'dxrd-svg-tabs-description_info' });
     return (React.createElement(React.Fragment, null,
         React.createElement("label", { className: `propertygrid-editor-displayName ${data.isRequired ? ' dx-field-label-required' : ''}`, title: data.displayName, htmlFor: data.editorInputId, style: { fontWeight: data.isPropertyModified ? 'Bold' : '' }, "data-bind": data.textToSearch ? `searchHighlighting: { text: displayName, textToSearch: ${data.textToSearch} }` : undefined }, !data.textToSearch ? data.displayName : undefined),
         data.editorDescriptionAddon && React.createElement("div", { className: "propertygrid-editor-description", ref: buttonWithTemplateRef })));

package/dx-report-viewer/components/analytics/Properties/Editors/SelectBox/SelectBoxEditor.js

@@ -7,14 +7,11 @@ export const SelectBoxEditorBase = (getEditorOptions) => ({ data }) => {
     const selectBoxRef = React.useRef();
     const args = {
         getEditorOptions,
-        getPrivateWidgetOptions: () => {
-            var _a;
-            return ({
-                allowClearing: (_a = data.editorOptions) === null || _a === void 0 ? void 0 : _a.allowClearing,
-                displayCustomValue: true,
-                encodeNoDataText: true,
-            });
-        },
+        getPrivateWidgetOptions: () => ({
+            allowClearing: data.editorOptions?.allowClearing,
+            displayCustomValue: true,
+            encodeNoDataText: true,
+        }),
     };
     const options = useEditorOptions(selectBoxRef, data, args);
     const dropDownOptions = useDropDownOptions(selectBoxRef, ({ container }) => ({ container }));

package/dx-report-viewer/components/analytics/Properties/Editors/editorHooks.js

@@ -25,7 +25,7 @@ const useEditorExtendedOptions = (ref, data, getPrivateWidgetOptions) => {
     }, [data.extendedOptions]);
 };
 const onPropertyChanged = (expectedWidgetOptions, widgetOptionsState, setWidgetOptionsState) => {
-    const nextWidgetState = Object.assign({}, widgetOptionsState);
+    const nextWidgetState = { ...widgetOptionsState };
     for (const name in expectedWidgetOptions) {
         if (typeof expectedWidgetOptions[name] !== 'function' && expectedWidgetOptions[name] !== widgetOptionsState[name]) {
             if (Array.isArray(expectedWidgetOptions[name])) {

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

@@ -21,7 +21,7 @@ const TabPanel = ({ data }) => {
 const TabPanelItem = ({ tab }) => {
     const btnRef = React.useRef(null);
     useDxAction(btnRef, tab.click, tab);
-    return (React.createElement("div", { ref: btnRef, role: "button", className: `dxrd-tab-item dx-accessibility-rightpanel-button dxd-side-panel-tab-back-color dxd-back-highlighted dx-accessibility-focus-border-accented ${tab.css.class}`, title: tab.text, "aria-label": tab.text, "aria-expanded": tab.active, hidden: !tab.visible },
+    return (React.createElement("div", { ref: btnRef, role: "button", className: `dxrd-tab-item dx-accessibility-rightpanel-button dxd-side-panel-tab-back-color dxd-back-highlighted dx-accessibility-focus-border-accented ${tab.css.class}`, title: tab.text, "aria-label": tab.text, "aria-expanded": !tab.collapsed && tab.active ? 'true' : 'false', hidden: !tab.visible },
         React.createElement("div", { className: `dxrd-image-padding ${tab.image.class}` },
             React.createElement(Template, { template: tab.image.templateName }))));
 };

package/dx-report-viewer/components/analytics/Widgets/Treelist/Treelist.js

@@ -1,20 +1,24 @@
-import { __rest } from "tslib";
 import React from 'react';
 import TreelistGroup from './TreelistGroup';
 import { initTreeListBinding } from '@devexpress/analytics-core/widgets/treelist/_binding';
-const Treelist = (_a) => {
-    var { options } = _a, delegatedProps = __rest(_a, ["options"]);
+import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
+const Treelist = ({ options, ...delegatedProps }) => {
     const htmlRef = React.useRef();
     const [viewModel, setViewModel] = React.useState();
     React.useEffect(() => {
         if (!htmlRef.current)
             return () => { };
-        return initTreeListBinding({
+        const disposables = [];
+        disposables.push(initTreeListBinding({
             values: options,
             element: htmlRef.current,
-            createChildContext: (vm) => setViewModel(vm),
-        });
+            createChildContext: (vm) => {
+                disposables.push(vm?._viewModelEvents?.on(ViewModelChangedEvent, () => setViewModel({ ...vm })));
+                setViewModel({ ...vm });
+            },
+        }));
+        return () => disposables.forEach(disposable => disposable && disposable());
     }, [options, htmlRef.current]);
-    return React.createElement("div", Object.assign({ ref: htmlRef }, delegatedProps), viewModel ? React.createElement(TreelistGroup, { data: viewModel }) : null);
+    return React.createElement("div", { ref: htmlRef, ...delegatedProps }, viewModel ? React.createElement(TreelistGroup, { data: viewModel }) : null);
 };
 export default Treelist;

package/dx-report-viewer/components/core/LazyTemplate/LazyTemplate.js

@@ -1,9 +1,7 @@
-import { __rest } from "tslib";
 import React from 'react';
 import { globalResolver } from '@devexpress/analytics-core/property-grid/internal/_codeResolver';
 import Template from '../Template';
-const LazyTemplate = (_a) => {
-    var { template, data, resolver, isResolved } = _a, delegatedProps = __rest(_a, ["template", "data", "resolver", "isResolved"]);
+const LazyTemplate = ({ template, data, resolver, isResolved, ...delegatedProps }) => {
     const [isReady, setIsReady] = React.useState(false);
     React.useEffect(() => {
         let isDisposed = false;
@@ -21,6 +19,6 @@ const LazyTemplate = (_a) => {
     }, []);
     if (!isReady)
         return null;
-    return React.createElement(Template, Object.assign({ template: template, data: data }, delegatedProps));
+    return React.createElement(Template, { template: template, data: data, ...delegatedProps });
 };
 export default LazyTemplate;

package/dx-report-viewer/components/core/Template/Template.js

@@ -1,17 +1,15 @@
-import { __rest } from "tslib";
 import React from 'react';
 import { SvgTemplatesEngine } from '@devexpress/analytics-core/property-grid/widgets/internal/_svgTemplateEngine';
 import { getTemplate } from '@devexpress/analytics-core/property-grid/widgets/templateUtils';
 import { TemplateEngineContext } from '../TemplateEngineProvider/TemplateEngineProvider';
-const Template = (_a) => {
-    var { template, data } = _a, delegatedProps = __rest(_a, ["template", "data"]);
+const Template = ({ template, data, ...delegatedProps }) => {
     const templateEngine = React.useContext(TemplateEngineContext);
     const component = templateEngine.getTemplate(template);
     if (!!component) {
         return React.createElement(component, { data });
     }
     else if (!!SvgTemplatesEngine.getExistingTemplate(template)) {
-        return React.createElement("div", Object.assign({}, delegatedProps, { dangerouslySetInnerHTML: { __html: getTemplate(template) } }));
+        return React.createElement("div", { ...delegatedProps, dangerouslySetInnerHTML: { __html: getTemplate(template) } });
     }
     else {
         console.log(`${template} is not found`);

package/dx-report-viewer/components/core/TemplateEngineProvider/TemplateEngineProvider.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { TemplateEngine } from '../../../core/template-engine';
 export const TemplateEngineContext = React.createContext(null);
-const TemplateEngineProvider = ({ templateEngine, children }) => (React.createElement(TemplateEngineContext.Provider, { value: templateEngine !== null && templateEngine !== void 0 ? templateEngine : new TemplateEngine() }, children));
+const TemplateEngineProvider = ({ templateEngine, children }) => (React.createElement(TemplateEngineContext.Provider, { value: templateEngine }, children));
 export default TemplateEngineProvider;

package/dx-report-viewer/components/reporting/DocumentMap/DocumentMap.js

@@ -9,9 +9,8 @@ const DocumentMap = ({ data }) => {
     const htmlRef = React.useRef();
     const [viewModel, setViewModel] = React.useState();
     React.useEffect(() => {
-        var _a, _b;
-        htmlRef.current = (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.instance().element();
-        setViewModel((_b = data.model) === null || _b === void 0 ? void 0 : _b.getViewModel());
+        htmlRef.current = scrollViewRef.current?.instance().element();
+        setViewModel(data.model?.getViewModel());
     }, []);
     useDxMutationObserver(htmlRef, data.keyboardHelper);
     return (React.createElement("div", { className: "dxrd-preview-document-map dxrd-height-100 dxrd-overflow-hidden", hidden: !(data.active && data.visible) },