feat: pass popup options to editing props

Author: sjbur

packages/devextreme-angular/src/ui/scheduler/index.ts

@@ -393,10 +393,10 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
     
      */
     @Input()
-    get editing(): boolean | { allowAdding?: boolean, allowDeleting?: boolean, allowDragging?: boolean, allowResizing?: boolean, allowTimeZoneEditing?: boolean, allowUpdating?: boolean, form?: undefined | { iconsShowMode?: AppointmentFormIconsShowMode, items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>, onCanceled?: ((formData: any) => void), onSaved?: ((formData: any) => void) } } {
+    get editing(): boolean | { allowAdding?: boolean, allowDeleting?: boolean, allowDragging?: boolean, allowResizing?: boolean, allowTimeZoneEditing?: boolean, allowUpdating?: boolean, form?: undefined | { iconsShowMode?: AppointmentFormIconsShowMode, items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>, onCanceled?: ((formData: any) => void), onSaved?: ((formData: any) => void) }, popup?: any } {
         return this._getOption('editing');
     }
-    set editing(value: boolean | { allowAdding?: boolean, allowDeleting?: boolean, allowDragging?: boolean, allowResizing?: boolean, allowTimeZoneEditing?: boolean, allowUpdating?: boolean, form?: undefined | { iconsShowMode?: AppointmentFormIconsShowMode, items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>, onCanceled?: ((formData: any) => void), onSaved?: ((formData: any) => void) } }) {
+    set editing(value: boolean | { allowAdding?: boolean, allowDeleting?: boolean, allowDragging?: boolean, allowResizing?: boolean, allowTimeZoneEditing?: boolean, allowUpdating?: boolean, form?: undefined | { iconsShowMode?: AppointmentFormIconsShowMode, items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>, onCanceled?: ((formData: any) => void), onSaved?: ((formData: any) => void) }, popup?: any }) {
         this._setOption('editing', value);
     }
 
@@ -1202,7 +1202,7 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() editingChange: EventEmitter<boolean | { allowAdding?: boolean, allowDeleting?: boolean, allowDragging?: boolean, allowResizing?: boolean, allowTimeZoneEditing?: boolean, allowUpdating?: boolean, form?: undefined | { iconsShowMode?: AppointmentFormIconsShowMode, items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>, onCanceled?: ((formData: any) => void), onSaved?: ((formData: any) => void) } }>;
+    @Output() editingChange: EventEmitter<boolean | { allowAdding?: boolean, allowDeleting?: boolean, allowDragging?: boolean, allowResizing?: boolean, allowTimeZoneEditing?: boolean, allowUpdating?: boolean, form?: undefined | { iconsShowMode?: AppointmentFormIconsShowMode, items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>, onCanceled?: ((formData: any) => void), onSaved?: ((formData: any) => void) }, popup?: any }>;
 
     /**
     

packages/devextreme-angular/src/ui/scheduler/nested/editing.ts

@@ -89,6 +89,14 @@ export class DxoSchedulerEditingComponent extends NestedOption implements OnDest
         this._setOption('form', value);
     }
 
+    @Input()
+    get popup(): any {
+        return this._getOption('popup');
+    }
+    set popup(value: any) {
+        this._setOption('popup', value);
+    }
+
 
     protected get _optionPath() {
         return 'editing';

packages/devextreme-metadata/make-angular-metadata.ts

@@ -59,6 +59,7 @@ Ng.makeMetadata({
     removeMembers(/\/grids:LoadPanel.indicatorOptions/),
     removeMembers(/\/scheduler:Toolbar/),
     removeMembers(/\/scheduler:dxSchedulerOptions\.editing\.form/),
+    removeMembers(/\/scheduler:dxSchedulerOptions\.editing\.popup/),
     removeMembers(/\/scheduler:dxSchedulerOptions\.resources\.icon/),
     removeMembers(/\/stepper:/),
     removeMembers(/\/speech_to_text:/),

packages/devextreme-react/src/scheduler.ts

@@ -403,6 +403,7 @@ type IEditingProps = React.PropsWithChildren<{
     onCanceled?: ((formData: any) => void);
     onSaved?: ((formData: any) => void);
   };
+  popup?: any;
 }>
 const _componentEditing = (props: IEditingProps) => {
   return React.createElement(NestedOption<IEditingProps>, {

packages/devextreme-vue/src/scheduler.ts

@@ -667,6 +667,7 @@ const DxEditingConfig = {
     "update:allowTimeZoneEditing": null,
     "update:allowUpdating": null,
     "update:form": null,
+    "update:popup": null,
   },
   props: {
     allowAdding: Boolean,
@@ -675,7 +676,8 @@ const DxEditingConfig = {
     allowResizing: Boolean,
     allowTimeZoneEditing: Boolean,
     allowUpdating: Boolean,
-    form: Object as PropType<Record<string, any>>
+    form: Object as PropType<Record<string, any>>,
+    popup: {}
   }
 };
 

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

@@ -93,14 +93,15 @@ export class AppointmentPopup {
   }
 
   _createPopupConfig() {
-    return {
+    const editingConfig = this.scheduler.getEditingConfig();
+    const userPopupOptions = editingConfig?.popup ?? {};
+
+    const defaultPopupConfig = {
       height: 'auto',
       maxHeight: '90%',
       showCloseButton: false,
       showTitle: false,
-      preventScrollEvents: false,
       enableBodyScroll: false,
-      _ignorePreventScrollEventsDeprecation: true,
       onHiding: (): void => {
         this.scheduler.focus();
       },
@@ -115,6 +116,11 @@ export class AppointmentPopup {
       onShowing: (e): void => this._onShowing(e),
       wrapperAttr: { class: APPOINTMENT_POPUP_CLASS },
     };
+
+    return {
+      ...defaultPopupConfig,
+      ...userPopupOptions,
+    };
   }
 
   _onShowing(e) {

packages/devextreme/js/__internal/scheduler/utils/options/constants.ts

@@ -44,6 +44,7 @@ export const DEFAULT_SCHEDULER_OPTIONS: Properties = {
     form: {
       iconsShowMode: DEFAULT_ICONS_SHOW_MODE,
     },
+    popup: {},
   },
   showAllDayPanel: true,
   showCurrentTimeIndicator: true,
@@ -105,6 +106,7 @@ export const DEFAULT_SCHEDULER_INTERNAL_OPTIONS: SchedulerInternalOptions = {
     legacyForm: false,
     // @ts-expect-error copy from default so that you can rewrite it
     ...DEFAULT_SCHEDULER_OPTIONS.editing,
+    popup: {},
   },
   _draggingMode: 'outlook',
   _appointmentTooltipOffset: { x: 0, y: 0 },

packages/devextreme/js/ui/scheduler.d.ts

@@ -665,6 +665,12 @@ export interface dxSchedulerOptions extends WidgetOptions<dxScheduler> {
          */
         iconsShowMode?: AppointmentFormIconsShowMode;
       } | undefined;
+      /**
+       * @docid
+       * @default undefined
+       * @public
+       */
+      popup?: Properties;
     };
     /**
      * @docid

packages/devextreme/ts/dx.all.d.ts

@@ -26502,6 +26502,10 @@ declare module DevExpress.ui {
                 iconsShowMode?: DevExpress.ui.dxScheduler.AppointmentFormIconsShowMode;
               }
             | undefined;
+          /**
+           * [descr:dxSchedulerOptions.editing.popup]
+           */
+          popup?: DevExpress.ui.dxScheduler.Properties;
         };
     /**
      * [descr:dxSchedulerOptions.endDateExpr]