[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

@@ -29,6 +29,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

@@ -180,6 +180,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

@@ -35,4 +35,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

@@ -103,6 +103,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

@@ -163,6 +163,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

@@ -82,6 +82,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

@@ -23,8 +23,10 @@ export function createModal<TData>(config: CreateModalConfig) {
     return context;
   }
 
+  const EMPTY_ANCHOR_REF: React.RefObject<HTMLElement | null> = { current: null };
+
   function Provider(props: ProviderProps<TData>) {
-    const { children, render, onOpen: onOpenProp, onClose: onCloseProp } = props;
+    const { children, render, onOpen: onOpenProp, onClose: onCloseProp, imperativeRef } = props;
     const anchorRef = React.useRef<HTMLElement | null>(null);
     const eventManager = React.useRef(new EventManager());
 
@@ -48,6 +50,19 @@ export function createModal<TData>(config: CreateModalConfig) {
       eventManager.current.emit('close');
     });
 
+    React.useImperativeHandle(
+      imperativeRef,
+      () => ({
+        open(data: TData, forwardedAnchorRef?: React.RefObject<HTMLElement | null>) {
+          onOpen(forwardedAnchorRef ?? EMPTY_ANCHOR_REF, data);
+        },
+        close() {
+          onClose();
+        },
+      }),
+      [onOpen, onClose],
+    );
+
     const subscribeCloseHandler = React.useCallback((handler: () => void) => {
       eventManager.current.on('close', handler);
       return () => {
@@ -86,13 +101,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 dataKey = (data as any)?.key;
+        const currentKey = (currentData as any)?.key;
+        if (isOpen && dataKey != null && dataKey === currentKey) {
+          onClose();
+        } else {
+          onOpen(ref as React.RefObject<HTMLElement | null>, data);
+        }
       },
     });
   });

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

@@ -24,6 +24,17 @@ export type ContextValue<TData> = {
   subscribeCloseHandler: (handler: () => void) => () => void;
 };
 
+export interface ModalImperativeHandle<TData> {
+  /**
+   * Imperatively open the modal with the given data and optional anchor element.
+   */
+  open: (data: TData, anchorRef?: React.RefObject<HTMLElement | null>) => void;
+  /**
+   * Imperatively close the modal.
+   */
+  close: () => void;
+}
+
 export interface ProviderProps<TData> {
   children: React.ReactNode;
   /**
@@ -37,6 +48,10 @@ export interface ProviderProps<TData> {
   }) => React.ReactNode;
   onOpen?: (data: TData) => void;
   onClose?: () => void;
+  /**
+   * Ref that exposes imperative open/close methods.
+   */
+  imperativeRef?: React.Ref<ModalImperativeHandle<TData>>;
 }
 
 export interface TriggerProps<TData> {