devexpress-reporting-react 24.1.2-beta

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { TagBox } from 'devextreme-react/tag-box';
+import Validator from 'devextreme-react/validator';
+import { useDropDownOptions, useEditorOptions, useValidatorOptions } from '../../../../analytics/Properties/Editors/editorHooks';
+const MultiValue = ({ data }) => {
+    const tagBoxRef = React.useRef();
+    const [value, setValue] = React.useState();
+    const args = {
+        getOptions: () => data.value.getOptions({
+            dataSource: data.value.dataSource,
+            searchEnabled: true,
+            useItemTextAsTitle: true,
+            searchExpr: data.value.searchExpr || ['displayValue'],
+            value: data.value.value,
+            displayExpr: data.value.displayExpr || 'displayValue',
+            valueExpr: data.value.valueExpr || 'value',
+            multiline: false,
+            showSelectionControls: true,
+            selectAllMode: 'allPages',
+            inputAttr: { 'aria-label': data.value.displayName, id: data.value.editorInputId },
+            disabled: data.value.disabled,
+            selectAllText: data.value.selectAllText,
+            placeholder: data.value.placeholder,
+            maxDisplayedTags: data.value.maxDisplayedTags,
+            showMultiTagOnly: true
+        }),
+    };
+    const options = useEditorOptions(tagBoxRef, data, args);
+    const dropDownOptions = useDropDownOptions(tagBoxRef, ({ element, container }) => ({
+        container,
+        position: {
+            boundary: container,
+            collision: 'flipfit', of: element, at: 'bottom', my: 'top'
+        }
+    }));
+    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));
+    }, []);
+    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 })));
+};
+export default MultiValue;

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

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

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

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

package/dx-report-viewer/components/reporting/ParametersPanel/MultiValue/MultiValueEditable/MultiValueEditable.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/editor';
+declare const MultiValueEditable: React.FC<{
+    data: IEditorViewModel;
+}>;
+export default MultiValueEditable;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import CollectionEditor from '../../../../analytics/Properties/CollectionEditor';
+import Template from '../../../../core/Template';
+import { getLocalization } from '@devexpress/analytics-core/property-grid/localization/_localization';
+import { useEditorOptions } from '../../../../analytics/Properties/Editors/editorHooks';
+const properties = ({ data }) => React.createElement(Template, { data: data.getProperties(), template: "dx-propertieseditor" });
+const MultiValueEditable = ({ data }) => {
+    const getEditorOptions = () => {
+        const editor = data.getModel();
+        const getOptionsInfoProperty = (propertyName) => !propertyName ? data.info
+            : data.info && data.info[propertyName];
+        const addHandler = () => (getOptionsInfoProperty('addHandler')).call({ data });
+        return {
+            data: {
+                values: [...editor.value],
+                addHandler: () => {
+                    return addHandler();
+                },
+                onValueChanged: (array) => {
+                    editor._set('value', [...array]);
+                },
+                info: data.info,
+                level: data.level, displayName: getLocalization(data.displayName)
+            },
+            contentTemplate: properties
+        };
+    };
+    const args = {
+        getEditorOptions
+    };
+    const options = useEditorOptions(React.useRef(), data, args);
+    if (!data.value)
+        return undefined;
+    return (React.createElement("div", { className: "dxrd-editor", hidden: !data.visible },
+        React.createElement(CollectionEditor, { data: options.data, contentTemplate: options.contentTemplate })));
+};
+export default MultiValueEditable;

package/dx-report-viewer/components/reporting/ParametersPanel/MultiValue/MultiValueEditable/index.d.ts

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

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ITabPanelItemWithPropertyGridViewModel } from '@devexpress/analytics-core/core/tools/_tabInfoWithPropertyGrid';
+export type ParametersPanelAPI = {
+    reset: () => void;
+    submit: (params: any) => void;
+};
+declare const ParametersPanel: React.ForwardRefExoticComponent<{
+    data: ITabPanelItemWithPropertyGridViewModel;
+} & React.RefAttributes<ParametersPanelAPI>>;
+export default ParametersPanel;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import Button from 'devextreme-react/button';
+import LoadIndicator from 'devextreme-react/load-indicator';
+import { ScrollView } from 'devextreme-react/scroll-view';
+import Template from '../../core/Template/Template';
+import useDxMutationObserver from '../../../hooks/dxMutationObserver';
+const ParametersPanel = React.forwardRef(({ data }, ref) => {
+    const scrollViewRef = React.useRef();
+    const htmlRef = React.useRef();
+    React.useEffect(() => {
+        htmlRef.current = scrollViewRef.current.instance().element();
+    }, [scrollViewRef.current]);
+    useDxMutationObserver(htmlRef, data.keyboardHelper);
+    const onScrollViewInitialized = (args) => args.component.option('useKeyboard', false);
+    const reset = () => data.model.restore();
+    const submit = (params) => data.model.validateAndSubmit(params);
+    React.useImperativeHandle(ref, () => ({ reset, submit }), [data]);
+    return (React.createElement("div", { className: "dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper", hidden: !(data.active && data.visible) },
+        React.createElement("div", { className: "dxrd-right-panel-header dxd-text-primary", hidden: !data.model.showHeader }, data.model.headerText),
+        (!data.model || data.model.isEmpty) && (React.createElement("div", { className: "dxrd-group-header-parameters-empty dxd-text-primary" }, data.model.emptyText)),
+        (data.model || data.model.isEmpty()) && (React.createElement(ScrollView, { className: "dxrd-right-panel-body", id: "propertiesPanel", showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: onScrollViewInitialized, ref: scrollViewRef },
+            React.createElement("div", { role: "tree", className: "dx-fieldset dxrd-right-panel-content" },
+                React.createElement(Template, { template: "dx-propertieseditor", data: data.propertyGrid })),
+            React.createElement("div", { className: "dxrd-preview-parameter-actions-container", hidden: !data.model.showButtons },
+                React.createElement(LoadIndicator, { className: "dxrd-preview-parameter-action dxrd-preview-loading", visible: data.model.parametersLoading }),
+                data.model.buttons.map((button, index) => (React.createElement(Button, { key: index, className: "dxrd-preview-parameter-action dxrdp-parameters-reset dx-accessibility-focus-border-accented", text: button.text, onClick: button.onClick }))))))));
+});
+export default ParametersPanel;

package/dx-report-viewer/components/reporting/ParametersPanel/ParametersSeparator/ParametersSeparator.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ParametersSeparator: React.FC;
+export default ParametersSeparator;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+const ParametersSeparator = () => (React.createElement("div", { className: "dxrd-parameters-item-separator" },
+    React.createElement("div", { className: "dxrd-item-separator dxd-border-secondary" })));
+export default ParametersSeparator;

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

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

package/dx-report-viewer/components/reporting/ParametersPanel/ParametersSeparator/index.js

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

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

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

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

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

package/dx-report-viewer/components/reporting/ReportPreview/Breadcrumbs/Breadcrumbs.d.ts

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import Template from '../../../core/Template';
+const ClickableCrumb = ({ item, handleClick }) => (React.createElement(React.Fragment, null,
+    React.createElement("a", { className: "breadcrump-link breadcrumb-item dxd-text-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" },
+    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)
+        ? React.createElement(CurrentCrumb, { key: index, item: item })
+        : React.createElement(ClickableCrumb, { key: index, item: item, handleClick: () => data.onClick(item.position) }))));
+};
+export default Breadcrumbs;

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

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

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

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

package/dx-report-viewer/components/reporting/ReportPreview/Brick/Brick.d.ts

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

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

@@ -0,0 +1,3 @@
+import React from 'react';
+const Brick = ({ data }) => (React.createElement("div", { className: `dxrd-report-preview-brick ${data.active ? 'dxrd-report-preview-brick-selected' : ''}`, style: { top: data.topP, left: data.leftP, right: data.rightP, height: data.heightP, width: data.widthP } }));
+export default Brick;

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

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

package/dx-report-viewer/components/reporting/ReportPreview/Brick/index.js

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

package/dx-report-viewer/components/reporting/ReportPreview/BrickClickable/BrickClickable.d.ts

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+const BrickClickable = ({ data }) => {
+    const { drillDownKey, sortData } = data.navigation || {};
+    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');
+    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/BrickClickable/index.d.ts

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

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

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

package/dx-report-viewer/components/reporting/ReportPreview/Page/Page.d.ts

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import Template from '../../../core/Template';
+import useDxMutationObserver from '../../../../hooks/dxMutationObserver';
+import useDxBrickSelection from '../../../../hooks/dxBrickSelection';
+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 Page = ({ data }) => {
+    const brickSelectionRef = React.useRef();
+    useDxBrickSelection(brickSelectionRef, data.brickSelectionProg);
+    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 }))));
+};
+export default Page;

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

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

package/dx-report-viewer/components/reporting/ReportPreview/Page/index.js

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

package/dx-report-viewer/components/reporting/ReportPreview/ProgressBar/ProgressBar.d.ts

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

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

@@ -0,0 +1,13 @@
+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);
+    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),
+        React.createElement("div", { className: "dxrd-preview-progress-bar dxd-back-primary" },
+            React.createElement("div", { className: "dxrd-preview-progress-value dxd-preview-progress-bar-value-color dxd-back-accented", style: { width: data.progress + '%' } })),
+        React.createElement("div", { role: "button", className: "dxrd-preview-progress-cancel dxd-hyperlink-color dxd-border-accented dxd-text-accented dx-accessibility-list-item dx-accessibility-border-accented", hidden: !data.cancelButton.visible, onClick: handleCancelButtonClick }, data.cancelButton.text)));
+};
+export default ProgressBar;

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

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

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

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

package/dx-report-viewer/components/reporting/ReportPreview/Surface/Surface.d.ts

@@ -0,0 +1,6 @@
+import { IReportPreviewViewModel } from 'devexpress-reporting/viewer/reportPreview.viewModel';
+import React from 'react';
+declare const Surface: React.FC<{
+    data: IReportPreviewViewModel;
+}>;
+export default Surface;

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

@@ -0,0 +1,42 @@
+import { getLocalization } from '@devexpress/analytics-core/property-grid/localization/localization_utils';
+import React from 'react';
+import Template from '../../../core/Template';
+import useDxMutationObserver from '../../../../hooks/dxMutationObserver';
+import useDxAutoFit from '../../../../hooks/dxAutoFit';
+import useDxLazyImages from '../../../../hooks/dxLazyImages';
+import useDxToView from '../../../../hooks/dxToView';
+const MultiPageHolder = ({ lazyImagesOptions, pages }) => {
+    const lazyImagesRef = React.useRef();
+    useDxLazyImages(lazyImagesRef, lazyImagesOptions);
+    return (React.createElement("div", { className: "dxrd-report-preview-holder", role: "list", ref: lazyImagesRef }, pages.map((page, index) => React.createElement(MultiPageItem, { key: index, page: page }))));
+};
+const MultiPageItem = ({ page }) => {
+    const toViewRef = React.useRef();
+    useDxToView(toViewRef, page);
+    const valid = page.pageLoading || (!page.pageLoading && page.displayImageSrc);
+    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 },
+        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);
+    const dxMutationObserverRef = React.useRef();
+    useDxMutationObserver(dxMutationObserverRef, data.previewBrickKeyboardHelper);
+    return (React.createElement(React.Fragment, null,
+        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' } },
+                    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' : ''}` },
+                    React.createElement("div", { "aria-live": "assertive", "aria-atomic": "true", className: "dxd-empty-area-placeholder-text-color dxd-text-info" }, data.emptyDocumentCaption)))),
+        React.createElement("div", { id: "dxrd-preview-bricks-live-region", className: "dxrd-visually-hidden", "aria-live": "polite", "aria-atomic": "true" }),
+        React.createElement("div", { id: "clipboard-container", className: "dxrd-position-absolute dxrd-top--100px" },
+            React.createElement("textarea", { disabled: true, "aria-label": clipboardMessage, id: "clipboard" }))));
+};
+export default Surface;

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

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

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ITabPanelItemWithPropertyGridViewModel } from '@devexpress/analytics-core/core/tools/_tabInfoWithPropertyGrid';
+declare const SearchComponent: React.FC<{
+    data: ITabPanelItemWithPropertyGridViewModel;
+}>;
+export default SearchComponent;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import useDxAction from '../../../hooks/dxAction';
+import { TextBox, Button, CheckBox, LoadIndicator, List } from 'devextreme-react';
+import useDxMutationObserver from '../../../hooks/dxMutationObserver';
+import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
+const SearchResultItem = ({ item }) => {
+    const div = React.useRef(null);
+    useDxAction(div, item.itemClickAction, item.data);
+    return (React.createElement("div", { ref: div, className: "dxrd-preview-search-result-item dxd-list-item-back-color dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented", "aria-label": item.attr['aria-label'] },
+        React.createElement("div", { className: "dx-accessibility-field-background dxd-back-accented" }),
+        React.createElement("div", { className: "dxrd-preview-search-tab-item-text propertygrid-editor-displayName dxd-text-primary" }, item.data.text),
+        React.createElement("div", { className: "dxrd-preview-search-tab-item-info dxd-text-primary" }, item.info)));
+};
+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) => {
+            data._viewModelEvents.call(ViewModelChangedEvent, args);
+        });
+        return () => disposeCallback();
+    }, [viewModel]);
+    const searchWrapper = React.useRef();
+    useDxMutationObserver(searchWrapper, data.keyboardHelper);
+    return (React.createElement("div", { ref: searchWrapper, role: "search", "aria-haspopup": "listbox", className: "dxrd-preview-search-wrapper", hidden: !data.active || !data.visible },
+        React.createElement("div", { id: "dxrd-preview-search-live-region", className: "dxrd-visually-hidden", "aria-live": "polite", "aria-atomic": "true" }),
+        React.createElement("div", { className: "dxrd-preview-search-tab-header" },
+            React.createElement("span", { className: "dxrd-preview-search-tab-header-text dxrd-right-panel-header dxd-text-primary" }, viewModel.headerText),
+            React.createElement("div", { className: "dxrd-preview-search-tab-editor-button-container" },
+                React.createElement(TextBox, { className: "dxrd-preview-search-editor dx-searcheditor", inputAttr: viewModel.searchEditor.inputAttr, onFocusOut: viewModel.searchEditor.onFocusOut, onKeyDown: viewModel.searchEditor.onKeyDown }),
+                React.createElement(Button, { className: "dxrd-preview-search-button", text: viewModel.buttons.searchButton.text, disabled: viewModel.buttons.searchButton.disabled, onClick: viewModel.buttons.searchButton.onClick })),
+            React.createElement("div", { className: "dxrd-preview-search-tab-header-text" },
+                React.createElement(CheckBox, { className: "dxrd-preview-search-checkbox", text: viewModel.matchCaseEditor.text, value: viewModel.matchCaseEditor.value, onValueChanged: viewModel.matchCaseEditor.onValueChanged }),
+                React.createElement(CheckBox, { className: "dxrd-preview-search-checkbox dxrd-preview-search-checkbox-second", text: viewModel.matchWholeWordEditor.text, value: viewModel.matchWholeWordEditor.value, onValueChanged: viewModel.matchWholeWordEditor.onValueChanged }))),
+        (viewModel.searchResultCount > 0 || viewModel.loading) && (React.createElement("div", { className: "dxrd-preview-search-result-wrapper" },
+            React.createElement("div", { className: "dxrd-preview-search-result-header dxd-border-primary dxd-text-primary" },
+                React.createElement("div", { className: "dxrd-preview-search-tab-header dxrd-preview-search-indicator-group" },
+                    React.createElement("div", { className: "dxrd-preview-search-results dxrd-preview-search-result-text", id: viewModel.searchResultHeaderId, "aria-busy": viewModel.loading ? 'true' : 'false' },
+                        React.createElement("span", { className: "dxrd-preview-search-result-text-bold" }, viewModel.searchResultCount),
+                        "\u00A0",
+                        React.createElement("span", null, viewModel.resultsInText),
+                        "\u00A0",
+                        React.createElement("span", { className: "dxrd-preview-search-result-text-bold" }, viewModel.searchResultPageCount),
+                        "\u00A0",
+                        React.createElement("span", null, viewModel.resultsPagesText)),
+                    React.createElement("div", { className: "dxrd-preview-search-results-navigation" },
+                        React.createElement(LoadIndicator, { className: "dxrdp-search-loading", visible: viewModel.loading }),
+                        React.createElement(Button, { className: "dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard", icon: viewModel.buttons.upButton.icon, onClick: viewModel.buttons.upButton.onClick, template: viewModel.buttons.upButton.template }),
+                        React.createElement(Button, { className: "dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard", icon: viewModel.buttons.downButton.icon, onClick: viewModel.buttons.downButton.onClick, template: viewModel.buttons.downButton.template })))),
+            React.createElement("div", { className: "dx-accessibility-container-background dxd-back-accented" }),
+            React.createElement(List, { className: "dxrd-preview-search-result dxd-border-accented", "aria-labelledby": viewModel.searchResultHeaderId, dataSource: viewModel.searchResultDataSource, pageLoadMode: "scrollBottom", focusStateEnabled: false, hoverStateEnabled: false, onItemRendered: viewModel.onItemRendered, itemRender: (item) => React.createElement(SearchResultItem, { item: item }), noDataText: "" }))),
+        viewModel.searchCompleted && viewModel.searchResultCount === 0 && (React.createElement("div", { className: "dxrd-preview-search-result-header dxd-border-primary dxd-text-primary" },
+            React.createElement("div", { className: "dxrd-preview-search-tab-header dxrd-preview-search-indicator-group" },
+                React.createElement("div", { className: "dxrd-preview-search-result-text" }, viewModel.noResultText))))));
+};
+export default SearchComponent;

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

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

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

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

package/dx-report-viewer/components/reporting/Toolbar/ExportTo/ExportTo.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IExportActionViewModel } from 'devexpress-reporting/viewer/exportOptions/exportOptionsModel';
+declare const ToolbarExportTo: React.FC<{
+    data: IExportActionViewModel;
+}>;
+export default ToolbarExportTo;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Menu } from 'devextreme-react/menu';
+import Template from '../../../core/Template';
+const MenuItemTemplate = ({ item }) => {
+    return (React.createElement("div", { title: item.text },
+        item.format && (React.createElement("div", { className: "dxrd-preview-export-item-text" }, item.text)),
+        !item.format && (React.createElement("div", null,
+            React.createElement("div", { className: "dxrd-preview-export-item-image-wrapper" },
+                React.createElement("div", { className: `dxrd-preview-export-item-image ${item.imageClassName}` },
+                    React.createElement(Template, { template: item.imageTemplateName }))),
+            React.createElement("div", { className: "dx-menu-item-popout-container" },
+                React.createElement("div", { className: "dx-menu-item-popout" }))))));
+};
+const ToolbarExportTo = ({ data }) => {
+    const [onSubmenuShowing, setOnSubmenuShowing] = React.useState(() => { });
+    const menuRef = React.useRef();
+    React.useEffect(() => {
+        const element = menuRef.current.instance().element();
+        setOnSubmenuShowing(() => data.widget.onSubmenuShowing(data.getPopupContainer(element), element));
+    }, []);
+    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("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/Toolbar/ExportTo/index.d.ts

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

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

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

package/dx-report-viewer/components/reporting/Toolbar/Pager/Pager.d.ts

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import SelectBox from 'devextreme-react/select-box';
+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));
+    }, [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("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/Toolbar/Pager/index.d.ts

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

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

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

package/dx-report-viewer/components/reporting/Toolbar/ToolbarContent/ToolbarContent.d.ts

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

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import Template from '../../../core/Template';
+import DxScrollView from 'devextreme-react/scroll-view';
+import useDxMutationObserver from '../../../../hooks/dxMutationObserver';
+import useDxKeyDownActions from '../../../../hooks/dxKeyDownActions';
+const ToolbarContent = ({ data }) => {
+    const onScrollViewInitialized = args => args.component.option('useKeyboard', false);
+    const toolbarRef = React.useRef();
+    useDxMutationObserver(toolbarRef, data.keyboardHelper);
+    useDxKeyDownActions(data.actionLists);
+    return (React.createElement(DxScrollView, { className: "dxrd-toolbar-wrapper dxrdp-toolbar-scrollable dx-shadow-top dxd-back-secondary-invariant", showScrollbar: "onHover", direction: "horizontal", useNative: false, scrollByThumb: true, onInitialized: onScrollViewInitialized },
+        React.createElement("div", { className: "dxrd-toolbar", role: "toolbar", ref: toolbarRef },
+            React.createElement("div", { id: "dxrd-preview-toolbar-live-region", className: "dxrd-visually-hidden", "aria-live": "polite", "aria-atomic": "true" }),
+            React.createElement("div", { className: "dx-accessibility-container-background dxd-back-accented" }),
+            React.createElement(Template, { template: "dxrd-toolbar-tmplt", data: data.actionLists.toolbarItems }))));
+};
+export default ToolbarContent;

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

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

package/dx-report-viewer/components/reporting/Toolbar/ToolbarContent/index.js

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