devexpress-reporting-react 24.1.2-beta

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IDateRangeEditorOptions } from 'devexpress-reporting/viewer/widgets/dateRange/dateRangeEditor';
+declare const MobileParametersDateRange: React.FC<{
+    data: IDateRangeEditorOptions;
+}>;
+export default MobileParametersDateRange;

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

@@ -0,0 +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 }) }));
+export default MobileParametersDateRange;

package/dx-report-viewer/components/reporting/Mobile/Parameters/MobileParametersDateRange/index.d.ts

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Popup } from 'devextreme-react/popup';
+import Template from '../../../../core/Template';
+import useDxParentContainer from '../../hooks/mobileParentContainer';
+import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
+import useDxForceRerender from '../../../../../hooks/dxForceRerender';
+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);
+    }, []);
+    const renderContent = () => {
+        if (!data.visible)
+            return null;
+        return React.createElement(Template, { template: "dxrv-preview-parameters-mobile", data: data });
+    };
+    return (React.createElement(Popup, { ref: ref, wrapperAttr: { class: 'dxrd-menu-parameters-popup' }, showTitle: false, onHidden: event => data.onHidden(event), width: "100vw", height: "100vh", visible: data.visible, container: parentContainer, contentRender: renderContent }));
+};
+export default MobileParametersPopup;

package/dx-report-viewer/components/reporting/Mobile/Parameters/MobileParametersPopup/index.d.ts

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import TextBox from 'devextreme-react/text-box';
+import useDxMobileSearchBar from '../hooks/mobileSearchBar';
+const MobileSearch = ({ data }) => {
+    const ref = useDxMobileSearchBar(data);
+    return (React.createElement("div", { className: "dxrdp-search-wrapper", style: { height: data.height }, ref: ref },
+        React.createElement("div", { className: "dxrd-mobile-search" },
+            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 })))));
+};
+export default MobileSearch;

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

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

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

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

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

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

package/dx-report-viewer/components/reporting/Mobile/Surface/MobileSurface.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Template from '../../../core/Template';
+import MobileGallery from '../Gallery';
+import useDxMobileZoom from '../hooks/mobileZoom';
+import useDxMobileSlide from '../hooks/mobileSlide';
+const MobileSurface = ({ data }) => {
+    const ref = React.useRef();
+    useDxMobileZoom(ref, data.mobileZoomOptions);
+    useDxMobileSlide(ref, data.slideOptions);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: ref, className: `dxrd-preview-wrapper dxrdp-fullscreen dxrd-preview-surface ${data.editingFieldsHighlighted ? 'dxrp-editing-fields-hightlighted' : ''}`, style: {
+                pointerEvents: data.surfaceEvents,
+                touchEvents: data.surfaceEvents,
+                top: data.topOffset + 'px',
+                height: data.previewWrapperSizeHeight + 'px',
+                width: data.previewWrapperSizeWidth + 'px',
+            }, onClick: data.click },
+            React.createElement(Template, { template: "dxrd-preview-progress-bar", data: data.progressBar }),
+            React.createElement("div", { className: "dxrd-mobile-content" },
+                React.createElement(MobileGallery, { data: data, slideOptions: data.slideOptions, gallery: data.gallery }))),
+        React.createElement("input", { type: "text", className: "dxrd-display-none" })));
+};
+export default MobileSurface;

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

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

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

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

package/dx-report-viewer/components/reporting/Mobile/hooks/mobileAutofit.d.ts

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

package/dx-report-viewer/components/reporting/Mobile/hooks/mobileAutofit.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { initializeAutoFitBinding } from 'devexpress-reporting/viewer/internal/_bindings';
+const useDxMobileAutofit = (options) => {
+    const ref = React.useRef();
+    React.useEffect(() => {
+        return initializeAutoFitBinding(ref.current, options);
+    }, []);
+    return ref;
+};
+export default useDxMobileAutofit;

package/dx-report-viewer/components/reporting/Mobile/hooks/mobilePaginator.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IMobilePaginatorViewModel } from 'devexpress-reporting/scopes/reporting-viewer-mobile-internal';
+declare const useDxMobilePaginator: (options: IMobilePaginatorViewModel) => React.MutableRefObject<HTMLDivElement>;
+export default useDxMobilePaginator;

package/dx-report-viewer/components/reporting/Mobile/hooks/mobilePaginator.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { initializeMobilePaginatorBinding } from 'devexpress-reporting/viewer/mobile/internal/_mobileBindings';
+const useDxMobilePaginator = (options) => {
+    const ref = React.useRef();
+    React.useEffect(() => {
+        initializeMobilePaginatorBinding(ref.current, options);
+    }, []);
+    return ref;
+};
+export default useDxMobilePaginator;

package/dx-report-viewer/components/reporting/Mobile/hooks/mobileParentContainer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const useDxParentContainer: <T extends {
+    instance: () => any;
+}>() => [React.MutableRefObject<T>, HTMLElement];
+export default useDxParentContainer;

package/dx-report-viewer/components/reporting/Mobile/hooks/mobileParentContainer.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { getParentContainer } from '@devexpress/analytics-core/widgets/_utils';
+const useDxParentContainer = () => {
+    const ref = React.useRef();
+    const [parentContainer, setParentContainer] = React.useState();
+    React.useEffect(() => {
+        const element = ref.current.instance().element();
+        setParentContainer(getParentContainer(element));
+    }, []);
+    return [ref, parentContainer];
+};
+export default useDxParentContainer;

package/dx-report-viewer/components/reporting/Mobile/hooks/mobileSearchBar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IMobileSearchViewModel } from 'devexpress-reporting/scopes/reporting-viewer-mobile-internal';
+declare const useDxMobileSearchBar: (options: IMobileSearchViewModel) => React.MutableRefObject<HTMLDivElement>;
+export default useDxMobileSearchBar;

package/dx-report-viewer/components/reporting/Mobile/hooks/mobileSearchBar.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { initializeMobileSearchBinding } from 'devexpress-reporting/viewer/mobile/internal/_mobileBindings';
+const useDxMobileSearchBar = (options) => {
+    const ref = React.useRef();
+    React.useEffect(() => {
+        return initializeMobileSearchBinding(ref.current, options);
+    }, []);
+    return ref;
+};
+export default useDxMobileSearchBar;

package/dx-report-viewer/components/reporting/Mobile/hooks/mobileSlide.d.ts

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

package/dx-report-viewer/components/reporting/Mobile/hooks/mobileSlide.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { initializeSlideBinding } from 'devexpress-reporting/viewer/mobile/internal/_mobileBindings';
+const useDxMobileSlide = (ref, options) => {
+    React.useEffect(() => {
+        return initializeSlideBinding(ref.current, options);
+    }, []);
+};
+export default useDxMobileSlide;

package/dx-report-viewer/components/reporting/Mobile/hooks/mobileZoom.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IZoomOptions } from 'devexpress-reporting/viewer/mobile/mobilePreview.viewModel';
+declare const useDxMobileZoom: (ref: React.MutableRefObject<HTMLElement>, options: IZoomOptions) => void;
+export default useDxMobileZoom;

package/dx-report-viewer/components/reporting/Mobile/hooks/mobileZoom.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { initializeMobileZoomBinding } from 'devexpress-reporting/viewer/mobile/internal/_mobileBindings';
+const useDxMobileZoom = (ref, options) => {
+    React.useEffect(() => {
+        initializeMobileZoomBinding(ref.current, options);
+    }, []);
+};
+export default useDxMobileZoom;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IDateRangeCalendarViewModel } from 'devexpress-reporting/viewer/widgets/dateRange/dateRangeEditor.viewmodel';
+declare const Calendar: React.FC<{
+    data: IDateRangeCalendarViewModel;
+}>;
+export default Calendar;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import DxCalendar from 'devextreme-react/calendar';
+const Calendar = ({ data }) => {
+    const cellTemplate = ({ data: item }) => (React.createElement("div", { className: "dxrv-daterange-cell" },
+        React.createElement("div", { className: "dxrv-daterange-cell-text" }, item.text),
+        React.createElement("div", { className: data.inRange(item.date) ? 'dxd-back-accented' : '' })));
+    return (React.createElement(DxCalendar, { tabIndex: 0, className: "dx-accessibility-calendar-item dx-accessibility-daterange-item", min: data.min, value: data.value, cellComponent: cellTemplate, height: data.height, onValueChanged: data.onValueChanged }));
+};
+export default Calendar;

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

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

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IDateRangeEditorOptions } from 'devexpress-reporting/viewer/widgets/dateRange/dateRangeEditor';
+declare const DateRangeWrapper: React.FC<{
+    data: IDateRangeEditorOptions;
+}>;
+export default DateRangeWrapper;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import Template from '../../../../core/Template';
+import useDxForceRerender from '../../../../../hooks/dxForceRerender';
+import { createDateRangeEditor } from 'devexpress-reporting/viewer/widgets/dateRange/dateRangeEditor';
+import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
+import useDxEllipsisEditor from '../../../../../hooks/dxEllipsisEditor';
+const DateRangeWrapper = ({ data }) => {
+    const dateRangeEditorRef = React.useRef();
+    const [viewModel, setViewModel] = React.useState();
+    const forceRerender = useDxForceRerender();
+    data.visibilityChanged = forceRerender;
+    React.useEffect(() => {
+        const editor = createDateRangeEditor(data, dateRangeEditorRef.current, data);
+        const vm = editor.getViewModel();
+        const subscription = vm._viewModelEvents.on(ViewModelChangedEvent, forceRerender);
+        vm.cacheElement(dateRangeEditorRef.current);
+        setViewModel(vm);
+        return () => {
+            subscription && subscription();
+            editor === null || editor === void 0 ? void 0 : editor.dispose();
+        };
+    }, []);
+    return (React.createElement("div", { ref: dateRangeEditorRef, className: "dxrv-daterange-editor" }, viewModel && React.createElement(DateRange, { viewModel: viewModel })));
+};
+const DateRange = ({ viewModel }) => {
+    const forceRerender = useDxForceRerender();
+    const processClickEvent = () => {
+        viewModel.showPopup();
+        forceRerender();
+    };
+    const ellipsisEditorRef = useDxEllipsisEditor({
+        buttonAction: processClickEvent,
+        value: viewModel.displayValue,
+        readOnly: true,
+        openOnFieldClick: true,
+        inputAttr: { 'aria-label': viewModel._displayName, id: viewModel._editorInputId }
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: ellipsisEditorRef }),
+        React.createElement(Template, { template: viewModel.popupTemplate, data: viewModel.popupModel })));
+};
+export default DateRangeWrapper;

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import Button from 'devextreme-react/button';
+import SelectBox from 'devextreme-react/select-box';
+import Template from '../../../../core/Template';
+import useDxForceRerender from '../../../../../hooks/dxForceRerender';
+import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
+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 (React.createElement("div", { className: "dxrv-preview-date-range-mobile" },
+        React.createElement("div", { className: "dx-fieldset" },
+            React.createElement("div", { className: "dx-field" },
+                React.createElement(SelectBox, { dataSource: data.items, displayExpr: "displayName", onValueChanged: data.popupModel.onTextChanged, placeholder: data.popupModel.selectPeriodPlaceholder, useItemTextAsTitle: true })),
+            React.createElement("div", { className: "dx-field" },
+                React.createElement("div", { className: "dx-fieldset-column" },
+                    React.createElement("div", { className: "dx-fieldset-header" }, data.popupModel.fromText),
+                    React.createElement(Button, { className: `dxrv-daterange-editor-button ${data.popupModel.startButton.focused ? 'dx-button-default' : ''}`, text: data.popupModel.startButton.text, stylingMode: data.popupModel.startButton.stylingMode, focusStateEnabled: data.popupModel.startButton.focusStateEnabled, activeStateEnabled: data.popupModel.startButton.activeStateEnabled, onClick: data.popupModel.startButton.onClick })),
+                React.createElement("div", { className: "dx-fieldset-column dx-fieldset-column-right" },
+                    React.createElement("div", { className: "dx-fieldset-header" }, data.popupModel.untilText),
+                    React.createElement("div", { className: "dxd-back-secondary dx-fieldset-column-separator" }),
+                    React.createElement(Button, { className: `dxrv-daterange-editor-button ${data.popupModel.endButton.focused ? 'dx-button-default' : ''}`, text: data.popupModel.endButton.text, stylingMode: data.popupModel.endButton.stylingMode, focusStateEnabled: data.popupModel.endButton.focusStateEnabled, activeStateEnabled: data.popupModel.endButton.activeStateEnabled, onClick: data.popupModel.endButton.onClick }))),
+            React.createElement("div", { className: "dx-field" },
+                React.createElement("div", { className: "dxrv-daterange-editor-item" },
+                    data.popupModel.startButton.focused && React.createElement(Template, { template: "dxrv-daterange-calendar", data: data.startRange }),
+                    data.popupModel.endButton.focused && React.createElement(Template, { template: "dxrv-daterange-calendar", data: data.endRange }))))));
+};
+export default DateRangeMobile;

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

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

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IDateRangeEditorViewModel } from 'devexpress-reporting/viewer/widgets/dateRange/dateRangeEditor.viewmodel';
+declare const DateRangePopupContainer: React.FC<{
+    data: IDateRangeEditorViewModel;
+}>;
+export default DateRangePopupContainer;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import Popup from 'devextreme-react/popup';
+import { ScrollView } from 'devextreme-react/scroll-view';
+import Template from '../../../../core/Template';
+import { calculateWithZoomFactor } from '@devexpress/analytics-core/accessibility/_internal';
+import useDxAction from '../../../../../hooks/dxAction';
+import useDxMutationObserver from '../../../../../hooks/dxMutationObserver';
+const PredefinedItem = ({ item }) => {
+    const ref = React.useRef();
+    useDxAction(ref, item.click, undefined);
+    return (React.createElement("div", { role: "option", ref: ref, "aria-selected": item.selected, className: `dxrv-daterange-editor-list-item dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented ${item.selected ? 'dxd-state-selected' : ''}` },
+        React.createElement("div", { className: "dx-accessibility-field-background dxd-back-accented" }),
+        item.displayName));
+};
+const DateRangePopupContainer = ({ data }) => {
+    const ref = React.useRef();
+    useDxMutationObserver(ref, data.dialogKeyboardHelper);
+    const popupOptions = data.getPopupSettings();
+    popupOptions.height = calculateWithZoomFactor(362);
+    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();
+    }, []);
+    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("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" },
+                    React.createElement("div", { className: "dx-accessibility-container-background dxd-back-accented" }),
+                    React.createElement(Template, { template: "dxrv-daterange-calendar", data: data.startRange })),
+                React.createElement("div", { className: "dxrv-daterange-editor-item" },
+                    React.createElement("div", { className: "dx-accessibility-container-background dxd-back-accented" }),
+                    React.createElement(Template, { template: "dxrv-daterange-calendar", data: data.endRange }))))));
+};
+export default DateRangePopupContainer;

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

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

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

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

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

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

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import Template from '../../../../core/Template';
+import LazyTemplate from '../../../../core/LazyTemplate';
+import useDxAccordion from '../../../../../hooks/dxAccordion';
+const EditorLabel = ({ data }) => {
+    const cssClasses = ['dx-field-label', 'dxrd-group-label', 'dx-accordion-header', 'dxd-text-primary'];
+    data.templateName === 'dx-emptyHeader' && cssClasses.push('dx-accordion-empty');
+    data.isGroupLabel && cssClasses.push('dxd-back-secondary');
+    data.alwaysShow && cssClasses.push('dx-accordion-hide-collapsing-image');
+    return (React.createElement("div", { className: cssClasses.join(' '), style: { paddingLeft: data.padding['padding-left'] + 'px' } },
+        data.isComplexEditor &&
+            //<div disabled={data.templateName !== 'dx-emptyHeader'}>
+            React.createElement("div", null,
+                !data.alwaysShow && React.createElement(Template, { template: "dxrd-svg-collapsed", className: `dx-collapsing-image  dxrd-display-inline-block ${!data.collapsed ? 'dx-image-expanded' : ''}` }),
+                React.createElement("div", { className: "dx-group-header-font", title: data.displayName, "data-bind": data.textToSearch ? 'searchHighlighting: { text: displayName, textToSearch: textToSearch }' : undefined }, !data.textToSearch && data.displayName)),
+        !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');
+    const isResolved = (newVal) => data.setIsRendered(newVal);
+    return (React.createElement("div", { className: "dx-editor", hidden: !data.visible },
+        React.createElement("div", { className: "dx-group", ref: accordionRef },
+            React.createElement("div", { className: `dx-editor-header ${data.hideEditorHeader ? 'dxrd-empty-header' : ''}` }, !data.hideEditorHeader &&
+                React.createElement("div", { className: treeItemCssClasses.join(' '), role: "treeitem", id: data.isComplexEditor ? data.headerId : undefined, "aria-owns": data.isComplexEditor && data.contentId, "aria-expanded": data.isComplexEditor && (data.alwaysShow || !data.collapsed ? true : false) },
+                    React.createElement(EditorLabel, { data: data }),
+                    React.createElement("div", { className: `dx-field-value ${data.isPropertyHighlighted ? 'dxd-border-accented' : ''}` }, data.templateName !== 'dx-emptyHeader' && React.createElement(LazyTemplate, { isResolved: isResolved, template: data.templateName, data: data })))),
+            data.isComplexEditor &&
+                React.createElement("div", { className: "dx-editor-content dx-accordion-content", role: "group", id: data.contentId, "aria-labelledby": data.headerId, "aria-hidden": !data.alwaysShow && data.collapsed ? true : false }, data.editorCreated && React.createElement(Template, { template: data.contentTemplateName, data: data })))));
+};
+export default PropertyEditor;

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import Template from '../../../../core/Template';
+const EditorContent = ({ data }) => {
+    if (!data.visible)
+        return null;
+    const cssClasses = ['dxrd-parameters-group'];
+    !data.hideBorder && cssClasses.push('dxrd-parameters-border');
+    data.showHorizontally && cssClasses.push('dxrd-parameters-horizontal');
+    return (React.createElement("div", { className: cssClasses.join(' ') },
+        React.createElement(Template, { template: "dxrd-propertieseditor", data: data })));
+};
+export default EditorContent;

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import Template from '../../../../core/Template';
+const GroupEditor = ({ data }) => {
+    const getCorrectLayoutClass = (editor) => {
+        return editor.editorTemplate !== 'dxrd-parameters-separator' ?
+            'dx-fill-available' : 'dx-display-content';
+    };
+    return (React.createElement("div", { className: data.viewmodel.rtl ? 'dx-rtl' : '' },
+        React.createElement("div", { className: "dx-editors" },
+            React.createElement("div", { className: "dx-fieldset dxrd-parameters-fieldset dxd-border-primary", style: { display: data.showHorizontally ? 'flex' : 'block' } }, data.viewmodel.editors.map(editor => (React.createElement(Template, { key: editor.editorInputId, className: getCorrectLayoutClass(editor), template: editor.editorTemplate, data: editor })))))));
+};
+export default GroupEditor;

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

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

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

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

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

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