[scheduler][styled] Create UI to pick the recurrent event update behavior (#19948)

Co-authored-by: delangle <[email protected]>

Author: rita-codes

docs/data/scheduler/event-calendar/ExternalDragAndDrop.js

@@ -66,12 +66,13 @@ export default function ExternalDragAndDrop() {
     return dropTargetForElements({
       element: externalEventsContainerRef.current,
       canDrop: (arg) => isValidDropTarget(arg.source.data),
-      onDragEnter: ({ source: { data } }) => {
+      onDragEnter: (args) => {
+        const data = args.source.data;
         if (!isValidDropTarget(data)) {
           return;
         }
 
-        const { start, end, ...eventData } = data.event;
+        const { start, end, ...eventData } = data.originalOccurrence;
 
         setPlaceholder({
           ...eventData,

docs/data/scheduler/event-calendar/ExternalDragAndDrop.tsx

@@ -69,12 +69,13 @@ export default function ExternalDragAndDrop() {
     return dropTargetForElements({
       element: externalEventsContainerRef.current,
       canDrop: (arg) => isValidDropTarget(arg.source.data),
-      onDragEnter: ({ source: { data } }) => {
+      onDragEnter: (args) => {
+        const data = args.source.data as any;
         if (!isValidDropTarget(data)) {
           return;
         }
 
-        const { start, end, ...eventData } = data.event;
+        const { start, end, ...eventData } = data.originalOccurrence;
 
         setPlaceholder({
           ...eventData,

docs/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+/// <reference path="./export/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

packages/x-scheduler-headless/src/calendar-grid/day-event/CalendarGridDayEvent.tsx

@@ -7,7 +7,7 @@ import { useButton } from '../../base-ui-copy/utils/useButton';
 import { useRenderElement } from '../../base-ui-copy/utils/useRenderElement';
 import { BaseUIComponentProps, NonNativeButtonProps } from '../../base-ui-copy/utils/types';
 import { useDraggableEvent } from '../../utils/useDraggableEvent';
-import { CalendarEvent, CalendarEventId, SchedulerValidDate } from '../../models';
+import { CalendarEventId, CalendarEventOccurrence, SchedulerValidDate } from '../../models';
 import { useAdapter, diffIn } from '../../use-adapter';
 import { useCalendarGridDayRowContext } from '../day-row/CalendarGridDayRowContext';
 import { selectors } from '../../use-event-calendar/EventCalendarStore.selectors';
@@ -76,11 +76,20 @@ export const CalendarGridDayEvent = React.forwardRef(function CalendarGridDayEve
     return adapter.addDays(eventStartInRow, Math.ceil(positionX * eventDayLengthInRow) - 1);
   });
 
+  const firstEventOfSeries = selectors.event(store.state, eventId)!;
+  const originalOccurrence: CalendarEventOccurrence = {
+    ...firstEventOfSeries,
+    id: eventId,
+    key: occurrenceKey,
+    start,
+    end,
+  };
+
   const getSharedDragData: CalendarGridDayEventContext['getSharedDragData'] = useEventCallback(
     () => ({
       eventId,
       occurrenceKey,
-      event: selectors.event(store.state, eventId)!,
+      originalOccurrence,
       start,
       end,
     }),
@@ -157,7 +166,7 @@ export namespace CalendarGridDayEvent {
   export interface SharedDragData {
     eventId: CalendarEventId;
     occurrenceKey: string;
-    event: CalendarEvent;
+    originalOccurrence: CalendarEventOccurrence;
     start: SchedulerValidDate;
     end: SchedulerValidDate;
   }

packages/x-scheduler-headless/src/calendar-grid/time-event/CalendarGridTimeEvent.tsx

@@ -14,7 +14,7 @@ import { CalendarGridTimeEventContext } from './CalendarGridTimeEventContext';
 import { useAdapter } from '../../use-adapter/useAdapter';
 import { useEventCalendarStoreContext } from '../../use-event-calendar-store-context';
 import { selectors } from '../../use-event-calendar';
-import { CalendarEvent, CalendarEventId, SchedulerValidDate } from '../../models';
+import { CalendarEventId, CalendarEventOccurrence, SchedulerValidDate } from '../../models';
 import { useCalendarGridRootContext } from '../root/CalendarGridRootContext';
 
 export const CalendarGridTimeEvent = React.forwardRef(function CalendarGridTimeEvent(
@@ -66,11 +66,22 @@ export const CalendarGridTimeEvent = React.forwardRef(function CalendarGridTimeE
         adapter.toJsDate(columnStart).getTime() - adapter.toJsDate(start).getTime(),
         0,
       );
+
+      const event = selectors.event(store.state, eventId)!;
+
+      const originalOccurrence: CalendarEventOccurrence = {
+        ...event,
+        key: occurrenceKey,
+        id: eventId,
+        start,
+        end,
+      };
+
       const offsetInsideColumn = getCursorPositionInElementMs({ input, elementRef: ref });
       return {
         eventId,
         occurrenceKey,
-        event: selectors.event(store.state, eventId)!,
+        originalOccurrence,
         start,
         end,
         initialCursorPositionInEventMs: offsetBeforeColumnStart + offsetInsideColumn,
@@ -159,7 +170,7 @@ export namespace CalendarGridTimeEvent {
   export interface SharedDragData {
     eventId: CalendarEventId;
     occurrenceKey: string;
-    event: CalendarEvent;
+    originalOccurrence: CalendarEventOccurrence;
     start: SchedulerValidDate;
     end: SchedulerValidDate;
     initialCursorPositionInEventMs: number;

packages/x-scheduler-headless/src/constants/constants.ts

@@ -1,4 +1,4 @@
-import { CalendarEventColor, RecurringEventUpdateScope } from '../models';
+import { CalendarEventColor } from '../models';
 
 export const EVENT_CREATION_PRECISION_MINUTE = 30;
 
@@ -7,9 +7,6 @@ export const EVENT_CREATION_DEFAULT_LENGTH_MINUTE = 30;
 // TODO: Add a color prop to the SchedulerStore and move DEFAULT_EVENT_COLOR there.
 export const DEFAULT_EVENT_COLOR: CalendarEventColor = 'jade';
 
-export const SCHEDULER_RECURRING_EDITING_SCOPE: RecurringEventUpdateScope =
-  (typeof window !== 'undefined' && (window as any).SCHEDULER_RECURRING_EDITING_SCOPE) || 'all';
-
 export const EVENT_DRAG_PRECISION_MINUTE = 15;
 
 export const EVENT_DRAG_PRECISION_MS = EVENT_DRAG_PRECISION_MINUTE * 60 * 1000;

packages/x-scheduler-headless/src/models/event.ts

@@ -170,7 +170,7 @@ export interface CalendarOccurrencePlaceholderInternalDragOrResize
   /**
    * The data of the event to use when dropping the event outside of the Event Calendar.
    */
-  originalEvent: CalendarEvent;
+  originalOccurrence: CalendarEventOccurrence;
 }
 
 export interface CalendarOccurrencePlaceholderExternalDrag

packages/x-scheduler-headless/src/use-event-calendar/tests/core.EventCalendarStore.test.ts

@@ -34,6 +34,7 @@ describe('Core - EventCalendarStore', () => {
         canDropEventsToTheOutside: false,
         showCurrentTimeIndicator: true,
         eventColor: 'jade',
+        pendingUpdateRecurringEventParameters: null,
         preferences: DEFAULT_PREFERENCES,
         preferencesMenuConfig: DEFAULT_PREFERENCES_MENU_CONFIG,
         viewConfig: null,

packages/x-scheduler-headless/src/use-event-calendar/tests/selectors.EventCalendarStore.test.ts

@@ -54,7 +54,8 @@ describe('EventCalendarStore.selectors', () => {
           surfaceType: 'day-grid',
           start: adapter.startOfDay(day),
           end: adapter.endOfDay(day),
-          originalEvent: {
+          originalOccurrence: {
+            key: 'event-id-key',
             id: 'event-id',
             title: 'Event',
             start: adapter.startOfDay(day),
@@ -122,8 +123,9 @@ describe('EventCalendarStore.selectors', () => {
           surfaceType: 'time-grid',
           start: adapter.startOfDay(day),
           end: adapter.endOfDay(day),
-          originalEvent: {
+          originalOccurrence: {
             id: 'event-id',
+            key: 'event-id-key',
             title: 'Event',
             start: adapter.startOfDay(day),
             end: adapter.endOfDay(day),

packages/x-scheduler-headless/src/use-timeline/tests/core.TimelineStore.test.ts

@@ -27,6 +27,7 @@ describe('Core - TimelineStore', () => {
         showCurrentTimeIndicator: true,
         occurrencePlaceholder: null,
         visibleDate: adapter.startOfDay(adapter.date()),
+        pendingUpdateRecurringEventParameters: null,
         preferences: DEFAULT_PREFERENCES,
         view: 'time',
         views: ['time', 'days', 'weeks', 'months', 'years'],