Update to 24.1 beta (DevExpress#367)

* Update to 24.1 beta * Update to 24.1 beta * planning scheduler baseline screenshots * Add new baseline screenshots * Revert "planning scheduler baseline screenshots" This reverts commit 70ba1b5. * Revert "Add new baseline screenshots" This reverts commit 7cae951. * GHA - dev branch - fix module substitution * GHA - dev branch - fix regexp * GHA - dev branch - better regexp * Add new baseline screenshots * Add analytics baseline screenshots --------- Co-authored-by: Rochmar Nicolas (DevExpress) <[email protected]> Co-authored-by: Vasily Strelyaev <[email protected]>
tomodasheesh · May 30, 2024 · 8ccac0e · 8ccac0e
1 parent ee34121
commit 8ccac0e
Show file tree

Hide file tree

Showing 107 changed files with 3,181 additions and 2,349 deletions.
diff --git a/.github/workflows/test-dev-with-latest-dx.yml b/.github/workflows/test-dev-with-latest-dx.yml
@@ -204,9 +204,9 @@ jobs:
           FILE_FRAMEWORK_PATH="$(find devextreme-${{ matrix.ARGS.project }}-npm-latest -maxdepth 1 -name "devextreme-${{ matrix.ARGS.project }}*.tgz" | sed 's|/|\\/|g')"
           FILE_DX_PATH="$(find devextreme-npm-latest/devextreme/ -maxdepth 1 -name "devextreme-*.tgz" | sed 's|/|\\/|g')"
           FILE_DX_DIST_PATH="$(find devextreme-npm-latest/devextreme-dist/ -maxdepth 1 -name "devextreme-dist*.tgz" | sed 's|/|\\/|g')"
-          sed -i "s|\"devextreme\": \"[0-9.]\+\"|\"devextreme\": \"\.\.\/\.\.\/$FILE_DX_PATH\"|g" ./packages/${{ matrix.ARGS.project }}/package.json
-          sed -i "s/\"devextreme-dist\": \"[0-9.]\+\"/\"devextreme-dist\": \"\.\.\/\.\.\/$FILE_DX_DIST_PATH\"/g" ./packages/${{ matrix.ARGS.project }}/package.json
-          sed -i "s|\"devextreme-${{ matrix.ARGS.project }}\": \"[0-9.]\+\"|\"devextreme-${{ matrix.ARGS.project }}\": \"\.\.\/\.\.\/$FILE_FRAMEWORK_PATH\"|g" ./packages/${{ matrix.ARGS.project }}/package.json
+          sed -i "s|\"devextreme\": \"[0-9a-zA-Z.-]\+\"|\"devextreme\": \"\.\/$FILE_DX_PATH\"|g" ./package.json
+          sed -i "s/\"devextreme-dist\": \"[0-9a-zA-Z.-]\+\"/\"devextreme-dist\": \"\.\/$FILE_DX_DIST_PATH\"/g" ./package.json
+          sed -i "s|\"devextreme-${{ matrix.ARGS.project }}\": \"[0-9a-zA-Z.-]\+\"|\"devextreme-${{ matrix.ARGS.project }}\": \"\.\.\/\.\.\/$FILE_FRAMEWORK_PATH\"|g" ./packages/${{ matrix.ARGS.project }}/package.json
 
       - name: Restore npm cache
         uses: actions/cache@v4

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,8 +61,8 @@
     "packages/*"
   ],
   "dependencies": {
-    "devextreme": "23.2-next",
-    "devextreme-dist": "23.2-next"
+    "devextreme": "24.1.2-beta",
+    "devextreme-dist": "24.1.2-beta"
   },
   "pre-commit": [
     "lint-bundles"

diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -20,7 +20,7 @@
     "@angular/platform-browser": "^16.0.0",
     "@angular/platform-browser-dynamic": "^16.0.0",
     "@angular/router": "^16.0.0",
-    "devextreme-angular": "23.2-next",
+    "devextreme-angular": "24.1.2-beta",
     "devextreme-schematics": "^1.2.16",
     "exceljs": "3.10.0",
     "file-saver-es": "2.0.5",
@@ -44,7 +44,7 @@
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "devextreme-cli": "latest",
-    "devextreme-themebuilder": "23.2-next",
+    "devextreme-themebuilder": "24.1.2-beta",
     "eslint": "^8.55.0",
     "jasmine-core": "^4.5.0",
     "karma": "~6.3.0",

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -13,7 +13,7 @@
     "@types/react-dom": "^18.0.5",
     "@types/react-router-dom": "^5.1.5",
     "classnames": "^2.3.1",
-    "devextreme-react": "23.2-next",
+    "devextreme-react": "24.1.2-beta",
     "dx-template-gallery-data": "^1.0.0",
     "exceljs": "^4.3.0",
     "file-saver-es": "^2.0.5",
@@ -57,7 +57,7 @@
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "devextreme-cli": "1.3.2",
-    "devextreme-themebuilder": "23.2-next",
+    "devextreme-themebuilder": "24.1.2-beta",
     "eslint": "^8.55.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.0",

diff --git a/...s/react/src/components/library/change-profile-password-form/ChangeProfilePasswordForm.tsx b/...s/react/src/components/library/change-profile-password-form/ChangeProfilePasswordForm.tsx
@@ -3,7 +3,7 @@ import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react'
 import notify from 'devextreme/ui/notify';
 import { ValidationRule } from 'devextreme-react/common';
 import Form, { Item, Label } from 'devextreme-react/form';
-import Validator, { ValidatorTypes } from 'devextreme-react/validator';
+import { ValidatorRef, ValidatorTypes } from 'devextreme-react/validator';
 import { FormPopup } from '../../utils/form-popup/FormPopup';
 import { PasswordTextBox } from '../password-text-box/PasswordTextBox';
 
@@ -12,7 +12,7 @@ const saveNewPassword = (): void => {
 };
 
 export const ChangeProfilePasswordForm = ({ visible, setVisible }) => {
-  const confirmField = useRef<Validator>(null);
+  const confirmField = useRef<ValidatorRef>(null);
   const [currentPassword, setCurrentPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
   const [confirmedPassword, setConfirmedPassword] = useState('');
@@ -47,7 +47,7 @@ export const ChangeProfilePasswordForm = ({ visible, setVisible }) => {
   ]);
 
   const checkConfirm = useCallback(() => {
-    confirmField.current?.instance.validate();
+    confirmField.current?.instance().validate();
   }, []);
 
   const onCurrentPasswordValidated = useCallback((e: ValidatorTypes.ValidatedEvent) => {

diff --git a/packages/react/src/components/library/password-text-box/PasswordTextBox.tsx b/packages/react/src/components/library/password-text-box/PasswordTextBox.tsx
@@ -1,7 +1,7 @@
 import React, { useState, forwardRef, useMemo, useCallback } from 'react';
 import TextBox, { Button } from 'devextreme-react/text-box';
 import { ValidationRule, ButtonStyle } from 'devextreme-react/common';
-import Validator, { ValidatorTypes } from 'devextreme-react/validator';
+import { Validator, ValidatorRef, ValidatorTypes } from 'devextreme-react/validator';
 
 interface PasswordTextBoxProps {
   value?: string,
@@ -12,7 +12,7 @@ interface PasswordTextBoxProps {
   onValueValidated?: (e: ValidatorTypes.ValidatedEvent) => void;
 }
 
-export const PasswordTextBox = forwardRef<Validator, PasswordTextBoxProps>(({
+export const PasswordTextBox = forwardRef<ValidatorRef, PasswordTextBoxProps>(({
   value = '',
   onValueChange,
   placeholder,

diff --git a/packages/react/src/components/library/profile-card/ProfileCard.tsx b/packages/react/src/components/library/profile-card/ProfileCard.tsx
@@ -1,6 +1,6 @@
 import './ProfileCard.scss';
 import React, { useRef } from 'react';
-import Form, { Item, Label, ValidationRule as ValidationRuleComponent, FormTypes } from 'devextreme-react/form';
+import { Form, FormRef, Item, Label, ValidationRule as ValidationRuleComponent, FormTypes } from 'devextreme-react/form';
 import { StatusSelectBox } from '../status-select-box/StatusSelectBox';
 import { PicturedItemSelectBox } from '../pictured-item-select-box/PicturedItemSelectBox';
 import { useScreenSize, getSizeQualifier } from '../../../utils/media-query';
@@ -35,9 +35,9 @@ export const ProfileCard = ({
   wrapperCssClass,
 }: React.PropsWithChildren<ProfileCardProps>) => {
   const { isXSmall } = useScreenSize();
-  const formRef = useRef<Form>(null);
+  const formRef = useRef<FormRef>(null);
   const onFieldChange = (fieldName) => (value) => {
-    const isValid = formRef.current?.instance.validate().isValid;
+    const isValid = formRef.current?.instance().validate().isValid;
 
     if (!isValid) {
       return;

diff --git a/packages/react/src/components/library/side-navigation-menu/SideNavigationMenu.tsx b/packages/react/src/components/library/side-navigation-menu/SideNavigationMenu.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useCallback, useMemo } from 'react';
 
-import TreeView from 'devextreme-react/tree-view';
+import { TreeView, TreeViewRef } from 'devextreme-react/tree-view';
 
 import { AppFooter } from '../..';
 import { navigation } from '../../../app-navigation';
@@ -41,7 +41,7 @@ export const SideNavigationMenu = (props: React.PropsWithChildren<SideNavigation
     navigationData: { currentPath },
   } = useNavigation();
 
-  const treeViewRef = useRef<TreeView>(null);
+  const treeViewRef = useRef<TreeViewRef>(null);
   const wrapperRef = useRef();
   const getWrapperRef = useCallback(
     (element) => {
@@ -59,7 +59,7 @@ export const SideNavigationMenu = (props: React.PropsWithChildren<SideNavigation
   );
 
   useEffect(() => {
-    const treeView = treeViewRef.current && treeViewRef.current.instance;
+    const treeView = treeViewRef.current && treeViewRef.current.instance();
     if (!treeView) {
       return;
     }

diff --git a/packages/react/src/components/library/task-list-gantt/TaskListGantt.tsx b/packages/react/src/components/library/task-list-gantt/TaskListGantt.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
-import Gantt, { Tasks, Column, Toolbar, Item, Validation, Editing } from 'devextreme-react/gantt';
+import { Gantt, GanttRef, Tasks, Column, Toolbar, Item, Validation, Editing } from 'devextreme-react/gantt';
 
 import { PlanningProps } from '../../../types/task';
 
 import './TaskListGantt.scss';
 
-export const TaskListGantt = React.forwardRef<Gantt, PlanningProps>(({ dataSource }, ref) => {
+export const TaskListGantt = React.forwardRef<GanttRef, PlanningProps>(({ dataSource }, ref) => {
 /* eslint-disable  @typescript-eslint/no-explicit-any */
   return (
     <div className='gantt'>

diff --git a/packages/react/src/components/library/task-list-grid/TaskListGrid.tsx b/packages/react/src/components/library/task-list-grid/TaskListGrid.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import DataGrid, {
+import {
+  DataGrid, DataGridRef,
   Column, Selection, Sorting, HeaderFilter, DataGridTypes,
   RequiredRule, Paging, Pager, Editing, Scrolling, LoadPanel,
 } from 'devextreme-react/data-grid';
@@ -46,7 +47,7 @@ const editPriorityRender = ({ setValue, value }: GridEdit) => (
   />
 );
 
-export const TaskListGrid = React.forwardRef<DataGrid, PlanningProps>(({ dataSource }, ref) => {
+export const TaskListGrid = React.forwardRef<DataGridRef, PlanningProps>(({ dataSource }, ref) => {
   const [data, setData] = useState<Task[]>();
 
   const navigate = useNavigate();

diff --git a/packages/react/src/components/library/task-list-kanban/TaskListKanban.tsx b/packages/react/src/components/library/task-list-kanban/TaskListKanban.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 
 import ScrollView from 'devextreme-react/scroll-view';
-import Sortable, { SortableTypes } from 'devextreme-react/sortable';
+import { Sortable, SortableRef, SortableTypes } from 'devextreme-react/sortable';
 import Button from 'devextreme-react/button';
 
 import { CardMenu } from '../card-menu/CardMenu';
@@ -68,7 +68,7 @@ const TaskList = ({
   );
 };
 
-export const TaskListKanban = React.forwardRef<Sortable, PlanningProps>(({ dataSource, changePopupVisibility }, ref) => {
+export const TaskListKanban = React.forwardRef<SortableRef, PlanningProps>(({ dataSource, changePopupVisibility }, ref) => {
   const [lists, setLists] = useState<Task[][]>([]);
   const [statuses, setStatuses] = useState(STATUS_ITEMS);
   useEffect(() => {

diff --git a/packages/react/src/components/library/user-panel/UserPanel.tsx b/packages/react/src/components/library/user-panel/UserPanel.tsx
@@ -4,12 +4,12 @@ import { Template } from 'devextreme-react/core/template';
 import { UserMenuSection } from '../user-menu-section/UserMenuSection';
 import type { UserPanelProps } from '../../../types';
 import { useAuth } from '../../../contexts/auth';
-import List from 'devextreme-react/list';
+import { ListRef } from 'devextreme-react/list';
 import './UserPanel.scss';
 
 export const UserPanel = ({ menuMode }: UserPanelProps) => {
   const { user } = useAuth();
-  const listRef = useRef<List>(null);
+  const listRef = useRef<ListRef>(null);
 
   const dropDownButtonAttributes = {
     class: 'user-button'
@@ -21,7 +21,7 @@ export const UserPanel = ({ menuMode }: UserPanelProps) => {
 
   const dropDownButtonContentReady = useCallback(({ component }) => {
     component.registerKeyHandler('downArrow', () => {
-      listRef.current?.instance.focus();
+      listRef.current?.instance().focus();
     });
   }, [listRef]);
 

diff --git a/packages/react/src/components/utils/form-popup/FormPopup.tsx b/packages/react/src/components/utils/form-popup/FormPopup.tsx
@@ -2,7 +2,7 @@ import './FormPopup.scss';
 import React, { useCallback, useRef, PropsWithChildren } from 'react';
 
 import { Popup, ToolbarItem } from 'devextreme-react/popup';
-import ValidationGroup from 'devextreme-react/validation-group';
+import { ValidationGroup, ValidationGroupRef } from 'devextreme-react/validation-group';
 import { useScreenSize } from '../../../utils/media-query';
 import { Button } from 'devextreme-react';
 
@@ -29,10 +29,10 @@ export const FormPopup = ({
   children
 }: PropsWithChildren<PopupProps>) => {
   const { isXSmall } = useScreenSize();
-  const validationGroup = useRef<ValidationGroup>(null);
+  const validationGroup = useRef<ValidationGroupRef>(null);
 
   const close = () => {
-    validationGroup.current?.instance.reset();
+    validationGroup.current?.instance().reset();
     setVisible(false);
   };
 
@@ -41,7 +41,7 @@ export const FormPopup = ({
   }, [close, validationGroup]);
 
   const onSaveClick = useCallback(() => {
-    if (!validationGroup.current?.instance.validate().isValid) return;
+    if (!validationGroup.current?.instance().validate().isValid) return;
 
     onSave && onSave();
     close();

diff --git a/packages/react/src/pages/crm-contact-list/crm-contact-list.tsx b/packages/react/src/pages/crm-contact-list/crm-contact-list.tsx
@@ -6,7 +6,8 @@ import { Workbook } from 'exceljs';
 import './crm-contact-list.scss';
 
 import { getContacts } from 'dx-template-gallery-data';
-import DataGrid, {
+import {
+  DataGrid, DataGridRef,
   Sorting, Selection, HeaderFilter, Scrolling, SearchPanel,
   ColumnChooser, Export, Column, Toolbar, Item, LoadPanel,
   DataGridTypes
@@ -90,7 +91,7 @@ export const CRMContactList = () => {
   const [contactId, setContactId] = useState<number>(0);
   const [popupVisible, setPopupVisible] = useState(false);
   const [formDataDefaults, setFormDataDefaults] = useState({ ...newContact });
-  const gridRef = useRef<DataGrid>(null);
+  const gridRef = useRef<DataGridRef>(null);
 
   let newContactData: Contact;
 
@@ -107,11 +108,11 @@ export const CRMContactList = () => {
 
   const changePanelOpened = useCallback(() => {
     setPanelOpened(!isPanelOpened);
-    gridRef.current?.instance.option('focusedRowIndex', -1);
+    gridRef.current?.instance().option('focusedRowIndex', -1);
   }, [isPanelOpened]);
 
   const changePanelPinned = useCallback(() => {
-    gridRef.current?.instance.updateDimensions();
+    gridRef.current?.instance().updateDimensions();
   }, []);
 
   const onAddContactClick = useCallback(() => {
@@ -128,16 +129,16 @@ export const CRMContactList = () => {
   const filterByStatus = useCallback((e: DropDownButtonTypes.SelectionChangedEvent) => {
     const { item: status }: { item: FilterContactStatus } = e;
     if (status === 'All') {
-      gridRef.current?.instance.clearFilter();
+      gridRef.current?.instance().clearFilter();
     } else {
-      gridRef.current?.instance.filter(['status', '=', status]);
+      gridRef.current?.instance().filter(['status', '=', status]);
     }
 
     setStatus(status);
   }, []);
 
   const refresh = useCallback(() => {
-    gridRef.current?.instance.refresh();
+    gridRef.current?.instance().refresh();
   }, []);
 
   const onDataChanged = useCallback((data) => {

diff --git a/packages/react/src/pages/planning-scheduler/use-scheduler-logic.ts b/packages/react/src/pages/planning-scheduler/use-scheduler-logic.ts
@@ -1,7 +1,7 @@
 import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
 
-import Tooltip from 'devextreme-react/tooltip';
-import Scheduler, { SchedulerTypes } from 'devextreme-react/scheduler';
+import { TooltipRef } from 'devextreme-react/tooltip';
+import { SchedulerRef, SchedulerTypes } from 'devextreme-react/scheduler';
 import DataSource from 'devextreme/data/data_source';
 
 import { getTasksForScheduler } from 'dx-template-gallery-data';
@@ -10,8 +10,8 @@ import { findAllAppointmentsForDay } from './utils';
 
 export const useSchedulerLogic = () => {
   const { isXSmall, isLarge } = useScreenSize();
-  const tooltipRef = useRef<Tooltip>(null);
-  const schedulerRef = useRef<Scheduler>(null);
+  const tooltipRef = useRef<TooltipRef>(null);
+  const schedulerRef = useRef<SchedulerRef>(null);
 
   const [agendaItems, setAgendaItems] = useState<{ startDate: Date }[]>();
   const [currentView, setCurrentView] = useState<SchedulerTypes.ViewType>('workWeek');
@@ -42,7 +42,7 @@ export const useSchedulerLogic = () => {
   const toggleRightPanelOpen = useCallback(() => {
     setRightPanelOpen(!rightPanelOpen);
     if (isLarge) {
-      schedulerRef.current?.instance.repaint();
+      schedulerRef.current?.instance().repaint();
     }
   }, [rightPanelOpen, isLarge]);
 
@@ -57,17 +57,17 @@ export const useSchedulerLogic = () => {
   }, [isXSmall, currentView]);
 
   const showAppointmentCreationForm = useCallback(() => {
-    schedulerRef.current?.instance.showAppointmentPopup();
+    schedulerRef.current?.instance().showAppointmentPopup();
   }, []);
 
   const deleteCurrentAppointment = useCallback(() => {
-    schedulerRef.current?.instance.deleteAppointment(selectedAppointment?.data);
-    tooltipRef.current?.instance.hide();
+    schedulerRef.current?.instance().deleteAppointment(selectedAppointment?.data);
+    tooltipRef.current?.instance().hide();
   }, [selectedAppointment]);
 
   const editCurrentAppointment = useCallback(() => {
-    schedulerRef.current?.instance.showAppointmentPopup(selectedAppointment?.data, false);
-    tooltipRef.current?.instance.hide();
+    schedulerRef.current?.instance().showAppointmentPopup(selectedAppointment?.data, false);
+    tooltipRef.current?.instance().hide();
   }, [selectedAppointment]);
 
   const updateAgenda = useCallback((appointmentData) => {
@@ -102,7 +102,7 @@ export const useSchedulerLogic = () => {
       toggleRightPanelOpen();
     }
     else {
-      tooltipRef.current?.instance.show();
+      tooltipRef.current?.instance().show();
     }
 
   }, [currentView, isXSmall, rightPanelOpen, updateAgenda, toggleRightPanelOpen]);
@@ -119,7 +119,7 @@ export const useSchedulerLogic = () => {
   }, [tasks, selectedAppointment, updateAgenda]);
 
   const setCurrentDate = useCallback((selectedDate: Date)=>{
-    const schedulerInstance = schedulerRef.current?.instance;
+    const schedulerInstance = schedulerRef.current?.instance();
     const startViewDate = schedulerInstance?.getStartViewDate();
     const endViewDate = schedulerInstance?.getEndViewDate();
 
@@ -147,7 +147,7 @@ export const useSchedulerLogic = () => {
   }, [selectedAppointment, updateAgenda]);
 
   const showAppointmentTooltip = useCallback((e) => {
-    schedulerRef.current?.instance.showAppointmentTooltip(e.itemData, e.element);
+    schedulerRef.current?.instance().showAppointmentTooltip(e.itemData, e.element);
   }, []);
 
   const onCellClick = useCallback((e) => {