devexpress-reporting-react 24.1.7 → 24.2.2-beta

package/dx-report-viewer/components/reporting/AIPanel/AIPanel.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IAIPanelViewModel } from 'devexpress-reporting/scopes/reporting-viewer-internal';
+declare const AIPanel: React.FC<{
+    data: IAIPanelViewModel;
+}>;
+export default AIPanel;

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

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+import { Button, CheckBox, LoadIndicator, SelectBox, TextArea, Popup } from 'devextreme-react';
+import Template from '../../core/Template';
+import { Position } from 'devextreme-react/cjs/popup';
+import useDxForceRerender from '../../../hooks/dxForceRerender';
+const AIPanel = ({ data }) => {
+    const GetVisible = () => {
+        return data.model?.tabInfo?.visible && data.model?.tabInfo?.active;
+    };
+    const getCopyTemplate = () => {
+        return data.model?.copyButtonTemplate;
+    };
+    const aiPanelHeaderLabel = data.model.getViewModel().aiPanelHeaderLabel;
+    const viewModel = data.model?.getViewModel();
+    const popupAttributes = useMemo(() => {
+        return {
+            class: 'dxrd-preview-ai-panel-warning-popup'
+        };
+    }, []);
+    const forceRerender = useDxForceRerender();
+    React.useEffect(() => {
+        forceRerender();
+    }, [Object.values(data.model.getViewModel())]);
+    return (React.createElement("div", { id: "dxrd-preview-ai-panel-id", className: "dxrd-preview-ai-panel", hidden: !(GetVisible()) },
+        React.createElement("div", { className: "dxrd-right-panel-header dxd-text-primary" },
+            React.createElement("span", null,
+                " ",
+                aiPanelHeaderLabel,
+                " ")),
+        !!viewModel && (React.createElement("div", null,
+            React.createElement("div", { className: "dxrd-preview-ai-panel-wrapper dx-editors" },
+                React.createElement("div", { className: "dx-fieldset" },
+                    React.createElement("div", { className: "dx-field dxrd-preview-ai-select-box" },
+                        React.createElement("label", { className: "dxrd-preview-ai-form-label", htmlFor: "dxrv-ai-target-select" },
+                            " ",
+                            viewModel.targetContentText),
+                        React.createElement(SelectBox, { id: "dxrv-ai-target-select", className: "dxrd-preview-ai-form-input", dataSource: viewModel.targetSelecBoxOptions.dataSource, onValueChanged: viewModel.targetSelecBoxOptions.onValueChanged, value: viewModel.targetSelecBoxOptions.value, displayExpr: viewModel.targetSelecBoxOptions.displayExpr, valueExpr: viewModel.targetSelecBoxOptions.valueExpr, inputAttr: viewModel.targetSelecBoxOptions.inputAttr })),
+                    React.createElement("div", { className: "dx-field dxrd-preview-ai-select-box" },
+                        React.createElement("label", { className: "dxrd-preview-ai-form-label", htmlFor: "dxrv-ai-language-select" },
+                            " ",
+                            viewModel.targetLanguageText,
+                            " "),
+                        React.createElement(SelectBox, { id: "dxrv-ai-language-select", className: "dxrd-preview-ai-form-input", dataSource: viewModel.languageSelecBoxOptions.dataSource, onValueChanged: viewModel.languageSelecBoxOptions.onValueChanged, value: viewModel.languageSelecBoxOptions.value, displayExpr: viewModel.languageSelecBoxOptions.displayExpr, valueExpr: viewModel.languageSelecBoxOptions.valueExpr, showClearButton: viewModel.languageSelecBoxOptions.showClearButton, inputAttr: viewModel.languageSelecBoxOptions.inputAttr })),
+                    viewModel.pageSelecBoxVisible && (React.createElement("div", { className: "dx-field dxrd-preview-ai-select-box" },
+                        React.createElement("label", { className: "dxrd-preview-ai-form-label", htmlFor: "dxrv-ai-page-select" },
+                            " ",
+                            viewModel.pageSelectText),
+                        React.createElement(SelectBox, { className: "dxrd-preview-ai-form-input", id: "dxrv-ai-page-select", dataSource: viewModel.pageSelecBoxOptions.dataSource, onValueChanged: viewModel.pageSelecBoxOptions.onValueChanged, value: viewModel.pageSelecBoxOptions.value, displayExpr: viewModel.pageSelecBoxOptions.displayExpr, valueExpr: viewModel.pageSelecBoxOptions.valueExpr, searchExpr: viewModel.pageSelecBoxOptions.searchExpr, searchEnabled: viewModel.pageSelecBoxOptions.searchEnabled, visible: viewModel.pageSelecBoxOptions.visible, inputAttr: viewModel.pageSelecBoxOptions.inputAttr }))),
+                    React.createElement("div", { className: "dx-field" },
+                        React.createElement("div", { className: "dxrd-preview-ai-buttons-wrapper" },
+                            React.createElement(LoadIndicator, { className: "dxrd-preview-ai-buttons", visible: data.model.loading, height: 24, width: 24 }),
+                            React.createElement(Button, { className: "dxrd-preview-ai-buttons dx-accessibility-focus-border-accented", text: viewModel.buttons.translateTextButton.text, disabled: viewModel.buttons.translateTextButton.disabled, onClick: viewModel.buttons.translateTextButton.onClick, width: viewModel.buttons.translateTextButton.width }),
+                            React.createElement(Button, { className: "dxrd-preview-ai-buttons dx-accessibility-focus-border-accented", text: viewModel.buttons.summarizeTextButton.text, disabled: viewModel.buttons.summarizeTextButton.disabled, onClick: viewModel.buttons.summarizeTextButton.onClick, width: viewModel.buttons.summarizeTextButton.width })))),
+                viewModel.resultVisible && (React.createElement("div", { className: "dxrd-right-panel-header dxd-text-primary dxd-border-primary dxrd-ai-result-text" },
+                    React.createElement("span", { className: "dxrd-right-panel-result-text" },
+                        " ",
+                        viewModel.textProcessingResultHeaderTest,
+                        " "),
+                    React.createElement("div", { role: "button", className: "dxrd-right-panel-copy-button dx-accessibility-focus-border-accented", tabIndex: 0, onKeyDown: (e) => viewModel.copyText(data, e) },
+                        React.createElement(Template, { template: getCopyTemplate(), className: "dxd-icon-highlighted", onClick: (e) => viewModel.buttons.copyResultButton.onClick(e) })))),
+                React.createElement(TextArea, { id: "dxrd-ai-panel-text-area-id", tabIndex: 0, className: "dx-accessibility-focus-border-accented dxrd-preview-ai-panel-textarea dxd-back-primary2", value: viewModel.aiProcessingResultText, onInput: (e) => e.event.preventDefault(), onPaste: (e) => e.event.preventDefault(), onKeyDown: (e) => e.event.key !== 'Tab' && e.event.preventDefault(), hoverStateEnabled: false })),
+            React.createElement(Popup, { width: 350, height: 200, shading: false, focusStateEnabled: false, visible: viewModel.warningTextLimitPopupVisible, container: '#dxrd-preview-ai-panel-id', showCloseButton: false, showTitle: false, wrapperAttr: popupAttributes },
+                React.createElement(Position, { at: "top", my: "top", of: "#dxrd-preview-ai-panel-id", collision: "fit" }),
+                React.createElement("span", { className: "dxrd-preview-ai-panel-warning-popup-text" },
+                    " ",
+                    viewModel.limitExceededWarningMsg,
+                    " "),
+                React.createElement(CheckBox, { className: "dxrd-preview-ai-panel-warning-popup-checkbox", text: viewModel.proceedForAllCheckBoxOptions.text, value: viewModel.proceedForAllCheckBoxOptions.value, onValueChanged: viewModel.proceedForAllCheckBoxOptions.onValueChanged }),
+                React.createElement("div", { className: "dxrd-preview-ai-panel-warning-popup-button-group" },
+                    React.createElement(Button, { text: viewModel.proceedNextChunkButtonText, onClick: viewModel.proceedNextButtonClick, className: "dxrd-preview-ai-panel-warning-popup-button dx-button-default" }),
+                    React.createElement(Button, { text: viewModel.cancelChunkedOperationButtonText, onClick: viewModel.cancelProcessButtonClick, className: "dxrd-preview-ai-panel-warning-popup-button" })))))));
+};
+export default AIPanel;

package/dx-report-viewer/components/reporting/AIPanel/index.d.ts

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

package/dx-report-viewer/components/reporting/AIPanel/index.js

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

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

@@ -11,7 +11,7 @@ const DocumentMap = ({ data }) => {
     React.useEffect(() => {
         htmlRef.current = scrollViewRef.current?.instance().element();
         setViewModel(data.model?.getViewModel());
-    }, []);
+    }, [scrollViewRef.current]);
     useDxMutationObserver(htmlRef, data.keyboardHelper);
     return (React.createElement("div", { className: "dxrd-preview-document-map dxrd-height-100 dxrd-overflow-hidden", hidden: !(data.active && data.visible) },
         React.createElement("div", { className: "dxrd-right-panel-header dxd-text-primary" },

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

@@ -9,7 +9,7 @@ const CharacterComb = ({ data }) => {
         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' : ''}` },
+    return (React.createElement("div", { ref: zoomRef, style: processStyles(data.containerStyle), onClick: event => data.activateEditor(data, event), 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: processStyles(cell.style) }, cell.text))),
         data.active && !data.field.readOnly &&

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

@@ -17,6 +17,7 @@ const PopupImageEditingField = ({ data }) => {
             },
             container: container
         });
+        data.setEditingFieldElement(popupContainerRef.current);
     }, []);
     return (React.createElement("div", { ref: elementRef, className: "dxrp-editing-field-container", style: data.containerStyle },
         React.createElement("div", { ref: popupContainerRef, className: 'dx-accessibility-editing-field-item dx-accessibility-border-accented ' + data.parentPopupClass, onClick: event => data.activateEditor(data, event) },

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

@@ -4,6 +4,9 @@ import dxZoom from '../../../../../hooks/dxZoom';
 import { processStyles } from '../../../../../core/processStyles';
 const EditingFieldContainer = ({ data }) => {
     const zoomRef = dxZoom(data.zoom);
+    React.useEffect(() => {
+        data.setEditingFieldElement(zoomRef.current);
+    }, []);
     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' : ''}` },
         React.createElement("div", { className: "dxrp-editing-field-borders", style: data.borderStyle }),
         React.createElement("div", { className: "dxrp-editing-field-content", onClick: event => data.activateEditor(data, event) },

package/dx-report-viewer/components/reporting/Mobile/Page/MobilePage.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import Template from '../../../core/Template';
 import useDxMobileAutofit from '../hooks/mobileAutofit';
+import useDxPreviewPageRenderer from '../../../../hooks/dxPreviewPageRenderer';
 const MobilePage = ({ data }) => {
     const ref = useDxMobileAutofit(data.autoFitOptions);
+    useDxPreviewPageRenderer(ref, data.imageOptions);
     return (React.createElement("div", { className: "dxrdp-content", onClick: event => data.clickToBrick(data, event), style: { width: data.width + 'px', height: data.height + 'px' }, ref: ref },
         React.createElement("div", { className: "dxrdp-loading-wrapper", style: {
                 width: data.width + 'px',
@@ -10,7 +12,6 @@ const MobilePage = ({ data }) => {
                 lineHeight: data.height + 'px',
                 backgroundColor: data.color
             }, hidden: !data.pageLoading }, data.loadingText),
-        React.createElement("img", { className: "dxrd-width-100 dxrd-height-100", src: data.displayImageSrc, style: { backgroundColor: data.color } }),
         React.createElement("div", { className: `dxrdp-active-border ${data.active && data.hasBricks ? 'dxrdp-active' : ''}`, hidden: data.readerMode }),
         data.activeBricks.map(brick => React.createElement(Template, { key: brick.indexes, template: "dxrd-page-brick-mobile", data: brick })),
         !data.brickLoading && data.editingFields &&

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

@@ -21,12 +21,12 @@ const DateRangePopupContainer = ({ data }) => {
     const predefinedRangesRef = React.useRef();
     React.useEffect(() => {
         predefinedRangesRef.current = scrollViewRef.current?.instance().element();
-    }, []);
+    }, [scrollViewRef.current]);
     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 },
         React.createElement(ScrollView, { elementAttr: { 'role': 'dialog', 'aria-modal': 'true' }, showScrollbar: data.scrollViewOptions.showScrollbar, direction: data.scrollViewOptions.direction, useNative: data.scrollViewOptions.useNative, onInitialized: data.scrollViewOptions.onInitialized },
             React.createElement("div", { className: "dxrv-daterange-editor-popup-container", ref: ref },
-                React.createElement(ScrollView, { className: "dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item", elementAttr: { role: 'listbox' }, showScrollbar: data.predefinedRanges.scrollViewOptions.showScrollbar, scrollByContent: data.predefinedRanges.scrollViewOptions.scrollByContent, bounceEnabled: data.predefinedRanges.scrollViewOptions.bounceEnabled, useNative: data.predefinedRanges.scrollViewOptions.useNative, scrollByThumb: data.predefinedRanges.scrollViewOptions.scrollByThumb, onInitialized: data.predefinedRanges.scrollViewOptions.onInitialized },
+                React.createElement(ScrollView, { className: "dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item", elementAttr: { role: 'listbox' }, showScrollbar: data.predefinedRanges.scrollViewOptions.showScrollbar, scrollByContent: data.predefinedRanges.scrollViewOptions.scrollByContent, bounceEnabled: data.predefinedRanges.scrollViewOptions.bounceEnabled, useNative: data.predefinedRanges.scrollViewOptions.useNative, scrollByThumb: data.predefinedRanges.scrollViewOptions.scrollByThumb, onInitialized: data.predefinedRanges.scrollViewOptions.onInitialized, ref: scrollViewRef },
                     React.createElement("div", { className: "dx-accessibility-container-background dxd-back-accented" }),
                     data.predefinedRanges.items.map((item, index) => React.createElement(PredefinedItem, { key: index, item: item }))),
                 React.createElement("div", { className: "dxrv-daterange-editor-item" },

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

@@ -2,17 +2,17 @@ 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 dx-accessibility-border-accented", onClick: handleClick },
+    React.createElement("a", { className: "dxrd-breadcrump-link dxrd-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 dx-accessibility-border-accented", "aria-current": "location" },
+    React.createElement(Template, { className: "dxrd-breadcrumb-item-seperator", template: "dxrd-svg-preview-breadcrumbs_seperator" })));
+const CurrentCrumb = ({ item }) => (React.createElement("a", { className: "dxrd-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;
     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)
+    return (React.createElement("div", { className: "dxrd-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/Page/Page.js

@@ -2,24 +2,43 @@ import React from 'react';
 import Template from '../../../core/Template';
 import useDxMutationObserver from '../../../../hooks/dxMutationObserver';
 import useDxBrickSelection from '../../../../hooks/dxBrickSelection';
+import useDxPreviewPageRenderer from '../../../../hooks/dxPreviewPageRenderer';
+import Menu from 'devextreme-react/menu';
 const EditingFieldsHolder = ({ editingFields, editingFieldsKeyboardHelper }) => {
     const mutationObserverRef = React.useRef();
     useDxMutationObserver(mutationObserverRef, editingFieldsKeyboardHelper);
     return (React.createElement("div", { ref: mutationObserverRef }, editingFields.map((editingField, index) => React.createElement(Template, { key: index, template: editingField.template, data: editingField }))));
 };
+const Image = ({ data }) => {
+    const pageRendererRef = React.useRef();
+    useDxPreviewPageRenderer(pageRendererRef, data.imageOptions);
+    return (React.createElement("div", null,
+        data.activeBricks.map(brick => React.createElement(Template, { key: brick.indexes, template: "dxrd-page-brick-mobile", data: brick })),
+        data.clickableBricks.map(brick => React.createElement(Template, { key: brick.indexes, template: "dxrd-page-brick-clickable", data: brick })),
+        !data.brickLoading
+            && data.editingFields
+            && React.createElement(EditingFieldsHolder, { editingFields: data.editingFields, editingFieldsKeyboardHelper: data.editingFieldsKeyboardHelper })));
+};
 const Page = ({ data }) => {
     const brickSelectionRef = React.useRef();
     useDxBrickSelection(brickSelectionRef, data.brickSelectionProg);
+    useDxPreviewPageRenderer(brickSelectionRef, data.imageOptions);
+    const renderMenuItemTemplate = (item) => {
+        return (React.createElement("div", { className: "dxrd-ai-floating-smart-tag-container" },
+            item.text && (React.createElement("div", { className: "dxrd-ai-floating-smart-tag-text" }, item.text)),
+            item.items && item.text.length > 0 && (React.createElement("div", { className: `dx-icon dxrd-ai-floating-smart-tag-items ${(data.getModel()?.reportPreview?.rtlViewer ?? false) ? 'dx-icon-spinleft' : 'dx-icon-spinright'}` })),
+            item.icon && (React.createElement("div", { className: "dxrd-ai-floating-smart-tag-icon" },
+                React.createElement(Template, { template: item.icon, data: null })))));
+    };
+    const menuAttributes = {
+        class: 'dxrd-control-ai-smart-tag dxd-icon-accented'
+    };
     return (React.createElement("div", { role: "img", className: "dxrd-report-preview-content dxrd-position-relative dxrd-width-100 dxrd-height-100", "aria-label": data.currentPageAriaLabelImgAlt, onClick: e => data.clickToBrick(data, e), ref: brickSelectionRef },
         React.createElement("div", { className: "dxrd-report-preview-content-loading-wrapper dxrd-background-white", style: { width: data.width + 2 + 'px', height: data.height + 2 + 'px' }, hidden: !data.pageLoading },
             React.createElement("div", { className: "dxrd-report-preview-content-loading-panel dxrd-text-align-center", style: { paddingTop: data.height / 2.3 + 'px' } },
                 React.createElement("div", { className: "dxrd-report-preview-content-loading-panel-text" }, data.loadingText))),
-        React.createElement("div", null,
-            React.createElement("img", { className: "dxrd-pointer-events-none dxrd-width-100 dxrd-height-100", src: data.displayImageSrc, alt: data.currentPageAriaLabelImgAlt }),
-            data.activeBricks.map(brick => React.createElement(Template, { key: brick.indexes, template: "dxrd-page-brick-mobile", data: brick })),
-            data.clickableBricks.map(brick => React.createElement(Template, { key: brick.indexes, template: "dxrd-page-brick-clickable", data: brick })),
-            !data.brickLoading
-                && data.editingFields
-                && React.createElement(EditingFieldsHolder, { editingFields: data.editingFields, editingFieldsKeyboardHelper: data.editingFieldsKeyboardHelper }))));
+        React.createElement(Image, { data: data }),
+        data.activeBricks.length > 0 && (React.createElement("div", { style: { position: 'absolute', top: data.smartTagAIMenuPosition.topP, left: data.smartTagAIMenuPosition.leftP, right: data.smartTagAIMenuPosition.rightP, height: data.smartTagAIMenuPosition.heightP, width: data.smartTagAIMenuPosition.widthP } },
+            React.createElement(Menu, { dataSource: data.smartTagAIMenu.dataSource, hideSubmenuOnMouseLeave: data.smartTagAIMenu.hideSubmenuOnMouseLeave, elementAttr: menuAttributes, visible: data.smartTagAIMenu.visible, itemRender: renderMenuItemTemplate, showFirstSubmenuMode: 'onHover', onItemClick: (e) => typeof data.smartTagAIMenu.onItemClick === 'function' && data.smartTagAIMenu.onItemClick(e) })))));
 };
 export default Page;

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

@@ -13,7 +13,7 @@ const MultiPageHolder = ({ lazyImagesOptions, pages }) => {
 const MultiPageItem = ({ page }) => {
     const toViewRef = React.useRef();
     useDxToView(toViewRef, page);
-    const valid = page.pageLoading || (!page.pageLoading && page.displayImageSrc);
+    const valid = page.pageLoading || (!page.pageLoading && page.pageLoaded);
     if (!valid)
         return null;
     return (React.createElement("div", { role: "listitem", className: `dxrd-report-preview dxrd-report-preview-multipage dx-accessibility-page-item dx-accessibility-border-accented ${page.active ? 'dxrd-report-preview-active' : ''}`, style: { width: page.width + 'px', height: page.height + 'px' }, ref: toViewRef },
@@ -29,7 +29,7 @@ const Surface = ({ data }) => {
         React.createElement("div", { className: `dxrd-preview-wrapper ${data.rtlReport ? 'dx-rtl' : ''} ${data.editingFieldsHighlighted ? 'dxrp-editing-fields-hightlighted' : ''}`, "data-bind": "textCopier" },
             React.createElement(Template, { template: "dxrd-preview-progress-bar", data: data.progressBar }),
             React.createElement("div", { className: "dxrd-preview-surface", ref: dxMutationObserverRef },
-                !data.showMultipagePreview && (React.createElement("div", { className: "dxrd-report-preview-holder", role: "list" }, (!!data.currentPage && (data.currentPage.pageLoading || (!data.currentPage.pageLoading && data.currentPage.displayImageSrc))) && (React.createElement("div", { role: "listitem", className: "dxrd-report-preview dx-accessibility-page-item dx-accessibility-border-accented", ref: autoFitRef, style: { width: data.currentPage.width + 'px', height: data.currentPage.height + 'px' } },
+                !data.showMultipagePreview && (React.createElement("div", { className: "dxrd-report-preview-holder", role: "list" }, (!!data.currentPage && (data.currentPage.pageLoading || (!data.currentPage.pageLoading && data.currentPage.pageLoaded))) && (React.createElement("div", { role: "listitem", className: "dxrd-report-preview dx-accessibility-page-item dx-accessibility-border-accented", ref: autoFitRef, style: { width: data.currentPage.width + 'px', height: data.currentPage.height + 'px' } },
                     React.createElement(Template, { template: "dxrd-preview-page", data: data.currentPage }))))),
                 data.showMultipagePreview && !!data.currentPage && React.createElement(MultiPageHolder, { pages: data.pages, lazyImagesOptions: data.lazyImagesOptions }),
                 React.createElement("div", { className: `dxrd-report-preview-placeholder ${!!data.currentPage ? 'dxrd-visually-hidden' : ''}` },

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

@@ -20,9 +20,7 @@ const ToolbarExportTo = ({ data }) => {
     }, []);
     return (React.createElement("div", { className: "dxrd-preview-export-toolbar-item dxrd-toolbar-item", hidden: !data.visible },
         React.createElement("div", { className: "dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" },
-            React.createElement(Menu, { ref: menuRef, 
-                // wrapperAttr={{ className: 'dxrd-preview-export-to dxd-button-back-color dxd-state-normal dxd-icon-highlighted' }}
-                disabled: data.disabled, items: data.widget.items, cssClass: "dxrdp-export-to-menu", onItemClick: data.click, onSubmenuShowing: onSubmenuShowing, onSubmenuShown: data.widget.onSubmenuShown, onSubmenuHiding: data.widget.onSubmenuHiding, onItemRendered: data.widget.onItemRendered, itemRender: (data) => data && React.createElement(MenuItemTemplate, { item: data }), tabIndex: -1 })),
+            React.createElement(Menu, { ref: menuRef, disabled: data.disabled, items: data.widget.items, cssClass: "dxrdp-export-to-menu dxrd-preview-export-to dxd-button-back-color dxd-state-normal dxd-icon-highlighted", onItemClick: data.click, onSubmenuShowing: onSubmenuShowing, onSubmenuShown: data.widget.onSubmenuShown, onSubmenuHiding: data.widget.onSubmenuHiding, onItemRendered: data.widget.onItemRendered, itemRender: (data) => data && React.createElement(MenuItemTemplate, { item: data }), tabIndex: -1 })),
         React.createElement("div", { className: "dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary", hidden: !data.hasSeparator })));
 };
 export default ToolbarExportTo;

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

@@ -56,6 +56,6 @@ const PictureEditor = ({ options, className }) => {
     };
     return (React.createElement("div", { ref: pictureEditingRef, className: "dx-picture-editing" },
         React.createElement("canvas", { ref: canvasRef }),
-        React.createElement(Popup, { className: "dx-picture-editing-active", width: "48px", height: "auto", wrapperAttr: { class: 'dx-picture-editing-active' }, position: popupOptions.position, container: popupOptions.container, showTitle: false, animation: {}, shading: false, visible: true, contentRender: renderContent })));
+        React.createElement(Popup, { className: "dx-picture-editing-active", width: "48px", height: "auto", wrapperAttr: { class: 'dx-picture-editing-active' }, position: popupOptions.position, container: popupOptions.container, showTitle: false, onShown: pictureEditorViewModel?.onContentReady, showCloseButton: false, animation: {}, shading: false, visible: true, contentRender: renderContent })));
 };
 export default PictureEditor;

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

@@ -12,6 +12,7 @@ import ToolbarContent from './Toolbar/ToolbarContent';
 import Zoom from './Toolbar/Zoom';
 import ParametersPanel from './ParametersPanel';
 import DocumentMap from './DocumentMap';
+import AIPanel from './AIPanel/AIPanel';
 import Editor from './ParametersPanel/Editor/Editor';
 import EditorContent from './ParametersPanel/Editor/EditorContent';
 import GroupEditor from './ParametersPanel/Editor/GroupEditor';
@@ -62,6 +63,7 @@ export const reportingTemplates = {
     'dxrd-multivalue': MultiValue,
     'dxrd-preview-export-options': ExportOptions,
     'dxrd-preview-document-map': DocumentMap,
+    'dxrd-preview-ai-panel': AIPanel,
     'dxrd-multivalue-editable': MultiValueEditable,
     'dxrv-range-parameter': DateRange,
     'dxrv-daterange-editor-popup': DateRangePopupContainer,

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

@@ -4,9 +4,9 @@ import { initializeMutationObserver } from '@devexpress/analytics-core/accessibi
 const useDxMutationObserver = (ref, args) => {
     const accesibilitySetting = React.useContext(accesibilitySettingsContext);
     React.useEffect(() => {
-        if (args && !args.isDisposing && ref.current)
+        if (args && ref.current)
             return initializeMutationObserver(ref.current, args, accesibilitySetting.accessibilityCompliant);
         return () => { };
-    }, [args, accesibilitySetting, ref.current]);
+    }, [args, ref.current]);
 };
 export default useDxMutationObserver;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IPreviewImageOptions } from 'devexpress-reporting/viewer/internal/_bindings';
+declare const useDxPreviewPageRenderer: (ref: React.MutableRefObject<HTMLElement>, options: IPreviewImageOptions) => void;
+export default useDxPreviewPageRenderer;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { updatePreviewPageRendererBinding } from 'devexpress-reporting/viewer/internal/_bindings';
+const useDxPreviewPageRenderer = (ref, options) => {
+    React.useEffect(() => options && ref.current && updatePreviewPageRendererBinding(ref.current, options), [options, ref.current]);
+};
+export default useDxPreviewPageRenderer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devexpress-reporting-react",
-  "version": "24.1.7",
+  "version": "24.2.2-beta",
   "homepage": "https://www.devexpress.com/",
   "bugs": "https://www.devexpress.com/support/",
   "author": "Developer Express Inc.",
@@ -15,23 +15,24 @@
   "license": "SEE LICENSE IN README.md",
   "main": "./index.js",
   "dependencies": {
-    "prop-types": "^15.8.1",
-    "devexpress-reporting": "24.1.7"
+    "devexpress-reporting": "24.2.2-beta",
+    "prop-types": "^15.8.1"
   },
   "peerDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.28",
-    "devextreme-react": "24.1.7",
+    "devextreme-react": "24.2.2-beta",
     "react": "^18.0.28",
     "react-dom": "^18.0.28"
   },
   "devDependencies": {
+    "@devexpress/analytics-core": "24.2.2-beta",
     "shx": "^0.3.4",
-    "typescript": "~5.0.4",
-    "@devexpress/analytics-core": "24.1.7"
+    "typescript": "<5.3.0"
   },
   "scripts": {
     "prebuild": "npx shx rm -rf dist && npx shx mkdir dist && npx shx cp README.md dist/ && npx shx cp package.json dist/",
     "build": "npx tsc --project tsconfig.lib.json"
-  }
-}
+  },
+  "commitSHA": "cc41462435ed6449af1ecfedef0f3bc179dea83c"
+}