devexpress-reporting-react 25.1.7 → 25.2.3

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

@@ -4,9 +4,8 @@ import CheckBox from 'devextreme-react/check-box';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import SelectBox from 'devextreme-react/select-box';
 import TextArea from 'devextreme-react/text-area';
-import Popup from 'devextreme-react/popup';
+import Popup, { Position } from 'devextreme-react/popup';
 import Template from '../../core/Template';
-import { Position } from 'devextreme-react/cjs/popup';
 import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
 const AIPanel = ({ data }) => {
     const viewModel = data.model.getViewModel();

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

@@ -13,7 +13,7 @@ const MobilePage = ({ data }) => {
                 backgroundColor: data.color
             }, hidden: !data.pageLoading }, data.loadingText),
         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.activeBricks?.map(brick => React.createElement(Template, { key: brick.indexes, template: "dxrd-page-brick-mobile", data: brick })),
         !data.brickLoading && data.editingFields &&
             data.editingFields.map((editingField, index) => React.createElement(Template, { key: index, template: editingField.template, data: editingField }))));
 };

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import SelectBox from 'devextreme-react/select-box';
+import useDxForceRerender from '../../../../../hooks/dxForceRerender';
+import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
+import { DateBox } from 'devextreme-react';
+const TimeRangeMobile = ({ data }) => {
+    const forceRerender = useDxForceRerender();
+    React.useEffect(() => {
+        const eventHolder = data.popupModel;
+        return eventHolder._viewModelEvents?.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(DateBox, { type: "time", value: data.startRange.value, onValueChanged: (e) => data.startRange.onValueChanged(e), className: "dx-accessibility-timerange-item dxrv-timerange-picker-input-start" })),
+                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(DateBox, { type: "time", value: data.endRange.value, onValueChanged: (e) => data.endRange.onValueChanged(e), className: "dx-accessibility-timerange-item dxrv-timerange-picker-input-start" }))))));
+};
+export default TimeRangeMobile;

package/dx-report-viewer/components/reporting/ParametersPanel/DateRange/PopupContainer/{PopupContainer.js → DatePopupContainer.js}

@@ -2,7 +2,6 @@ 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 }) => {
@@ -15,20 +14,19 @@ const PredefinedItem = ({ item }) => {
 const DateRangePopupContainer = ({ data }) => {
     const ref = React.useRef();
     useDxMutationObserver(ref, data.dialogKeyboardHelper);
-    const popupOptions = data.getPopupSettings();
-    popupOptions.height = calculateWithZoomFactor(362);
+    const popupOptions = data.getPopupSettings(false);
     const scrollViewRef = React.useRef();
-    const predefinedRangesRef = React.useRef();
+    const predefinedDateRangesRef = React.useRef();
     React.useEffect(() => {
-        predefinedRangesRef.current = scrollViewRef.current?.instance().element();
+        predefinedDateRangesRef.current = scrollViewRef.current?.instance().element();
     }, [scrollViewRef.current]);
-    useDxMutationObserver(predefinedRangesRef, data.predefinedRanges.accessibilityKeyboardHelper);
+    useDxMutationObserver(predefinedDateRangesRef, data.predefinedDateRanges.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, ref: scrollViewRef },
+                React.createElement(ScrollView, { className: "dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item", elementAttr: { role: 'listbox' }, showScrollbar: data.predefinedDateRanges.scrollViewOptions.showScrollbar, scrollByContent: data.predefinedDateRanges.scrollViewOptions.scrollByContent, bounceEnabled: data.predefinedDateRanges.scrollViewOptions.bounceEnabled, useNative: data.predefinedDateRanges.scrollViewOptions.useNative, scrollByThumb: data.predefinedDateRanges.scrollViewOptions.scrollByThumb, onInitialized: data.predefinedDateRanges.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 }))),
+                    data.predefinedDateRanges.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 })),

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

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

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import Popup from 'devextreme-react/popup';
+import useDxMutationObserver from '../../../../../hooks/dxMutationObserver';
+import Box, { Item } from 'devextreme-react/box';
+import { calculateWithZoomFactor, getLocalization } from '@devexpress/analytics-core/analytics-internal-native';
+import { DateBox } from 'devextreme-react';
+const TimeRangePopupContainer = ({ data }) => {
+    const ref = React.useRef();
+    useDxMutationObserver(ref, data.dialogKeyboardHelper);
+    const popupOptions = data.getPopupSettings(true);
+    popupOptions.height = calculateWithZoomFactor(255);
+    function extendItem(event, group) {
+        const item = group[event.itemIndex];
+        if (item) {
+            event.itemData['click'] = item.click;
+            event.itemData['id'] = item.id;
+        }
+        return event;
+    }
+    function onRangeItemClick(event, group) {
+        data.onRangeItemClick(extendItem(event, group));
+    }
+    function onRangeItemsRendered(event, group) {
+        data.onRangeItemsRendered(extendItem(event, group));
+    }
+    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, "aria-modal": "true" },
+        React.createElement("div", { className: "dxrv-timerange-editor-popup-content", ref: ref },
+            data.predefinedDateRanges?.groupedItems?.map((group, groupIndex) => (React.createElement("div", { className: "dxrv-timerange-editor-popup-container", key: `group-${groupIndex}` },
+                React.createElement(Box, { width: "450px", height: 25, direction: "row", items: group.map(item => { return { ratio: 1, template: item.template }; }), onItemClick: (e) => onRangeItemClick(e, group), onItemRendered: (e) => onRangeItemsRendered(e, group) })))),
+            React.createElement(Box, { direction: "row", width: "450px", height: 30, className: "dxrv-timerange-picker-container" },
+                React.createElement(Item, { ratio: 1 },
+                    React.createElement("div", { className: "dxrv-timerange-editor-popup-picker" },
+                        React.createElement("span", null,
+                            " ",
+                            getLocalization('Start', 'PreviewStringId.RangeParameters_Start')),
+                        React.createElement(DateBox, { type: "time", value: data.startRange.value, onValueChanged: (e) => data.startRange.onValueChanged(e), className: "dx-accessibility-timerange-item dxrv-timerange-picker-input-start" }))),
+                React.createElement(Item, { ratio: 1 },
+                    React.createElement("div", { className: "dxrv-timerange-editor-popup-picker" },
+                        React.createElement("span", null,
+                            " ",
+                            getLocalization('End', 'PreviewStringId.RangeParameters_End')),
+                        React.createElement(DateBox, { type: "time", value: data.endRange.value, onValueChanged: (e) => data.endRange.onValueChanged(e), className: "dx-accessibility-timerange-item dxrv-timerange-picker-input-end" })))))));
+};
+export default TimeRangePopupContainer;

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

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

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

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

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

@@ -14,7 +14,7 @@ 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.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

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

@@ -7,8 +7,7 @@ import useDxLazyImages from '../../../../hooks/dxLazyImages';
 import useDxToView from '../../../../hooks/dxToView';
 import useDxTextCopier from '../../../../hooks/dxTextCopier';
 import Button from 'devextreme-react/button';
-import Popup from 'devextreme-react/popup';
-import { Position } from 'devextreme-react/cjs/popup';
+import Popup, { Position } from 'devextreme-react/popup';
 const MultiPageHolder = ({ lazyImagesOptions, pages }) => {
     const lazyImagesRef = React.useRef();
     useDxLazyImages(lazyImagesRef, lazyImagesOptions);

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

@@ -51,6 +51,8 @@ import MobileActionsExport from './Mobile/Actions/MobileActionsExport';
 import MobileParametersPopup from './Mobile/Parameters/MobileParametersPopup';
 import MobileParameters from './Mobile/Parameters/MobileParameters';
 import MobileParametersDateRange from './Mobile/Parameters/MobileParametersDateRange';
+import TimeRangePopupContainer from './ParametersPanel/DateRange/PopupContainer/TimePopupContainer';
+import TimeRangeMobile from './ParametersPanel/DateRange/Mobile';
 export const reportingTemplates = {
     'dxrd-preview-pager': Pager,
     'dxrd-zoom-autofit-select-template': Zoom,
@@ -66,6 +68,7 @@ export const reportingTemplates = {
     'dxrd-preview-ai-panel': AIPanel,
     'dxrd-multivalue-editable': MultiValueEditable,
     'dxrv-range-parameter': DateRange,
+    'dxrv-daterange-editor-timeonly-popup': TimeRangePopupContainer,
     'dxrv-daterange-editor-popup': DateRangePopupContainer,
     'dxrv-daterange-calendar': Calendar,
     'dxrdp-surface': Surface,
@@ -102,6 +105,7 @@ export const reportingTemplates = {
     'dxrv-preview-parameters-mobile': MobileParameters,
     'dxrv-range-parameter-mobile': MobileParametersDateRange,
     'dxrv-preview-date-range-mobile': DateRangeMobile,
+    'dxrv-preview-time-range-mobile': TimeRangeMobile,
     'dxrd-menu-export-content': MobileActionsExport,
     'dxrdp-search-mobile': MobileSearch,
     'dxrdp-pages-mobile': MobilePaginator,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devexpress-reporting-react",
-  "version": "25.1.7",
+  "version": "25.2.3",
   "homepage": "https://www.devexpress.com/",
   "bugs": "https://www.devexpress.com/support/",
   "author": "Developer Express Inc.",
@@ -21,13 +21,13 @@
     "@types/prop-types": "15.7.13",
     "@types/react": "^18.0.0 || ^19.0.0",
     "@types/react-dom": "^18.0.0 || ^19.0.0",
-    "devextreme-react": "25.1.7",
+    "devextreme-react": "25.2.3",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@devexpress/analytics-core": "25.1.7",
-    "devexpress-reporting": "25.1.7"
+    "devexpress-reporting": "25.2.3",
+    "@devexpress/analytics-core": "25.2.3"
   },
-  "commitSHA": "cabf3ed6d55dded163f9e1cb8a62c415e70a17a4",
+  "commitSHA": "3e020449bb3873a595400e9e33460de1965cf2ea",
   "scripts": {
     "build": "echo done"
   }