Scheduler: fix ts issues in demos in strict mode (cherry-pick)

apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Employee } from './data';
+import type { Employee } from './data';
 
 interface EmployeeCardProps {
   employee: Employee;

apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import EmployeeCard from './EmployeeCard.tsx';
-import { Employee } from './data';
+import type { Employee } from './data';
 
 interface EmployeeGalleryProps {
   employees: Employee[];

apps/demos/Demos/Scheduler/AllDayPanelMode/React/App.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useState } from 'react';
-import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
-import RadioGroup, { type RadioGroupTypes } from 'devextreme-react/radio-group';
+import Scheduler from 'devextreme-react/scheduler';
+import RadioGroup from 'devextreme-react/radio-group';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { RadioGroupTypes } from 'devextreme-react/radio-group';
 import { data } from './data.ts';
 
 const currentDate = new Date(2021, 2, 28);

apps/demos/Demos/Scheduler/AppointmentCountPerCell/React/App.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import Scheduler, { Resource, type SchedulerTypes } from 'devextreme-react/scheduler';
+import Scheduler, { Resource } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 import { data, resourcesData } from './data.ts';
 

apps/demos/Demos/Scheduler/BasicViews/React/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
+import Scheduler from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 import { data } from './data.ts';
 

apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx

@@ -37,7 +37,8 @@ const notifyDisableDate = () => {
 };
 
 const onContentReady = (e: SchedulerTypes.ContentReadyEvent) => {
-  setComponentAria(e.component?.$element());
+  const element = e.component?.element();
+  element && setComponentAria(element);
 };
 
 const applyDisableDatesToDateEditors = (form: ReturnType<FormRef['instance']>) => {
@@ -75,11 +76,11 @@ const onAppointmentUpdating = (e: SchedulerTypes.AppointmentUpdatingEvent) => {
   }
 };
 
-const setComponentAria = (element) => {
-  const prevAria = element?.attr('aria-label') || '';
+const setComponentAria = (element: HTMLElement) => {
+  const prevAria = element.getAttribute('aria-label') || '';
   const description = ariaDescription();
   const nextAria = `${prevAria}${description ? ` ${description}` : ''}`;
-  element?.attr('aria-label', nextAria);
+  element.setAttribute('aria-label', nextAria);
 };
 
 const App = () => {

apps/demos/Demos/Scheduler/CellTemplates/React/DateCell.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 import Utils from './utils.ts';
 
 interface DateCellProps {

apps/demos/Demos/Scheduler/CellTemplates/React/TimeCell.tsx

@@ -12,7 +12,7 @@ const TimeCell = (props: TimeCellProps) => {
   const hasCoffeeCupIcon = Utils.hasCoffeeCupIcon(date);
 
   return (
-    <div className={isDinner ? 'dinner' : null}>
+    <div className={isDinner ? 'dinner' : undefined}>
       {text}
       {hasCoffeeCupIcon && <div className='cafe' />}
     </div>

apps/demos/Demos/Scheduler/CellTemplates/React/utils.ts

@@ -29,9 +29,9 @@ export default class Utils {
   }
 
   static isValidAppointment(component: SchedulerTypes.AppointmentAddingEvent['component'], appointmentData: SchedulerTypes.AppointmentAddingEvent['appointmentData']) {
-    const startDate = new Date(appointmentData.startDate);
-    const endDate = new Date(appointmentData.endDate);
-    const cellDuration = component.option('cellDuration');
+    const startDate = appointmentData.startDate ? new Date(appointmentData.startDate) : new Date();
+    const endDate = appointmentData.endDate ? new Date(appointmentData.endDate) : new Date();
+    const cellDuration = Number(component.option('cellDuration'));
     return Utils.isValidAppointmentInterval(startDate, endDate, cellDuration);
   }
 

apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js

@@ -37,7 +37,8 @@ const notifyDisableDate = () => {
   );
 };
 const onContentReady = (e) => {
-  setComponentAria(e.component?.$element());
+  const element = e.component?.element();
+  element && setComponentAria(element);
 };
 const applyDisableDatesToDateEditors = (form) => {
   const startDateEditor = form.getEditor('startDate');
@@ -70,10 +71,10 @@ const onAppointmentUpdating = (e) => {
   }
 };
 const setComponentAria = (element) => {
-  const prevAria = element?.attr('aria-label') || '';
+  const prevAria = element.getAttribute('aria-label') || '';
   const description = ariaDescription();
   const nextAria = `${prevAria}${description ? ` ${description}` : ''}`;
-  element?.attr('aria-label', nextAria);
+  element.setAttribute('aria-label', nextAria);
 };
 const App = () => {
   const [currentView, setCurrentView] = useState(views[0]);

apps/demos/Demos/Scheduler/CellTemplates/ReactJs/TimeCell.js

@@ -6,7 +6,7 @@ const TimeCell = (props) => {
   const isDinner = Utils.isDinner(date);
   const hasCoffeeCupIcon = Utils.hasCoffeeCupIcon(date);
   return (
-    <div className={isDinner ? 'dinner' : null}>
+    <div className={isDinner ? 'dinner' : undefined}>
       {text}
       {hasCoffeeCupIcon && <div className="cafe" />}
     </div>

apps/demos/Demos/Scheduler/CellTemplates/ReactJs/utils.js

@@ -27,9 +27,9 @@ export default class Utils {
   }
 
   static isValidAppointment(component, appointmentData) {
-    const startDate = new Date(appointmentData.startDate);
-    const endDate = new Date(appointmentData.endDate);
-    const cellDuration = component.option('cellDuration');
+    const startDate = appointmentData.startDate ? new Date(appointmentData.startDate) : new Date();
+    const endDate = appointmentData.endDate ? new Date(appointmentData.endDate) : new Date();
+    const cellDuration = Number(component.option('cellDuration'));
     return Utils.isValidAppointmentInterval(startDate, endDate, cellDuration);
   }
 

apps/demos/Demos/Scheduler/CellTemplates/Vue/utils.ts

@@ -1,4 +1,4 @@
-import { type DxScheduler } from 'devextreme-vue';
+import type { DxScheduler } from 'devextreme-vue';
 import { dinnerTime, holidays } from './data.ts';
 
 export default class Utils {

apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { type DxContextMenuTypes } from 'devextreme-angular/ui/context-menu';
+import type { DxContextMenuTypes } from 'devextreme-angular/ui/context-menu';
 
 export interface Appointment {
   text: string;

apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx

@@ -15,7 +15,7 @@ const appointmentClassName = '.dx-scheduler-appointment';
 const cellClassName = '.dx-scheduler-date-table-cell';
 
 const onContextMenuItemClick = (e: ContextMenuTypes.ItemClickEvent<ContextMenuItem>) => {
-  e.itemData.onItemClick?.(e);
+  e.itemData?.onItemClick?.(e);
 };
 
 const App = () => {
@@ -35,7 +35,7 @@ const App = () => {
       ...item,
       onItemClick: (e: ContextMenuTypes.ItemClickEvent<ContextMenuItem>) => scheduler?.updateAppointment(appointmentData, {
         ...appointmentData,
-        ...{ roomId: [e.itemData.id] },
+        ...{ roomId: [e.itemData?.id] },
       }),
     }));
 

apps/demos/Demos/Scheduler/ContextMenu/React/types.ts

@@ -1,5 +1,5 @@
 import type { SchedulerTypes } from 'devextreme-react/scheduler';
-import { type ContextMenuTypes } from 'devextreme-react/context-menu';
+import type { ContextMenuTypes } from 'devextreme-react/context-menu';
 
 export type Appointment = SchedulerTypes.Appointment & { roomId: number[] };
 

apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js

@@ -8,7 +8,7 @@ const views = ['day', 'month'];
 const appointmentClassName = '.dx-scheduler-appointment';
 const cellClassName = '.dx-scheduler-date-table-cell';
 const onContextMenuItemClick = (e) => {
-  e.itemData.onItemClick?.(e);
+  e.itemData?.onItemClick?.(e);
 };
 const App = () => {
   const schedulerRef = useRef(null);
@@ -26,7 +26,7 @@ const App = () => {
       onItemClick: (e) =>
         scheduler?.updateAppointment(appointmentData, {
           ...appointmentData,
-          ...{ roomId: [e.itemData.id] },
+          ...{ roomId: [e.itemData?.id] },
         }),
     }));
     setTarget(appointmentClassName);

apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/App.tsx

@@ -1,7 +1,10 @@
 import React, { useCallback, useState } from 'react';
-import Scheduler, { Resource, type SchedulerTypes } from 'devextreme-react/scheduler';
-import { Switch, type SwitchTypes } from 'devextreme-react/switch';
-import { NumberBox, type NumberBoxTypes } from 'devextreme-react/number-box';
+import Scheduler, { Resource } from 'devextreme-react/scheduler';
+import { Switch } from 'devextreme-react/switch';
+import { NumberBox } from 'devextreme-react/number-box';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SwitchTypes } from 'devextreme-react/switch';
+import type { NumberBoxTypes } from 'devextreme-react/number-box';
 
 import { data, moviesData } from './data.ts';
 import AppointmentTemplate from './AppointmentTemplate.tsx';

apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/AppointmentTemplate.vue

@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { query as Query } from 'devextreme-vue/common/data';
-import { type DxSchedulerTypes } from 'devextreme-vue/scheduler';
+import type { DxSchedulerTypes } from 'devextreme-vue/scheduler';
 import { moviesData } from './data.ts';
 
 const props = defineProps<{

apps/demos/Demos/Scheduler/CustomViewDuration/React/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
+import Scheduler from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 import { data } from './data.ts';
 

apps/demos/Demos/Scheduler/Editing/React/App.tsx

@@ -13,15 +13,15 @@ const showToast = (event: string, value: string, type: string) => {
 };
 
 const showAddedToast = (e: SchedulerTypes.AppointmentAddedEvent) => {
-  showToast('Added', e.appointmentData.text, 'success');
+  showToast('Added', e.appointmentData.text ?? '', 'success');
 };
 
 const showUpdatedToast = (e: SchedulerTypes.AppointmentUpdatedEvent) => {
-  showToast('Updated', e.appointmentData.text, 'info');
+  showToast('Updated', e.appointmentData.text ?? '', 'info');
 };
 
 const showDeletedToast = (e: SchedulerTypes.AppointmentDeletedEvent) => {
-  showToast('Deleted', e.appointmentData.text, 'warning');
+  showToast('Deleted', e.appointmentData.text ?? '', 'warning');
 };
 
 const App = () => {

apps/demos/Demos/Scheduler/Editing/ReactJs/App.js

@@ -10,13 +10,13 @@ const showToast = (event, value, type) => {
   notify(`${event} "${value}" task`, type, 800);
 };
 const showAddedToast = (e) => {
-  showToast('Added', e.appointmentData.text, 'success');
+  showToast('Added', e.appointmentData.text ?? '', 'success');
 };
 const showUpdatedToast = (e) => {
-  showToast('Updated', e.appointmentData.text, 'info');
+  showToast('Updated', e.appointmentData.text ?? '', 'info');
 };
 const showDeletedToast = (e) => {
-  showToast('Deleted', e.appointmentData.text, 'warning');
+  showToast('Deleted', e.appointmentData.text ?? '', 'warning');
 };
 const App = () => {
   const [allowAdding, setAllowAdding] = useState(true);

apps/demos/Demos/Scheduler/GoogleCalendarIntegration/React/App.tsx

@@ -1,11 +1,13 @@
 import 'whatwg-fetch';
 import React from 'react';
 
-import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
+import Scheduler from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { LoadOptions } from 'devextreme/data';
 
 import { CustomStore } from 'devextreme-react/common/data';
 
-const getData = async (_, requestOptions) => {
+const getData = async (_: LoadOptions, requestOptions: RequestInit & { showDeleted: boolean }) => {
   const GOOGLE_CALENDAR_URL = 'https://www.googleapis.com/calendar/v3/calendars/';
   const CALENDAR_ID = '[email protected]';
   const PUBLIC_KEY = 'AIzaSyBnNAISIUKe6xdhq1_rjor2rxoI3UlMY7k';

apps/demos/Demos/Scheduler/GroupByDate/React/App.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from 'react';
 
-import Switch, { type SwitchTypes } from 'devextreme-react/switch';
+import Switch from 'devextreme-react/switch';
+import type { SwitchTypes } from 'devextreme-react/switch';
 import Scheduler, { Resource, View } from 'devextreme-react/scheduler';
 import { data, priorityData } from './data.ts';
 

apps/demos/Demos/Scheduler/Overview/React/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import Scheduler, { Resource, type SchedulerTypes } from 'devextreme-react/scheduler';
+import Scheduler, { Resource } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 import { employees, data } from './data.ts';
 import DataCell from './DataCell.tsx';

apps/demos/Demos/Scheduler/RecurringAppointments/React/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import Scheduler, { Resource, type SchedulerTypes } from 'devextreme-react/scheduler';
+import Scheduler, { Resource } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 import { data, resourcesData } from './data.ts';
 

apps/demos/Demos/Scheduler/Resources/React/App.tsx

@@ -8,7 +8,8 @@ import Scheduler, {
   type SchedulerTypes,
 } from 'devextreme-react/scheduler';
 
-import RadioGroup, { type RadioGroupTypes } from 'devextreme-react/radio-group';
+import RadioGroup from 'devextreme-react/radio-group';
+import type { RadioGroupTypes } from 'devextreme-react/radio-group';
 
 import {
   data, assignees, rooms, priorities, resourcesList,

apps/demos/Demos/Scheduler/SignalRService/React/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
+import Scheduler from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 import * as AspNetData from 'devextreme-aspnet-data-nojquery';
 

apps/demos/Demos/Scheduler/SimpleArray/React/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
+import Scheduler from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 import { data } from './data.ts';