[scheduler] Improve event popup interactions and toggle behavior

docs/pages/x/api/scheduler/event-calendar-premium.json

@@ -1,7 +1,10 @@
 {
   "props": {
     "apiRef": {
-      "type": { "name": "shape", "description": "{ current?: { setVisibleDate?: func } }" }
+      "type": {
+        "name": "shape",
+        "description": "{ current?: { setOpenEventId?: func, setVisibleDate?: func } }"
+      }
     },
     "areEventsDraggable": { "type": { "name": "bool" }, "default": "true" },
     "areEventsResizable": {

docs/pages/x/api/scheduler/event-calendar.json

@@ -1,7 +1,10 @@
 {
   "props": {
     "apiRef": {
-      "type": { "name": "shape", "description": "{ current?: { setVisibleDate?: func } }" }
+      "type": {
+        "name": "shape",
+        "description": "{ current?: { setOpenEventId?: func, setVisibleDate?: func } }"
+      }
     },
     "areEventsDraggable": { "type": { "name": "bool" }, "default": "true" },
     "areEventsResizable": {

docs/pages/x/api/scheduler/event-timeline-premium.json

@@ -3,7 +3,7 @@
     "apiRef": {
       "type": {
         "name": "shape",
-        "description": "{ current?: { goToNextVisibleDate?: func, goToPreviousVisibleDate?: func, setVisibleDate?: func } }"
+        "description": "{ current?: { goToNextVisibleDate?: func, goToPreviousVisibleDate?: func, setOpenEventId?: func, setVisibleDate?: func } }"
       }
     },
     "areEventsDraggable": { "type": { "name": "bool" }, "default": "true" },

packages/x-scheduler-internals-premium/src/use-event-timeline-premium/tests/core.EventTimelinePremiumStore.test.ts

@@ -28,6 +28,7 @@ describe('Core - EventTimelinePremiumStore', () => {
         eventModelStructure: undefined,
         displayTimezone: 'default',
         editedEventId: null,
+        openEventId: null,
         nowUpdatedEveryMinute: adapter.now('default'),
         occurrencePlaceholder: null,
         pendingUpdateRecurringEventParameters: null,

packages/x-scheduler-internals/src/internals/utils/SchedulerStore/SchedulerStore.ts

@@ -113,6 +113,7 @@ export class SchedulerStore<
         adapter.startOfDay(adapter.now(stateFromParameters.displayTimezone)),
       errors: [],
       isLoading: !!parameters.dataSource,
+      openEventId: null,
       recurringEventsPlugin,
     };
 
@@ -691,12 +692,21 @@ export class SchedulerStore<
     this.set('editedEventId', eventId);
   };
 
+  /**
+   * Sets the ID of the event currently open in the event dialog.
+   * Pass `null` to clear the open event.
+   */
+  public setOpenEventId = (eventId: SchedulerEventId | null) => {
+    this.set('openEventId', eventId);
+  };
+
   /**
    * Builds an object containing the methods that should be exposed publicly by the scheduler components.
    */
   public buildPublicAPI() {
     return {
       setVisibleDate: this.setVisibleDate,
+      setOpenEventId: this.setOpenEventId,
     };
   }
 }

packages/x-scheduler-internals/src/internals/utils/SchedulerStore/SchedulerStore.types.ts

@@ -176,6 +176,11 @@ export interface SchedulerState<TEvent extends object = any> {
    * directly as a React key and as the argument to `store.dismissError(key)`.
    */
   errors: readonly StoredError[];
+  /**
+   * The ID of the event currently open in the event dialog.
+   * `null` when no event dialog is open.
+   */
+  openEventId: SchedulerEventId | null;
   /**
    * Plugin that provides recurring-events support. `null` when not attached.
    */

packages/x-scheduler-internals/src/internals/utils/useEventCreation.ts

@@ -23,11 +23,19 @@ export function useEventCreation(
   }
 
   const handler = (event: React.MouseEvent<HTMLDivElement>) => {
+    const { occurrencePlaceholder, openEventId } = store.state;
+    if (occurrencePlaceholder?.type === 'creation' || openEventId !== null) {
+      store.setOccurrencePlaceholder(null);
+      return;
+    }
+
     const target = event.target as HTMLElement;
     // Don't create events when clicking on existing events
     if (target !== event.currentTarget && target.closest('button, [role="button"]')) {
       return;
     }
+
+    event.stopPropagation();
     store.setOccurrencePlaceholder({
       type: 'creation',
       ...getCreationPlaceholder({ event, creationConfig }),

packages/x-scheduler-internals/src/scheduler-selectors/schedulerOtherSelectors.ts

@@ -31,4 +31,5 @@ export const schedulerOtherSelectors = {
   ),
   isLoading: createSelector((state: State) => state.isLoading),
   errors: createSelector((state: State) => state.errors),
+  openEventId: createSelector((state: State) => state.openEventId),
 };

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

@@ -35,6 +35,7 @@ describe('Core - EventCalendarStore', () => {
         editedEventId: null,
         nowUpdatedEveryMinute: adapter.now('default'),
         occurrencePlaceholder: null,
+        openEventId: null,
         pendingUpdateRecurringEventParameters: null,
         preferences: EMPTY_OBJECT,
         preferencesMenuConfig: DEFAULT_PREFERENCES_MENU_CONFIG,

packages/x-scheduler-premium/src/event-calendar-premium/EventCalendarPremium.tsx

@@ -98,6 +98,7 @@ EventCalendarPremium.propTypes = {
    */
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
+      setOpenEventId: PropTypes.func,
       setVisibleDate: PropTypes.func,
     }),
   }),

packages/x-scheduler-premium/src/event-timeline-premium/EventTimelinePremium.tsx

@@ -160,6 +160,7 @@ EventTimelinePremium.propTypes = {
     current: PropTypes.shape({
       goToNextVisibleDate: PropTypes.func,
       goToPreviousVisibleDate: PropTypes.func,
+      setOpenEventId: PropTypes.func,
       setVisibleDate: PropTypes.func,
     }),
   }),

packages/x-scheduler/src/event-calendar/EventCalendar.tsx

@@ -77,6 +77,7 @@ EventCalendar.propTypes = {
    */
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
+      setOpenEventId: PropTypes.func,
       setVisibleDate: PropTypes.func,
     }),
   }),

packages/x-scheduler/src/internals/components/create-modal/createModal.tsx

@@ -86,13 +86,19 @@ export function createModal<TData>(config: CreateModalConfig) {
     ref: React.ForwardedRef<HTMLElement | null>,
   ) {
     const { data, onClick, children } = props;
-    const { onOpen } = useModalContext();
+    const { onOpen, onClose, isOpen, data: currentData } = useModalContext();
 
     return React.cloneElement(children as React.ReactElement<any>, {
       ref,
       onClick: (event: React.MouseEvent) => {
         onClick?.(event);
-        onOpen(ref as React.RefObject<HTMLElement | null>, data);
+        const dataId = (data as any)?.id;
+        const currentId = (currentData as any)?.id;
+        if (isOpen && dataId != null && dataId === currentId) {
+          onClose();
+        } else {
+          onOpen(ref as React.RefObject<HTMLElement | null>, data);
+        }
       },
     });
   });