Merge branch '25_1' into update-chrome-v133-25_1

apps/demos/testing/common.test.js

@@ -210,6 +210,9 @@ const SKIPPED_TESTS = {
     ],
   },
   Vue: {
+    Accordion: [
+      { demo: 'Overview', themes: [THEME.generic, THEME.material, THEME.fluent] },
+    ],
     Charts: [
       { demo: 'TilingAlgorithms', themes: [THEME.material] },
       { demo: 'ExportAndPrintingAPI', themes: [THEME.material] },

apps/demos/testing/widgets/accordion/Accordion.test.js

@@ -12,7 +12,7 @@ fixture('Accordion.Overview')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Accordion', 'Overview', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
+runManualTest('Accordion', 'Overview', ['jQuery', 'React', 'Angular'], (test) => { // , 'Vue'
   test('Custom Overview Appearance', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 

apps/react-storybook/stories/menu/Menu.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Menu, MenuTypes } from 'devextreme-react/menu';
+import type { Meta, StoryObj } from '@storybook/react';
+import { menuItems } from './data';
+
+const meta: Meta<typeof Menu> = {
+    title: 'Components/Menu',
+    component: Menu,
+    parameters: {
+        layout: 'fullscreen',
+    }
+};
+
+type Story = StoryObj<typeof Menu>;
+
+const showSubmenuModes= ['onClick', 'onHover'] as const;
+const submenuDirectionOptions = ['auto', 'leftOrTop', 'rightOrBottom'] as const;
+
+const commonArgs: Story['args'] = {
+    showFirstSubmenuMode: showSubmenuModes[0],
+    submenuDirection: submenuDirectionOptions[0],
+    hideSubmenuOnMouseLeave: false,
+    adaptivityEnabled: false,
+};
+
+const argTypes = {
+    showFirstSubmenuMode: {
+        control: 'select',
+        options: showSubmenuModes,
+    },
+    submenuDirection: {
+        control: 'select',
+        options: submenuDirectionOptions,
+    },
+    hideSubmenuOnMouseLeave: {
+        control: 'boolean',
+    },
+    adaptivityEnabled: {
+        control: 'boolean',
+    },
+};
+
+export default meta;
+
+const createMenuStory = (orientation: MenuTypes.Orientation): Story => ({
+    args: { ...commonArgs, orientation },
+    argTypes,
+    render: (args) => <Menu dataSource={menuItems} {...args} />,
+});
+
+export const Horizontal: Story = createMenuStory('horizontal');
+export const Vertical: Story = createMenuStory('vertical');

apps/react-storybook/stories/menu/data.ts

@@ -0,0 +1,86 @@
+export const menuItems = [{
+    id: '1',
+    text: 'Video Players',
+    items: [{
+        id: '1_1',
+        text: 'HD Video Player',
+        price: 220,
+        icon: 'images/products/1-small.png',
+    }, {
+        id: '1_2',
+        text: 'SuperHD Video Player',
+        icon: 'images/products/2-small.png',
+        price: 270,
+    }],
+}, {
+    id: '2',
+    text: 'Televisions',
+    items: [{
+        id: '2_1',
+        text: 'SuperLCD 42',
+        icon: 'images/products/5-small.png',
+        price: 1200,
+    }, {
+        id: '2_2',
+        text: 'SuperLED 42',
+        icon: 'images/products/5-small.png',
+        price: 1450,
+    }, {
+        id: '2_3',
+        text: 'SuperLED 50',
+        icon: 'images/products/5-small.png',
+        price: 1600,
+    }, {
+        id: '2_4',
+        text: 'SuperLCD 55 (Not available)',
+        icon: 'images/products/5-small.png',
+        price: 1350,
+        disabled: true,
+    }, {
+        id: '2_5',
+        text: 'SuperLCD 70',
+        icon: 'images/products/5-small.png',
+        price: 4000,
+    }],
+}, {
+    id: '3',
+    text: 'Monitors',
+    items: [{
+        id: '3_1',
+        text: '19"',
+        items: [{
+            id: '3_1_1',
+            text: 'DesktopLCD 19',
+            icon: 'images/products/5-small.png',
+            price: 160,
+        }],
+    }, {
+        id: '3_2',
+        text: '21"',
+        items: [{
+            id: '3_2_1',
+            text: 'DesktopLCD 21',
+            icon: 'images/products/5-small.png',
+            price: 170,
+        }, {
+            id: '3_2_2',
+            text: 'DesktopLED 21',
+            icon: 'images/products/5-small.png',
+            price: 175,
+        }],
+    }],
+}, {
+    id: '4',
+    text: 'Projectors',
+    items: [{
+        id: '4_1',
+        text: 'Projector Plus',
+        icon: 'images/products/5-small.png',
+        price: 550,
+    }, {
+        id: '4_2',
+        text: 'Projector PlusHD',
+        icon: 'images/products/5-small.png',
+        price: 750,
+    }],
+}];

packages/devextreme-scss/scss/widgets/fluent/menu/_index.scss

@@ -36,6 +36,7 @@
 
   .dx-menu-vertical {
     .dx-menu-item-popout {
+      margin-inline-start: $fluent-menu-icon-to-text-offset;
       display: flex;
       align-items: center;
       justify-content: center;

packages/devextreme-scss/scss/widgets/material/menu/_index.scss

@@ -39,6 +39,7 @@ $material-menu-font-size: $material-base-font-size;
 
   .dx-menu-vertical {
     .dx-menu-item-popout {
+      margin-inline-start: $material-menu-icon-to-text-offset;
       display: flex;
       align-items: center;
       justify-content: center;

packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts

@@ -14,7 +14,6 @@ import { extend } from '@js/core/utils/extend';
 import Form from '@js/ui/form';
 import { current, isFluent } from '@js/ui/themes';
 import { ExpressionUtils } from '@ts/scheduler/m_expression_utils';
-import { Semaphore } from '@ts/scheduler/r1/semaphore/index';
 
 import { createAppointmentAdapter } from '../m_appointment_adapter';
 import timeZoneUtils from '../m_utils_time_zone';
@@ -63,15 +62,12 @@ export class AppointmentForm {
 
   form: any;
 
-  // TODO: Why we need the "semaphore" in the sync code?
-  //  We should research it and delete it if redundant
-  semaphore: Semaphore;
+  // NOTE: flag to prevent double value set during form updating
+  private isFormUpdating = false;
 
   constructor(scheduler) {
     this.scheduler = scheduler;
     this.form = null;
-
-    this.semaphore = new Semaphore();
   }
 
   get dxForm() {
@@ -194,7 +190,7 @@ export class AppointmentForm {
     const dateEditor = this.form.getEditor(dateExpr);
     const dateValue = dateSerialization.deserializeDate(dateEditor.option('value'));
 
-    if (this.semaphore.isFree() && dateValue && value && isNeedCorrect(dateValue, value)) {
+    if (!this.isFormUpdating && dateValue && value && isNeedCorrect(dateValue, value)) {
       const duration = previousValue ? dateValue.getTime() - previousValue.getTime() : 0;
       dateEditor.option('value', new Date(value.getTime() + duration));
     }
@@ -337,7 +333,7 @@ export class AppointmentForm {
               const endDateEditor = this.form.getEditor(dataExprs.endDateExpr);
               const startDate = dateSerialization.deserializeDate(startDateEditor.option('value'));
 
-              if (this.semaphore.isFree() && startDate) {
+              if (!this.isFormUpdating && startDate) {
                 if (value) {
                   const allDayStartDate = dateUtils.trimTime(startDate);
                   startDateEditor.option('value', new Date(allDayStartDate));
@@ -459,8 +455,7 @@ export class AppointmentForm {
   }
 
   updateFormData(formData) {
-    this.semaphore.take();
-
+    this.isFormUpdating = true;
     this.form.option('formData', formData);
 
     const dataAccessors = this.scheduler.getDataAccessors();
@@ -479,8 +474,7 @@ export class AppointmentForm {
     this.updateRecurrenceEditorStartDate(startDate, expr.recurrenceRuleExpr);
 
     this.setEditorsType(allDay);
-
-    this.semaphore.release();
+    this.isFormUpdating = false;
   }
 
   private createDateBoxEditor(dataField, colSpan, firstDayOfWeek, label, cssClass, onValueChanged) {

packages/devextreme/js/__internal/scheduler/appointments/data_provider/m_appointment_filter.ts

@@ -255,11 +255,6 @@ export class AppointmentFilterBaseStrategy {
     }]];
   }
 
-  // TODO get rid of wrapper
-  _createAppointmentFilter(filterOptions) {
-    return this._createCombinedFilter(filterOptions);
-  }
-
   _filterAppointmentByResources(appointment, resources) {
     const checkAppointmentResourceValues = (resourceName, resourceIndex) => {
       const resourceGetter = this.dataAccessors.resources.getter[resourceName];
@@ -346,7 +341,7 @@ export class AppointmentFilterBaseStrategy {
   }
 
   filterPreparedItems(filterOptions, preparedItems) {
-    const combinedFilter = this._createAppointmentFilter(filterOptions);
+    const combinedFilter = this._createCombinedFilter(filterOptions);
 
     // @ts-expect-error
     return query(preparedItems)
@@ -451,7 +446,7 @@ export class AppointmentFilterVirtualStrategy extends AppointmentFilterBaseStrat
     filterOptions.forEach((option) => {
       combinedFilters.length && combinedFilters.push('or');
 
-      const filter = this._createAppointmentFilter(option);
+      const filter = this._createCombinedFilter(option);
 
       combinedFilters.push(filter);
     });

packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts

@@ -75,7 +75,6 @@ class SchedulerAppointments extends CollectionWidget {
     this._virtualAppointments = {};
   }
 
-  // TODO: remove when Collection moved to TS
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   option(optionName?: string, value?: any) {
     return super.option(...arguments);

packages/devextreme/js/__internal/scheduler/appointments/m_view_model_generator.ts

@@ -34,7 +34,7 @@ export class AppointmentViewModelGenerator {
     this.initRenderingStrategy(options);
 
     const renderingStrategy = this.getRenderingStrategy();
-    const positionMap = renderingStrategy.createTaskPositionMap(appointments); // TODO - appointments are mutated inside!
+    const positionMap = renderingStrategy.createTaskPositionMap(appointments); // appointments are mutated inside!
     const shiftedViewModel = this.postProcess(appointments, positionMap);
     const viewModel = this.unshiftViewModelAppointmentsByViewOffset(shiftedViewModel, viewOffset);
 

packages/devextreme/js/__internal/scheduler/appointments/rendering_strategies/m_strategy_agenda.ts

@@ -193,8 +193,7 @@ class AgendaRenderingStrategy extends BaseRenderingStrategy {
     replaceWrongEndDate(adapter, startDate, endDate, this.cellDuration, this.dataAccessors);
   }
 
-  // TODO: get rid of an extra 'needClearSettings' argument
-  calculateRows(appointments, agendaDuration, currentDate, needClearSettings?) {
+  calculateRows(appointments, agendaDuration, currentDate) {
     this._rows = [];
     currentDate = dateUtils.trimTime(new Date(currentDate));
 
@@ -218,8 +217,6 @@ class AgendaRenderingStrategy extends BaseRenderingStrategy {
 
         this.replaceWrongAppointmentEndDate(appointment, startDate, endDate);
 
-        needClearSettings && delete appointment.settings;
-
         const result = this.instance.getAppointmentsInstance()._processRecurrenceAppointment(appointment, index, false);
         appts.parts = appts.parts.concat(result.parts);
         appts.indexes = appts.indexes.concat(result.indexes);

packages/devextreme/js/__internal/scheduler/m_appointment_adapter.ts

@@ -169,7 +169,7 @@ class AppointmentAdapter {
 
   source(serializeDate = false) {
     if (serializeDate) {
-      // TODO: hack for use dateSerializationFormat
+      // hack for use dateSerializationFormat
       const clonedAdapter = this.clone();
       clonedAdapter.startDate = this.startDate;
       clonedAdapter.endDate = this.endDate;

packages/devextreme/js/__internal/scheduler/m_loading.ts

@@ -29,8 +29,7 @@ export function show(options) {
 }
 
 export function hide() {
-  // todo: hot fix for case without viewport
-
+  // hot fix for case without viewport
   if (!loading) {
     // @ts-expect-error
     return new Deferred().resolve();

packages/devextreme/js/__internal/scheduler/m_recurrence_editor.ts

@@ -36,7 +36,7 @@ const MONTH_OF_YEAR = 'dx-recurrence-selectbox-month-of-year';
 
 const recurrentEditorNumberBoxWidth = 70;
 const recurrentEditorSelectBoxWidth = 120;
-const defaultRecurrenceTypeIndex = 1; // TODO default daily recurrence
+const defaultRecurrenceTypeIndex = 1; // default daily recurrence
 
 const frequenciesMessages = [
   /* {

packages/devextreme/js/__internal/scheduler/m_scheduler.ts

@@ -1525,7 +1525,7 @@ class Scheduler extends Widget<any> {
     this._validateKeyFieldIfAgendaExist();
   }
 
-  _isDataSourceLoaded() { // TODO
+  _isDataSourceLoaded() {
     return this._dataSource && this._dataSource.isLoaded();
   }
 
@@ -1637,17 +1637,13 @@ class Scheduler extends Widget<any> {
     return this._getCurrentViewOption('cellDuration');
   }
 
-  _getCurrentViewType() { // TODO get rid of mapping
-    return this.currentViewType;
-  }
-
   _renderWorkSpace(groups) {
     this._readyToRenderAppointments && this._toggleSmallClass();
     const $workSpace = $('<div>').appendTo(this._mainContainer);
 
     const countConfig = this._getViewCountConfig();
 
-    const workSpaceComponent = VIEWS_CONFIG[this._getCurrentViewType()].workSpace;
+    const workSpaceComponent = VIEWS_CONFIG[this.currentViewType].workSpace;
     const workSpaceConfig = this._workSpaceConfig(groups, countConfig);
     // @ts-expect-error
     this._workSpace = this._createComponent($workSpace, workSpaceComponent, workSpaceConfig);
@@ -2236,7 +2232,7 @@ class Scheduler extends Widget<any> {
   }
 
   /// #DEBUG
-  getAppointmentDetailsForm() { // TODO for tests
+  getAppointmentDetailsForm() { // for tests
     return this._appointmentForm.form;
   }
   /// #ENDDEBUG
@@ -2647,7 +2643,6 @@ class Scheduler extends Widget<any> {
   private validateOptions(): void {
     const currentViewOptions = {
       ...this.option(),
-      // TODO: Check it before 24.1 release
       // NOTE: We override this.option values here
       // because the old validation logic checked only current view options.
       // Changing it and validate all views configuration will be a BC.

packages/devextreme/js/__internal/scheduler/m_subscribes.ts

@@ -126,7 +126,7 @@ const subscribes = {
       this.timeZoneCalculator,
     );
 
-    // TODO pull out time zone converting from appointment adapter for knockout(T947938)
+    // pull out time zone converting from appointment adapter for knockout(T947938)
     const startDate = this.timeZoneCalculator.createDate(targetedAdapter.startDate, { path: 'toGrid' });
     const endDate = this.timeZoneCalculator.createDate(targetedAdapter.endDate, { path: 'toGrid' });
 

packages/devextreme/js/__internal/scheduler/m_utils.ts

@@ -94,7 +94,6 @@ export const utils = {
         component = widget._createComponent(container, componentClass, viewModel);
         widget[componentName] = component;
       } else {
-        // TODO: this is a workaround for setTablesSizes. Remove after CSS refactoring
         const $element = component.$element();
         const elementStyle = $element.get(0).style;
         const { height } = elementStyle;