Scheduler: delete Appointment enhancements

e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/tooltipBehavior.ts

@@ -6,6 +6,7 @@ import dataSource from './init/widget.data';
 import { createScheduler, scroll } from './init/widget.setup';
 import url from '../../../../helpers/getPageUrl';
 import { DEFAULT_BROWSER_SIZE } from '../../../../helpers/const';
+import { Themes } from '../../../../helpers/themes';
 import { testScreenshot } from '../../../../helpers/themeUtils';
 
 fixture.disablePageReloads`Appointment tooltip behavior during scrolling in the Scheduler (T755449)`
@@ -125,6 +126,55 @@ test.meta({ browserSize: [600, 400] })('The tooltip should hide after manually s
   }));
 });
 
+test.meta({
+  browserSize: DEFAULT_BROWSER_SIZE,
+  themes: [Themes.fluentBlue, Themes.genericLight, Themes.materialBlue],
+})('Collector tooltip focused list item screenshot', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const scheduler = new Scheduler('#container');
+  const collector = scheduler.collectors.find('2 more');
+  const { appointmentTooltip } = scheduler;
+
+  await t
+    .expect(collector.element.exists)
+    .ok()
+    .click(collector.element)
+    .expect(appointmentTooltip.isVisible())
+    .ok()
+    .pressKey('tab');
+
+  await testScreenshot(
+    t,
+    takeScreenshot,
+    'collector-tooltip-focused-list-item.png',
+    { element: scheduler.element },
+  );
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxScheduler', {
+  dataSource: [{
+    text: 'Text',
+    startDate: new Date(2017, 4, 22, 9, 30, 0, 0),
+    endDate: new Date(2017, 4, 22, 10, 30, 0, 0),
+  }, {
+    text: 'Text2',
+    startDate: new Date(2017, 4, 22, 9, 30, 0, 0),
+    endDate: new Date(2017, 4, 22, 10, 30, 0, 0),
+  }, {
+    text: 'Text3',
+    startDate: new Date(2017, 4, 22, 9, 30, 0, 0),
+    endDate: new Date(2017, 4, 22, 10, 30, 0, 0),
+  }],
+  views: [{
+    type: 'month',
+    maxAppointmentsPerCell: 1,
+  }],
+  currentView: 'month',
+  currentDate: new Date(2017, 4, 22),
+}));
+
 test.meta({ browserSize: [600, 1000] })('Tooltip on mobile devices should have enough hight if there are async templates (React)', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const scheduler = new Scheduler('#container');

packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss

@@ -22,6 +22,7 @@ $scheduler-fill-focused-appointment: null !default;
 $scheduler-is-shadow-color-for-focused-state: null !default;
 $scheduler-dd-appointment-hover-text-color: null !default;
 $scheduler-tooltip-appointment-text-color: null !default;
+$scheduler-tooltip-list-focused-bg: null !default;
 $scheduler-timeline-cell-height: null !default;
 
 $scheduler-appointment-overlay-bg: null !default;
@@ -47,7 +48,8 @@ $agenda-appointment-recurrence-icon-color: null !default;
 @use "./tooltip" with (
   $scheduler-appointment-base-color: $scheduler-appointment-base-color,
   $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
-  $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg
+  $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
+  $scheduler-tooltip-list-focused-bg: $scheduler-tooltip-list-focused-bg
 );
 
 $scheduler-appointment-min-size: 4px;

packages/devextreme-scss/scss/widgets/base/scheduler/_tooltip.scss

@@ -3,6 +3,7 @@
 $scheduler-appointment-base-color: null !default;
 $scheduler-tooltip-appointment-text-color: null !default;
 $scheduler-appointment-overlay-bg: null !default;
+$scheduler-tooltip-list-focused-bg: null !default;
 
 .dx-popup-wrapper.dx-scheduler-appointment-tooltip-wrapper,
 .dx-scheduler-overlay-panel {
@@ -15,6 +16,10 @@ $scheduler-appointment-overlay-bg: null !default;
       .dx-list-item-content {
         padding: 5px;
       }
+
+      &.dx-state-focused {
+        background-color: $scheduler-tooltip-list-focused-bg;
+      }
     }
   }
 

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

@@ -4,6 +4,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../list/colors" as *;
 @use "../form/sizes" as *;
 @use "../radioGroup/sizes" as *;
 @use "../toolbar/sizes" as *;
@@ -13,6 +14,7 @@
 @use "../../base/scheduler" as baseScheduler with (
   $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
   $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
+  $scheduler-tooltip-list-focused-bg: $list-item-hover-bg,
   $scheduler-appointment-base-color: $scheduler-appointment-base-color,
   $scheduler-appointment-start-color: $scheduler-appointment-start-color,
   $scheduler-appointment-active-color: $scheduler-appointment-active-color,

packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss

@@ -4,13 +4,15 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../list/colors" as *;
 @use "../toolbar/sizes" as *;
 @use '../../base/scheduler/layout/header' as *;
 @use "../../base/mixins" as *;
 @use "../../base/icon_fonts" as *;
 @use "../../base/scheduler" as baseScheduler with (
   $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
   $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
+  $scheduler-tooltip-list-focused-bg: $list-item-hover-bg,
   $scheduler-appointment-base-color: $scheduler-appointment-base-color,
   $scheduler-appointment-start-color: $scheduler-appointment-start-color,
   $scheduler-base-border-color: $scheduler-base-border-color,

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

@@ -4,6 +4,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../list/colors" as *;
 @use "../radioGroup/sizes" as *;
 @use "../toolbar/sizes" as *;
 @use '../../base/scheduler/layout/header' as *;
@@ -12,6 +13,7 @@
 @use "../../base/scheduler" as baseScheduler with (
   $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
   $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
+  $scheduler-tooltip-list-focused-bg: $list-item-hover-bg,
   $scheduler-appointment-base-color: $scheduler-appointment-base-color,
   $scheduler-appointment-start-color: $scheduler-appointment-start-color,
   $scheduler-base-border-color: $scheduler-base-border-color,

packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/scheduler.ts

@@ -1,5 +1,7 @@
+import $ from '@js/core/renderer';
 import { within } from '@testing-library/dom';
 import { ToolbarModel } from '@ts/scheduler/__tests__/__mock__/model/toolbar';
+import List from '@ts/ui/list/list.edit';
 
 import { APPOINTMENT_POPUP_CLASS } from '../../../appointment_popup/m_popup';
 import { POPUP_DIALOG_CLASS } from '../../../m_scheduler';
@@ -55,6 +57,59 @@ export class SchedulerModel {
     return getTexts(collectors);
   }
 
+  getCollectorButton(index = 0): HTMLElement {
+    const allButtons = this.queries.queryAllByRole('button') as HTMLElement[];
+    const collectors = allButtons.filter((btn) => btn.classList.contains('dx-scheduler-appointment-collector'));
+
+    if (collectors.length === 0) {
+      throw new Error('Collector button not found');
+    }
+
+    return collectors[index];
+  }
+
+  isTooltipVisible(): boolean {
+    return document.querySelector('.dx-overlay-wrapper.dx-scheduler-appointment-tooltip-wrapper') !== null;
+  }
+
+  getTooltipDeleteButton(index = 0): HTMLElement {
+    const buttons = document.querySelectorAll<HTMLElement>('.dx-tooltip-appointment-item-delete-button');
+
+    if (buttons.length === 0) {
+      throw new Error('Tooltip delete button not found');
+    }
+
+    return buttons[index];
+  }
+
+  pressDeleteOnTooltipItem(index = 0): void {
+    const wrapper = document.querySelector('.dx-overlay-wrapper.dx-scheduler-appointment-tooltip-wrapper');
+    const listScrollable = wrapper?.querySelector('.dx-scrollable');
+
+    if (!listScrollable) {
+      throw new Error('Tooltip list not found');
+    }
+
+    const listItems = wrapper?.querySelectorAll<HTMLElement>('.dx-list-item');
+    if (!listItems || listItems?.length === 0) {
+      throw new Error('Tooltip list item not found');
+    }
+
+    const listInstance = List.getInstance($(listScrollable));
+    const targetItem = listItems[index];
+    listInstance.option('focusedElement', $(targetItem));
+
+    const keyEvent = new KeyboardEvent('keydown', {
+      key: 'Delete',
+      bubbles: true,
+    });
+    const keyboardOptions = {
+      keyName: 'del',
+      originalEvent: keyEvent,
+    };
+    listInstance._keyboardHandler(keyboardOptions);
+  }
+
   getDateTableContent(): string[] {
     const cells = this.container.querySelectorAll('.dx-scheduler-date-table-cell');
     return getTexts(cells);

packages/devextreme/js/__internal/scheduler/__tests__/collector_tooltip.test.ts

@@ -0,0 +1,73 @@
+import {
+  afterEach, beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+import fx from '@js/common/core/animation/fx';
+
+import { createScheduler } from './__mock__/create_scheduler';
+import { setupSchedulerTestEnvironment } from './__mock__/m_mock_scheduler';
+
+describe('Collector tooltip behavior', () => {
+  beforeEach(() => {
+    fx.off = true;
+    setupSchedulerTestEnvironment();
+  });
+
+  afterEach(() => {
+    fx.off = false;
+    jest.useRealTimers();
+    document.body.innerHTML = '';
+  });
+
+  it('should delete appointment by Delete key when focused in tooltip from collector', async () => {
+    const { POM } = await createScheduler({
+      dataSource: [
+        {
+          text: 'Apt1',
+          startDate: new Date(2017, 4, 22, 9, 30),
+          endDate: new Date(2017, 4, 22, 10, 30),
+        },
+        {
+          text: 'Apt2',
+          startDate: new Date(2017, 4, 22, 9, 30),
+          endDate: new Date(2017, 4, 22, 10, 30),
+        },
+      ],
+      views: [{ type: 'month', maxAppointmentsPerCell: 1 }],
+      currentView: 'month',
+      currentDate: new Date(2017, 4, 22),
+      height: 600,
+    });
+
+    POM.getCollectorButton().click();
+    POM.pressDeleteOnTooltipItem();
+
+    expect(POM.isTooltipVisible()).toBe(false);
+  });
+
+  it('should not delete disabled appointment by Delete key when focused in tooltip from collector', async () => {
+    const { POM } = await createScheduler({
+      dataSource: [
+        {
+          text: 'Apt1',
+          startDate: new Date(2017, 4, 22, 9, 30),
+          endDate: new Date(2017, 4, 22, 10, 30),
+        },
+        {
+          text: 'Apt2',
+          startDate: new Date(2017, 4, 22, 9, 30),
+          endDate: new Date(2017, 4, 22, 10, 30),
+          disabled: true,
+        },
+      ],
+      views: [{ type: 'month', maxAppointmentsPerCell: 1 }],
+      currentView: 'month',
+      currentDate: new Date(2017, 4, 22),
+      height: 600,
+    });
+
+    POM.getCollectorButton().click();
+    POM.pressDeleteOnTooltipItem();
+
+    expect(POM.isTooltipVisible()).toBe(true);
+  });
+});

packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts

@@ -8,47 +8,47 @@ const APPOINTMENT_TOOLTIP_WRAPPER_CLASS = 'dx-scheduler-appointment-tooltip-wrap
 const MAX_TOOLTIP_HEIGHT = 200;
 
 export class DesktopTooltipStrategy extends TooltipStrategyBase {
-  _prepareBeforeVisibleChanged(dataList) {
+  protected override prepareBeforeVisibleChanged(dataList) {
     this._tooltip.option('position', {
       my: 'bottom',
       at: 'top',
-      boundary: this._getBoundary(dataList),
+      boundary: this.getBoundary(dataList),
       offset: this._extraOptions.offset,
       collision: 'fit flipfit',
     });
   }
 
-  _getBoundary(dataList) {
+  private getBoundary(dataList) {
     return this._options.isAppointmentInAllDayPanel(dataList[0].appointment) ? this._options.container : this._options.getScrollableContainer();
   }
 
-  _onShown() {
-    super._onShown();
+  protected override onShown() {
+    super.onShown();
     if (this._extraOptions.isButtonClick) {
       this._list.focus();
       this._list.option('focusedElement', null);
     }
   }
 
   // @ts-expect-error
-  _createListOption(target, dataList) {
+  protected override createListOption(target, dataList) {
     // @ts-expect-error
-    const result: any = super._createListOption(target, dataList);
+    const result: any = super.createListOption(target, dataList);
     // T724287 this condition is not covered by tests, because touch variable cannot be overridden.
     // In the future, it is necessary to cover the tests
     result.showScrollbar = supportUtils.touch ? 'always' : 'onHover';
     return result;
   }
 
-  _createTooltip(target, dataList) {
-    const tooltipElement = this._createTooltipElement(APPOINTMENT_TOOLTIP_WRAPPER_CLASS);
+  protected override createTooltip(target, dataList) {
+    const tooltipElement = this.createTooltipElement(APPOINTMENT_TOOLTIP_WRAPPER_CLASS);
 
     const tooltip = this._options.createComponent(tooltipElement, Tooltip, {
       target,
       maxHeight: MAX_TOOLTIP_HEIGHT,
       rtlEnabled: this._extraOptions.rtlEnabled,
-      onShown: this._onShown.bind(this),
-      contentTemplate: this._getContentTemplate(dataList),
+      onShown: this.onShown.bind(this),
+      contentTemplate: this.getContentTemplate(dataList),
       wrapperAttr: { class: APPOINTMENT_TOOLTIP_WRAPPER_CLASS },
       _loopFocus: this._extraOptions._loopFocus,
     });
@@ -61,11 +61,11 @@ export class DesktopTooltipStrategy extends TooltipStrategyBase {
     return tooltip;
   }
 
-  _onListRender(e) {
+  protected override onListRender(e) {
     return this._extraOptions.dragBehavior && this._extraOptions.dragBehavior(e);
   }
 
-  _onListItemContextMenu(e) {
+  protected override onListItemContextMenu(e) {
     const contextMenuEventArgs = this._options.createEventArgs(e);
     this._options.onItemContextMenu(contextMenuEventArgs);
   }

packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_mobile_tooltip_strategy.ts

@@ -64,7 +64,7 @@ const createTabletDeviceConfig = (listHeight) => {
 };
 
 export class MobileTooltipStrategy extends TooltipStrategyBase {
-  _shouldUseTarget() {
+  protected override shouldUseTarget() {
     return false;
   }
 
@@ -91,17 +91,17 @@ export class MobileTooltipStrategy extends TooltipStrategyBase {
     this.setTooltipConfig();
   }
 
-  _createTooltip(target, dataList) {
-    const element = this._createTooltipElement(CLASS.slidePanel);
+  protected override createTooltip(target, dataList) {
+    const element = this.createTooltipElement(CLASS.slidePanel);
 
     return this._options.createComponent(element, Overlay, {
       target: getWindow(),
       hideOnOutsideClick: true,
       animation: animationConfig,
 
       onShowing: () => this._onShowing(),
-      onShown: this._onShown.bind(this),
-      contentTemplate: this._getContentTemplate(dataList),
+      onShown: this.onShown.bind(this),
+      contentTemplate: this.getContentTemplate(dataList),
       wrapperAttr: { class: CLASS.slidePanel },
     });
   }