devexpress-reporting-react 24.1.2-beta → 24.1.3

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.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,7 +9,7 @@ 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) => {
@@ -21,7 +21,7 @@ const DxReportDesigner = (props) => {
         const binding = new JSReportDesignerBinding(options, OptionsManager.getEventRaiser(callbacks, () => binding.sender));
         binding.applyBindings(designerRef.current);
         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 } },
@@ -33,6 +33,7 @@ DxReportDesigner.propTypes = {
     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,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/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,38 @@ 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);
+        const 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 +63,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 } },
+        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,9 +1,7 @@
-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"]);
+const Treelist = ({ options, ...delegatedProps }) => {
     const htmlRef = React.useRef();
     const [viewModel, setViewModel] = React.useState();
     React.useEffect(() => {
@@ -15,6 +13,6 @@ const Treelist = (_a) => {
             createChildContext: (vm) => setViewModel(vm),
         });
     }, [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,5 @@
 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 ?? new 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) },

package/dx-report-viewer/components/reporting/Editing/CharacterComb/CharacterComb.js

@@ -1,11 +1,18 @@
 import React from 'react';
 import dxZoom from '../../../../hooks/dxZoom';
+import { processStyles } from '../../../../core/processStyles';
 const CharacterComb = ({ data }) => {
     const zoomRef = dxZoom(data.zoom);
-    return (React.createElement("div", { ref: zoomRef, style: data.containerStyle, onClick: event => data.activateEditor(data, event.nativeEvent), className: `dxrp-editing-field-charactercomb dx-accessibility-editing-field-item dx-accessibility-border-accented ${data.active ? 'active' : ''} ${data.field.readOnly ? 'readOnly' : ''}` },
+    const [value, setValue] = React.useState(data.field.editorValue.toString());
+    const handleValueChanged = event => {
+        const newValue = event.target.value;
+        setValue(newValue);
+        data.field.editorValue = newValue;
+    };
+    return (React.createElement("div", { ref: zoomRef, style: processStyles(data.containerStyle), onClick: event => data.activateEditor(data, event.nativeEvent), className: `dxrp-editing-field-charactercomb dx-accessibility-editing-field-item dx-accessibility-border-accented ${data.active ? 'active' : ''} ${data.field.readOnly ? 'readOnly' : ''}` },
         (!data.active || data.field.readOnly) &&
-            data.cells.map((cell, index) => (React.createElement("div", { key: index, className: "dxrp-editing-field-charactercomb-cell", style: cell.style }, cell.text))),
+            data.cells.map((cell, index) => (React.createElement("div", { key: index, className: "dxrp-editing-field-charactercomb-cell", style: processStyles(cell.style) }, cell.text))),
         data.active && !data.field.readOnly &&
-            React.createElement("textarea", { className: "dxrp-editing-field-text dxrd-background-white", value: data.field.editorValue.toString(), style: data.textStyle, onBlur: () => data.hideEditor(true), onKeyUp: event => data.keypressAction(data, event.nativeEvent) })));
+            React.createElement("textarea", { className: "dxrp-editing-field-text dxrd-background-white", value: value, onChange: handleValueChanged, style: processStyles(data.textStyle), onBlur: () => data.hideEditor(true), onKeyUp: event => data.keypressAction(data, event.nativeEvent) })));
 };
 export default CharacterComb;

package/dx-report-viewer/components/reporting/Editing/ExportTool/ExportTool.js

@@ -15,7 +15,7 @@ const ExportTool = ({ data }) => {
     return (React.createElement("div", { ref: elementRef },
         React.createElement("div", { className: "dxrd-visually-hidden" },
             React.createElement("form", { action: "data.exportActionUri", method: "post" }, data.exportFormData.map(item => (React.createElement("input", { key: item.name, name: item.name, value: item.value }))))),
-        React.createElement(Popup, { width: data.popupOptions.width, height: data.popupOptions.height, title: data.popupOptions.title, visible: data.popupOptions.visible, showCloseButton: true, onHidden: () => data.popupOptions.onHidden(), toolbarItems: data.popupOptions.toolbarItems, wrapperAttr: data.popupOptions.wrapperAttr, container: popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.container, position: popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.position },
+        React.createElement(Popup, { width: data.popupOptions.width, height: data.popupOptions.height, title: data.popupOptions.title, visible: data.popupOptions.visible, showCloseButton: true, onHidden: () => data.popupOptions.onHidden(), toolbarItems: data.popupOptions.toolbarItems, wrapperAttr: data.popupOptions.wrapperAttr, container: popupOptions?.container, position: popupOptions?.position },
             React.createElement("div", { className: "dxrd-print-dialog-content" },
                 React.createElement("div", null, data.printingTexts.caption),
                 React.createElement("p", null),

package/dx-report-viewer/components/reporting/Editing/TextField/Container/EditingFieldContainer.js

@@ -1,18 +1,7 @@
 import React from 'react';
 import Template from '../../../../core/Template';
 import dxZoom from '../../../../../hooks/dxZoom';
-const processStyles = styles => {
-    const updateKey = (obj, key, newKey) => {
-        if (obj[key]) {
-            obj[newKey] = obj[key];
-            delete obj[key];
-        }
-    };
-    const newStyles = Object.assign({}, styles);
-    updateKey(newStyles, 'line-height', 'lineHeight');
-    updateKey(newStyles, 'border-color', 'borderColor');
-    return newStyles;
-};
+import { processStyles } from '../../../../../core/processStyles';
 const EditingFieldContainer = ({ data }) => {
     const zoomRef = dxZoom(data.zoom);
     return (React.createElement("div", { ref: zoomRef, style: processStyles(data.containerStyle), className: `dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented ${data.active ? 'active' : ''} ${data.field.readOnly ? 'readonly' : ''}` },

package/dx-report-viewer/components/reporting/Mobile/Actions/MobileActionsExport/MobileActionsExport.js

@@ -4,6 +4,6 @@ import useDxParentContainer from '../../hooks/mobileParentContainer';
 const MobileActionsExport = ({ data }) => {
     const [ref, parentContainer] = useDxParentContainer();
     const renderContent = () => (React.createElement("div", null, data.items.map(item => React.createElement("div", { key: item.text, className: "dxrd-menu-export-item", onClick: item.action }, item.text))));
-    return (React.createElement(Popover, { ref: ref, className: "dxrd-menu-export-popover", wrapperAttr: { class: 'dxrd-menu-export-popover' }, width: "266px", height: "266px", visible: data.visible, target: ".dxrdp-mobile-action.dxrd-image-export-to", container: parentContainer, contentRender: renderContent }));
+    return (React.createElement(Popover, { ref: ref, className: "dxrd-menu-export-popover", wrapperAttr: { class: 'dxrd-menu-export-popover' }, width: "266px", height: "266px", visible: data.visible, target: ".dxrdp-mobile-action.dxrd-image-export-to", container: parentContainer, onHidden: data.hide, contentRender: renderContent }));
 };
 export default MobileActionsExport;

package/dx-report-viewer/components/reporting/Mobile/Gallery/MobileGallery.js

@@ -10,7 +10,7 @@ const renderGalleryItem = () => (item) => (React.createElement(ScrollView, { cla
     React.createElement("div", { className: "dxrd-gallery-blocks", style: {
             width: item.gallery.contentSize ? item.gallery.contentSize.width + 'px' : undefined,
             height: item.gallery.contentSize ? item.gallery.contentSize.height + +'px' : undefined
-        } }, item.blocks.filter(block => block.page).map(block => (React.createElement("div", { className: `dxrd-gallery-block ${block.classSet}`, style: {
+        } }, item.blocks.filter(block => block.page).map(block => (React.createElement("div", { key: block.page.unifier, className: `dxrd-gallery-block ${block.classSet}`, style: {
             left: block.position.left + 'px',
             right: block.position.right + 'px',
             top: block.position.top + 'px',
@@ -35,7 +35,9 @@ const MobileGallery = ({ data, slideOptions, gallery }) => {
         const widget = galleryRef.current.instance();
         widget.option('gallery', gallery || data.gallery);
         widget.option('slideOptions', slideOptions || data.slideOptions);
-        new dxGalleryExtender(widget).extend(widget.element());
+        const extender = new dxGalleryExtender(widget);
+        extender.extend(widget.element());
+        return () => extender.dispose();
     }, []);
     return (React.createElement(Gallery, { className: "dxrd-mobile-gallery", ref: galleryRef, dataSource: data.gallery.items, animationEnabled: data.gallery.animationEnabled, disabled: data.zoomUpdating, width: "100%", height: "100%", showIndicator: false, loop: true, onSelectionChanged: data.onSlide, onOptionChanged: data.gallery.onOptionChanged, itemRender: renderGalleryItem() }));
 };

package/dx-report-viewer/components/reporting/Mobile/Parameters/MobileParametersDateRange/MobileParametersDateRange.js

@@ -1,4 +1,4 @@
 import React from 'react';
 import DateRange from '../../../ParametersPanel/DateRange/DateRange';
-const MobileParametersDateRange = ({ data }) => (React.createElement(DateRange, { data: Object.assign(Object.assign({}, data), { isMobile: true }) }));
+const MobileParametersDateRange = ({ data }) => (React.createElement(DateRange, { data: { ...data, isMobile: true } }));
 export default MobileParametersDateRange;

package/dx-report-viewer/components/reporting/Mobile/Parameters/MobileParametersPopup/MobileParametersPopup.js

@@ -8,9 +8,8 @@ const MobileParametersPopup = ({ data }) => {
     const [ref, parentContainer] = useDxParentContainer();
     const forceRerender = useDxForceRerender();
     React.useEffect(() => {
-        var _a;
         const eventHolder = data;
-        return (_a = eventHolder._viewModelEvents) === null || _a === void 0 ? void 0 : _a.on(ViewModelChangedEvent, forceRerender);
+        return eventHolder._viewModelEvents?.on(ViewModelChangedEvent, forceRerender);
     }, []);
     const renderContent = () => {
         if (!data.visible)

package/dx-report-viewer/components/reporting/Mobile/Search/MobileSearch.js

@@ -8,6 +8,6 @@ const MobileSearch = ({ data }) => {
             React.createElement("div", { className: "dxrdp-taptosearch", hidden: data.editorVisible, onClick: event => data.focusEditor(data, event) },
                 React.createElement("div", { className: "dxrdp-taptosearch-text" }, data.tapToSearchText)),
             React.createElement("div", { className: "dxrdp-search-panel", hidden: !data.editorVisible },
-                React.createElement(TextBox, { className: "dxrdp-search-editor", value: data.searchText, onValueChanged: event => data.onSearchTextChanged(event), onEnterKey: data.startSearch })))));
+                React.createElement(TextBox, { className: "dxrdp-search-editor", onValueChanged: event => data.onSearchTextChanged(event), onEnterKey: data.startSearch })))));
 };
 export default MobileSearch;

package/dx-report-viewer/components/reporting/ParametersPanel/DateRange/DateRange/DateRange.js

@@ -17,7 +17,7 @@ const DateRangeWrapper = ({ data }) => {
         setViewModel(vm);
         return () => {
             subscription && subscription();
-            editor === null || editor === void 0 ? void 0 : editor.dispose();
+            editor?.dispose();
         };
     }, []);
     return (React.createElement("div", { ref: dateRangeEditorRef, className: "dxrv-daterange-editor" }, viewModel && React.createElement(DateRange, { viewModel: viewModel })));

package/dx-report-viewer/components/reporting/ParametersPanel/DateRange/Mobile/DateRangeMobile.js

@@ -7,9 +7,8 @@ import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/nat
 const DateRangeMobile = ({ data }) => {
     const forceRerender = useDxForceRerender();
     React.useEffect(() => {
-        var _a;
         const eventHolder = data.popupModel;
-        return (_a = eventHolder._viewModelEvents) === null || _a === void 0 ? void 0 : _a.on(ViewModelChangedEvent, forceRerender);
+        return eventHolder._viewModelEvents?.on(ViewModelChangedEvent, forceRerender);
     }, []);
     return (React.createElement("div", { className: "dxrv-preview-date-range-mobile" },
         React.createElement("div", { className: "dx-fieldset" },

package/dx-report-viewer/components/reporting/ParametersPanel/DateRange/PopupContainer/PopupContainer.js

@@ -20,8 +20,7 @@ const DateRangePopupContainer = ({ data }) => {
     const scrollViewRef = React.useRef();
     const predefinedRangesRef = React.useRef();
     React.useEffect(() => {
-        var _a;
-        predefinedRangesRef.current = (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.instance().element();
+        predefinedRangesRef.current = scrollViewRef.current?.instance().element();
     }, []);
     useDxMutationObserver(predefinedRangesRef, data.predefinedRanges.accessibilityKeyboardHelper);
     return (React.createElement(Popup, { width: popupOptions.width, height: popupOptions.height, wrapperAttr: popupOptions.wrapperAttr, position: popupOptions.position, container: popupOptions.container, showTitle: popupOptions.showTitle, showCloseButton: popupOptions.showCloseButton, hideOnOutsideClick: popupOptions.hideOnOutsideClick, onHidden: popupOptions.onHidden, animation: popupOptions.animation, shading: popupOptions.shading, visible: popupOptions.visible },

package/dx-report-viewer/components/reporting/ParametersPanel/Editor/Editor/Editor.js

@@ -16,13 +16,12 @@ const EditorLabel = ({ data }) => {
         !data.isComplexEditor && 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: textToSearch }' : undefined }, !data.textToSearch && data.displayName)));
 };
 const PropertyEditor = ({ data }) => {
-    var _a;
     const accordionRef = React.useRef();
     useDxAccordion(accordionRef, data);
     const treeItemCssClasses = ['dx-field'];
     data.isComplexEditor && treeItemCssClasses.push('dxrd-accessibility-accordion-trigger');
     data.isComplexEditor && treeItemCssClasses.push('dx-accessibility-focus-border-accented');
-    ((_a = data.editorOptions) === null || _a === void 0 ? void 0 : _a.hasVerticalLabel) && treeItemCssClasses.push('dxrd-vertical-label');
+    data.editorOptions?.hasVerticalLabel && treeItemCssClasses.push('dxrd-vertical-label');
     const isResolved = (newVal) => data.setIsRendered(newVal);
     return (React.createElement("div", { className: "dx-editor", hidden: !data.visible },
         React.createElement("div", { className: "dx-group", ref: accordionRef },

package/dx-report-viewer/components/reporting/ParametersPanel/MultiValue/MultiValue/MultiValue.js

@@ -34,13 +34,12 @@ const MultiValue = ({ data }) => {
         }
     }));
     const validatorOptions = useValidatorOptions(data);
-    if (value !== options.value) {
-        setValue(options.value);
-    }
     React.useEffect(() => {
-        var _a;
-        const model = (_a = data.getModel()) === null || _a === void 0 ? void 0 : _a.value;
-        return model === null || model === void 0 ? void 0 : model.events.on('valueChanged', () => setValue(model.value));
+        const model = data.getModel()?.value;
+        if (value !== options.value) {
+            setValue(options.value);
+        }
+        return model?.events.on('valueChanged', () => setValue(model.value));
     }, []);
     return (React.createElement(TagBox, { ref: tagBoxRef, dataSource: options.dataSource, searchEnabled: options.searchEnabled, useItemTextAsTitle: options.useItemTextAsTitle, searchExpr: options.searchExpr, value: value, displayExpr: options.displayExpr, valueExpr: options.valueExpr, multiline: options.multiline, showSelectionControls: options.showSelectionControls, onValueChanged: options.onValueChanged, onMultiTagPreparing: options.onMultiTagPreparing, inputAttr: options.inputAttr, disabled: options.disabled, selectAllText: options.selectAllText, placeholder: options.placeholder, maxDisplayedTags: options.maxDisplayedTags, showMultiTagOnly: options.showMultiTagOnly, dropDownOptions: dropDownOptions, selectAllMode: options.selectAllMode }, !!data.validationRules && React.createElement(Validator, { validationRules: validatorOptions.validationRules })));
 };

package/dx-report-viewer/components/reporting/ReportPreview/Breadcrumbs/Breadcrumbs.js

@@ -1,15 +1,18 @@
 import React from 'react';
 import Template from '../../../core/Template';
+import useDxMutationObserver from '../../../../hooks/dxMutationObserver';
 const ClickableCrumb = ({ item, handleClick }) => (React.createElement(React.Fragment, null,
-    React.createElement("a", { className: "breadcrump-link breadcrumb-item dxd-text-accented", onClick: handleClick },
+    React.createElement("a", { className: "breadcrump-link breadcrumb-item dxd-text-accented dx-accessibility-border-accented", onClick: handleClick },
         React.createElement("span", null, item.displayText)),
     React.createElement(Template, { className: "breadcrumb-item-seperator", template: "dxrd-svg-preview-breadcrumbs_seperator" })));
-const CurrentCrumb = ({ item }) => (React.createElement("a", { className: "breadcrumb-item dxd-text-primary" },
+const CurrentCrumb = ({ item }) => (React.createElement("a", { className: "breadcrumb-item dxd-text-primary dx-accessibility-border-accented", "aria-current": "location" },
     React.createElement("span", null, item.displayText)));
 const Breadcrumbs = ({ data }) => {
     if (data.listItems.length <= 1)
         return null;
-    return (React.createElement("div", { className: "breadcrumbs-wrapper" }, data.listItems.map((item, index) => data.listItems.length === (index + 1)
+    const dxMutationObserverRef = React.useRef();
+    useDxMutationObserver(dxMutationObserverRef, data.keyboardHelper);
+    return (React.createElement("div", { className: "breadcrumbs-wrapper", ref: dxMutationObserverRef, "aria-label": "Breadcrumbs", role: "navigation" }, data.listItems.map((item, index) => data.listItems.length === (index + 1)
         ? React.createElement(CurrentCrumb, { key: index, item: item })
         : React.createElement(ClickableCrumb, { key: index, item: item, handleClick: () => data.onClick(item.position) }))));
 };

package/dx-report-viewer/components/reporting/ReportPreview/BrickClickable/BrickClickable.js

@@ -4,8 +4,8 @@ const BrickClickable = ({ data }) => {
     const navigationBrickClasses = ['dxrd-report-preview-brick-navigation'];
     drillDownKey && navigationBrickClasses.push('dxrdp-navigation-brick-drill-down');
     sortData && navigationBrickClasses.push('dxrdp-navigation-brick-sorting');
-    (sortData === null || sortData === void 0 ? void 0 : sortData.order) === 1 && navigationBrickClasses.push('dxrdp-navigation-brick-sorting-desc');
-    (sortData === null || sortData === void 0 ? void 0 : sortData.order) === 2 && navigationBrickClasses.push('dxrdp-navigation-brick-sorting-asc');
+    sortData?.order === 1 && navigationBrickClasses.push('dxrdp-navigation-brick-sorting-desc');
+    sortData?.order === 2 && navigationBrickClasses.push('dxrdp-navigation-brick-sorting-asc');
     return (React.createElement("div", { className: `dxrd-report-preview-brick ${data.active ? 'dxrd-report-preview-brick-selected' : ''} ${!data.bricks ? 'dxrd-report-preview-brick-selectable' : ''}`, style: { top: data.topP, left: data.leftP, right: data.rightP, height: data.heightP, width: data.widthP }, onClick: e => { data.onClick(e); e.stopPropagation(); } }, data.navigation && React.createElement("div", { className: navigationBrickClasses.join(' ') })));
 };
 export default BrickClickable;

package/dx-report-viewer/components/reporting/ReportPreview/ProgressBar/ProgressBar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import useDxMutationObserver from '../../../../hooks/dxMutationObserver';
 const ProgressBar = ({ data }) => {
     const mutationObserverRef = React.useRef();
-    useDxMutationObserver(mutationObserverRef, data === null || data === void 0 ? void 0 : data.progressBarAccessibilityKeyboardHelper);
+    useDxMutationObserver(mutationObserverRef, data?.progressBarAccessibilityKeyboardHelper);
     const handleCancelButtonClick = () => data.cancelButton.action && data.cancelButton.action();
     return (React.createElement("div", { role: "dialog", className: `dxrd-preview-progress dxd-popup-back-color dxd-back-primary2 dxd-border-primary ${data.cssClasses}`, hidden: !data.visible, ref: mutationObserverRef },
         React.createElement("div", { className: "dxrd-preview-progress-text dxd-text-primary" }, data.text),

package/dx-report-viewer/components/reporting/ReportPreview/Surface/Surface.js

@@ -20,10 +20,9 @@ const MultiPageItem = ({ page }) => {
         React.createElement(Template, { template: "dxrd-preview-page", data: page })));
 };
 const Surface = ({ data }) => {
-    var _a;
     const clipboardMessage = getLocalization('Clipboard', 'ASPxReportsStringId.WebDocumentViewer_AriaClipboard');
     const autoFitRef = React.useRef();
-    useDxAutoFit(autoFitRef, (_a = data.currentPage) === null || _a === void 0 ? void 0 : _a.autoFitOptions);
+    useDxAutoFit(autoFitRef, data.currentPage?.autoFitOptions);
     const dxMutationObserverRef = React.useRef();
     useDxMutationObserver(dxMutationObserverRef, data.previewBrickKeyboardHelper);
     return (React.createElement(React.Fragment, null,

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

@@ -14,8 +14,7 @@ const SearchResultItem = ({ item }) => {
 const SearchComponent = ({ data }) => {
     const viewModel = data.model.getViewModel();
     React.useEffect(() => {
-        var _a;
-        const disposeCallback = (_a = viewModel._viewModelEvents) === null || _a === void 0 ? void 0 : _a.on(ViewModelChangedEvent, (args) => {
+        const disposeCallback = viewModel._viewModelEvents?.on(ViewModelChangedEvent, (args) => {
             data._viewModelEvents.call(ViewModelChangedEvent, args);
         });
         return () => disposeCallback();

package/dx-report-viewer/components/reporting/Toolbar/Pager/Pager.js

@@ -4,11 +4,14 @@ const ToolbarPager = ({ data }) => {
     const [dropDownOptions, setDropDownOptions] = React.useState();
     const htmlRef = React.useRef(null);
     React.useEffect(() => {
-        setDropDownOptions(Object.assign({ container: data.getPopupContainer(htmlRef.current) }, data.widget.dropDownOptions));
+        setDropDownOptions({
+            container: data.getPopupContainer(htmlRef.current),
+            ...data.widget.dropDownOptions,
+        });
     }, [data.widget.dropDownOptions]);
     return (React.createElement("div", { ref: htmlRef, className: "dxrd-preview-pager dxrd-toolbar-item", hidden: !data.visible },
         React.createElement("div", { className: "dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" },
-            React.createElement(SelectBox, { className: "dxrd-preview-pager-selectbox", dataSource: data.widget.dataSource, onValueChanged: data.widget.onValueChanged, value: data.widget.value, opened: data.widget.opened, displayExpr: data.widget.displayExpr, useItemTextAsTitle: true, onKeyUp: data.widget.onKeyUp, itemTemplate: data.widget.itemTemplate, searchMode: data.widget.searchMode, searchEnabled: data.widget.searchEnabled, searchTimeout: data.widget.searchTimeout, disabled: data.disabled, dropDownOptions: dropDownOptions, tabIndex: -1, inputAttr: data.widget.inputAttr })),
+            React.createElement(SelectBox, { className: "dxrd-preview-pager-selectbox", dataSource: data.widget.dataSource, onValueChanged: data.widget.onValueChanged, value: data.widget.value, displayExpr: data.widget.displayExpr, useItemTextAsTitle: true, itemTemplate: data.widget.itemTemplate, searchMode: data.widget.searchMode, searchEnabled: data.widget.searchEnabled, searchTimeout: data.widget.searchTimeout, disabled: data.disabled, dropDownOptions: dropDownOptions, tabIndex: -1, inputAttr: data.widget.inputAttr })),
         React.createElement("div", { className: "dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary", hidden: !data.hasSeparator })));
 };
 export default ToolbarPager;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/Painter/Painter.js

@@ -1,22 +1,20 @@
-import { __rest } from "tslib";
 import React from 'react';
 import dxZoom from '../../../../../hooks/dxZoom';
 import { Painter } from 'devexpress-reporting/viewer/widgets/pictureEditor/_painter';
-const PainterComponent = (_a) => {
-    var { options, className } = _a, delegatedProps = __rest(_a, ["options", "className"]);
+const PainterComponent = ({ options, className, ...delegatedProps }) => {
     const ref = React.useRef();
     const [model, setModel] = React.useState();
-    const canvasRef = dxZoom(model === null || model === void 0 ? void 0 : model.scale);
+    const canvasRef = dxZoom(model?.scale);
     React.useLayoutEffect(() => {
         const painter = new Painter(ref.current, options);
         options.setPainter(painter);
         setModel(painter);
         return () => {
-            painter === null || painter === void 0 ? void 0 : painter.dispose();
-            options === null || options === void 0 ? void 0 : options.setPainter(null);
+            painter?.dispose();
+            options?.setPainter(null);
         };
     }, []);
-    return (React.createElement("div", Object.assign({ ref: ref, className: `dx-painter ${className}` }, delegatedProps),
+    return (React.createElement("div", { ref: ref, className: `dx-painter ${className}`, ...delegatedProps },
         React.createElement("canvas", { ref: canvasRef })));
 };
 export default PainterComponent;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/PictureEditor.js

@@ -13,11 +13,10 @@ const PictureEditor = ({ options, className }) => {
     const forceRerender = useDxForceRerender();
     const canvasRef = dxZoom(zoomScale);
     React.useEffect(() => {
-        var _a;
         const pictureEditorFieldModel = options.getModel();
         const pictureEditorModel = new PictureEditorModel(pictureEditorFieldModel, pictureEditingRef.current, forceRerender);
         const data = pictureEditorModel.getViewModel();
-        (_a = data.painter._viewModelEvents) === null || _a === void 0 ? void 0 : _a.on(ViewModelChangedEvent, arg => {
+        data.painter._viewModelEvents?.on(ViewModelChangedEvent, arg => {
             if (arg.propertyName === 'scale')
                 setZoomScale(arg.newValue);
         });
@@ -47,9 +46,8 @@ const PictureEditor = ({ options, className }) => {
     }, []);
     const renderContent = () => {
         const popupContentRerender = useDxForceRerender();
-        return (React.createElement("div", { className: `dx-picture-editing-toolbar ${className}` }, pictureEditorViewModel === null || pictureEditorViewModel === void 0 ? void 0 : pictureEditorViewModel.actions.map(action => {
-            var _a, _b;
-            (_b = (_a = action.templateOptions) === null || _a === void 0 ? void 0 : _a._viewModelEvents) === null || _b === void 0 ? void 0 : _b.on(ViewModelChangedEvent, popupContentRerender);
+        return (React.createElement("div", { className: `dx-picture-editing-toolbar ${className}` }, pictureEditorViewModel?.actions.map(action => {
+            action.templateOptions?._viewModelEvents?.on(ViewModelChangedEvent, popupContentRerender);
             return (React.createElement("div", { key: action.id },
                 React.createElement("div", { className: "dx-picture-editing-toolbar-item", onClick: event => action.action(action, event.nativeEvent), title: action.title },
                     React.createElement(Template, { className: "dx-picture-editing-toolbar-item-icon", template: action.icon })),

package/dx-report-viewer/core/processStyles.d.ts

@@ -0,0 +1 @@
+export declare const processStyles: (styles: any) => {};

package/dx-report-viewer/core/processStyles.js

@@ -0,0 +1,9 @@
+const toCamelCase = style => style.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+export const processStyles = styles => {
+    const newStyles = {};
+    for (const style in styles) {
+        const reactStyle = toCamelCase(style);
+        newStyles[reactStyle] = styles[style];
+    }
+    return newStyles;
+};

package/dx-report-viewer/core/template-engine.js

@@ -2,7 +2,7 @@ import { analyticsTemplates } from '../components/analytics/_templates';
 import { reportingTemplates } from '../components/reporting/_templates';
 export class TemplateEngine {
     constructor() {
-        this._templates = Object.assign(Object.assign({}, analyticsTemplates), reportingTemplates);
+        this._templates = { ...analyticsTemplates, ...reportingTemplates };
     }
     getTemplate(templateName) {
         return this._templates[templateName];

package/dx-report-viewer/hooks/dxEllipsisEditor.js

@@ -7,7 +7,7 @@ const useDxEllipsisEditor = (options) => {
         const editorInstance = new dxEllipsisEditor(ref.current, options);
         setEditor(editorInstance);
         return () => {
-            editorInstance === null || editorInstance === void 0 ? void 0 : editorInstance.dispose();
+            editorInstance?.dispose();
             setEditor(null);
         };
     }, []);

package/dx-report-viewer/hooks/dxMutationObserver.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { IMutationObserverArgs } from '@devexpress/analytics-core/analytics-internal';
+import { IMutationObserverArgs } from '@devexpress/analytics-core/accessibility/_keyboardHelperBase';
 declare const useDxMutationObserver: (ref: React.MutableRefObject<HTMLElement>, args: IMutationObserverArgs) => void;
 export default useDxMutationObserver;

package/dx-report-viewer/hooks/dxMutationObserver.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { accesibilitySettingsContext } from '../components/core/AccessibilitySettingsProvider';
-import { initializeMutationObserver } from '@devexpress/analytics-core/analytics-internal';
+import { initializeMutationObserver } from '@devexpress/analytics-core/accessibility/_dxMutationObserver';
 const useDxMutationObserver = (ref, args) => {
     const accesibilitySetting = React.useContext(accesibilitySettingsContext);
     React.useEffect(() => {
-        if (args && ref.current)
+        if (args && !args.isDisposing && ref.current)
             return initializeMutationObserver(ref.current, args, accesibilitySetting.accessibilityCompliant);
         return () => { };
     }, [args, accesibilitySetting, ref.current]);

package/dx-report-viewer/hooks/dxResizable.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import { initializeBaseResizableOptions, initializeResize } from '@devexpress/analytics-core/core/internal/_resizable';
 const useDxResizable = (ref, options) => {
-    const [subscription, setSubscription] = React.useState(null);
+    const [subscription, setSubscription] = React.useState();
     React.useEffect(() => {
         if (!subscription && options) {
-            setSubscription(initializeResize(ref.current, initializeBaseResizableOptions(options)));
+            setSubscription(() => initializeResize(ref.current, initializeBaseResizableOptions(options)));
         }
         return () => {
             subscription && subscription();
             setSubscription(undefined);
         };
-    }, [options, ref.current]);
+    }, [options]);
 };
 export default useDxResizable;

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

@@ -1,12 +1,13 @@
-import DxReportViewer from './DxReportViewer';
+import DxReportViewer, { DxReportViewerProps, DxReportViewerRef } from './DxReportViewer';
 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 RequestOptions from './options/RequestOptions';
 import SearchSettings from './options/SearchSettings';
 import TabPanelSettings from './options/TabPanelSettings';
 import { TemplateEngine } from './core/template-engine';
-export { Callbacks, ExportSettings, MobileModeSettings, ProgressBarSettings, RemoteSettings, RequestSettings, SearchSettings, TabPanelSettings, DxReportViewer, TemplateEngine };
+export { Callbacks, ExportSettings, MobileModeSettings, ProgressBarSettings, RemoteSettings, RequestOptions, SearchSettings, TabPanelSettings, DxReportViewer, TemplateEngine };
+export type { DxReportViewerProps, DxReportViewerRef };
 export default DxReportViewer;

package/dx-report-viewer/index.js

@@ -4,9 +4,9 @@ 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 { TemplateEngine } from './core/template-engine';
-export { Callbacks, ExportSettings, MobileModeSettings, ProgressBarSettings, RemoteSettings, RequestSettings, SearchSettings, TabPanelSettings, DxReportViewer, TemplateEngine };
+export { Callbacks, ExportSettings, MobileModeSettings, ProgressBarSettings, RemoteSettings, RequestOptions, SearchSettings, TabPanelSettings, DxReportViewer, TemplateEngine };
 export default DxReportViewer;

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

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

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

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
-const RequestSettings = () => null;
-RequestSettings.displayName = 'DxReportViewerRequestSettings';
-RequestSettings.propTypes = {
+const RequestOptions = () => null;
+RequestOptions.displayName = 'DxReportViewerRequestOptions';
+RequestOptions.propTypes = {
     invokeAction: PropTypes.string.isRequired,
     getLocalizationAction: PropTypes.string,
     host: PropTypes.string.isRequired,
 };
-RequestSettings.defaultProps = {
+RequestOptions.defaultProps = {
     invokeAction: '/DXXRDV',
 };
-export default RequestSettings;
+export default RequestOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devexpress-reporting-react",
-  "version": "24.1.2-beta",
+  "version": "24.1.3",
   "homepage": "https://www.devexpress.com/",
   "bugs": "https://www.devexpress.com/support/",
   "author": "Developer Express Inc.",
@@ -16,19 +16,19 @@
   "main": "./index.js",
   "dependencies": {
     "prop-types": "^15.8.1",
-    "devexpress-reporting": "24.1.2-beta"
+    "devexpress-reporting": "24.1.3"
   },
   "peerDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.28",
-    "devextreme-react": "24.1.2-beta",
+    "devextreme-react": "24.1.3",
     "react": "^18.0.28",
     "react-dom": "^18.0.28"
   },
   "devDependencies": {
     "shx": "^0.3.4",
     "typescript": "~5.0.4",
-    "@devexpress/analytics-core": "24.1.2-beta"
+    "@devexpress/analytics-core": "24.1.3"
   },
   "scripts": {
     "prebuild": "npx shx rm -rf dist && npx shx mkdir dist && npx shx cp README.md dist/ && npx shx cp package.json dist/",

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

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

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

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