devexpress-reporting-react 24.1.2-beta → 24.1.4

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.4",
   "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.4"
   },
   "peerDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.28",
-    "devextreme-react": "24.1.2-beta",
+    "devextreme-react": "24.1.4",
     "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.4"
   },
   "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;