[scheduler][styled] Add more events popover

packages/x-scheduler/src/internals/components/day-time-grid/DayGridCell.tsx

@@ -8,9 +8,9 @@ import { useEventCalendarStoreContext } from '@mui/x-scheduler-headless/use-even
 import { selectors } from '@mui/x-scheduler-headless/use-event-calendar';
 import { EventPopoverTrigger } from '../event-popover';
 import { DayGridEvent } from '../event';
+import { useEventPopoverContext } from '../event-popover/EventPopover';
 
 import './DayTimeGrid.css';
-import { useEventPopoverContext } from '../event-popover/EventPopoverContext';
 
 export function DayGridCell(props: DayGridCellProps) {
   const { day, row } = props;
@@ -20,7 +20,7 @@ export function DayGridCell(props: DayGridCellProps) {
   const cellRef = React.useRef<HTMLDivElement | null>(null);
   const isCreation = useStore(store, selectors.isCreatingNewEventInDayCell, day.value);
 
-  const { startEditing } = useEventPopoverContext();
+  const { open: startEditing } = useEventPopoverContext();
 
   const handleDoubleClick = () => {
     store.setOccurrencePlaceholder({

packages/x-scheduler/src/internals/components/day-time-grid/TimeGridColumn.tsx

@@ -17,7 +17,7 @@ import { useEventOccurrencesWithDayGridPosition } from '@mui/x-scheduler-headles
 import { useEventOccurrencesWithTimelinePosition } from '@mui/x-scheduler-headless/use-event-occurrences-with-timeline-position';
 import { TimeGridEvent } from '../event/time-grid-event/TimeGridEvent';
 import { EventPopoverTrigger } from '../event-popover';
-import { useEventPopoverContext } from '../event-popover/EventPopoverContext';
+import { useEventPopoverContext } from '../event-popover/EventPopover';
 import './DayTimeGrid.css';
 
 export function TimeGridColumn(props: TimeGridColumnProps) {
@@ -76,7 +76,7 @@ function ColumnInteractiveLayer({
     elementRef: columnRef,
     snapMinutes: EVENT_CREATION_PRECISION_MINUTE,
   });
-  const { startEditing } = useEventPopoverContext();
+  const { open: startEditing } = useEventPopoverContext();
   const isCreation = useStore(store, selectors.isCreatingNewEventInTimeRange, start, end);
 
   const computeInitialRange = (event: React.MouseEvent<HTMLDivElement>) => {

packages/x-scheduler/src/internals/components/event-popover/EventPopover.css

@@ -1,14 +1,8 @@
 @import '../../../styles/tokens.css';
 
-.PopoverPositioner {
+.EventPopoverPositioner {
   max-width: 460px;
-  width: 100%;
-  background-color: var(--panel);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-4);
   overflow: hidden;
-  z-index: 1300;
-  box-shadow: var(--shadow-4);
 }
 
 .EventPopoverHeader {

packages/x-scheduler/src/internals/components/event-popover/EventPopover.tsx

@@ -26,16 +26,22 @@ import {
 import { selectors } from '@mui/x-scheduler-headless/use-event-calendar';
 import { useEventCalendarStoreContext } from '@mui/x-scheduler-headless/use-event-calendar-store-context';
 import {
-  EventPopoverContextValue,
   EventPopoverProps,
   EventPopoverProviderProps,
   EventPopoverTriggerProps,
 } from './EventPopover.types';
 import { getColorClassName } from '../../utils/color-utils';
 import { useTranslations } from '../../utils/TranslationsContext';
-import { EventPopoverContext, useEventPopoverContext } from './EventPopoverContext';
+import { createPopoverComponents } from '../popover';
 import './EventPopover.css';
 
+const EventPopoverComponents = createPopoverComponents<CalendarEventOccurrence>({
+  contextName: 'EventPopoverContext',
+});
+
+export const EventPopoverContext = EventPopoverComponents.Context;
+export const useEventPopoverContext = EventPopoverComponents.useContext;
+
 export const EventPopover = React.forwardRef(function EventPopover(
   props: EventPopoverProps,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
@@ -247,7 +253,7 @@ export const EventPopover = React.forwardRef(function EventPopover(
           sideOffset={8}
           anchor={anchor}
           trackAnchor={false}
-          className={clsx('PopoverPositioner', getColorClassName(color))}
+          className={clsx('PopoverPositioner', 'EventPopoverPositioner', getColorClassName(color))}
         >
           <Popover.Popup finalFocus={{ current: anchor }}>
             <Form errors={errors} onClearErrors={setErrors} onSubmit={handleSubmit}>
@@ -526,60 +532,29 @@ export const EventPopover = React.forwardRef(function EventPopover(
 export function EventPopoverProvider(props: EventPopoverProviderProps) {
   const { containerRef, children } = props;
   const store = useEventCalendarStoreContext();
-  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
-  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null);
-  const [selectedOccurrence, setSelectedOccurrence] =
-    React.useState<CalendarEventOccurrence | null>(null);
-
-  const startEditing = useEventCallback(
-    (anchorElement: HTMLElement, occurrence: CalendarEventOccurrence) => {
-      setAnchor(anchorElement);
-      setSelectedOccurrence(occurrence);
-      setIsPopoverOpen(true);
-    },
-  );
-
-  const handleClose = useEventCallback(() => {
-    if (!isPopoverOpen) {
-      return;
-    }
-    store.setOccurrencePlaceholder(null);
-    setIsPopoverOpen(false);
-    setAnchor(null);
-    setSelectedOccurrence(null);
-  });
-
-  const contextValue = React.useMemo<EventPopoverContextValue>(
-    () => ({ startEditing }),
-    [startEditing],
-  );
 
   return (
-    <EventPopoverContext.Provider value={contextValue}>
-      <Popover.Root open={isPopoverOpen} onOpenChange={handleClose} modal>
-        {children}
-        {anchor && selectedOccurrence && (
-          <EventPopover
-            anchor={anchor}
-            occurrence={selectedOccurrence}
-            container={containerRef.current}
-            onClose={handleClose}
-          />
-        )}
-      </Popover.Root>
-    </EventPopoverContext.Provider>
+    <EventPopoverComponents.Provider
+      containerRef={containerRef}
+      renderPopover={({ anchor, data: occurrence, container, onClose }) => (
+        <EventPopover
+          anchor={anchor}
+          occurrence={occurrence}
+          container={container}
+          onClose={onClose}
+        />
+      )}
+      onClose={() => {
+        store.setOccurrencePlaceholder(null);
+      }}
+    >
+      {children}
+    </EventPopoverComponents.Provider>
   );
 }
 
 export function EventPopoverTrigger(props: EventPopoverTriggerProps) {
   const { occurrence, ...other } = props;
-  const { startEditing } = useEventPopoverContext();
 
-  return (
-    <Popover.Trigger
-      nativeButton={false}
-      onClick={(event) => startEditing(event.currentTarget, occurrence)}
-      {...other}
-    />
-  );
+  return <EventPopoverComponents.Trigger data={occurrence} nativeButton={false} {...other} />;
 }

packages/x-scheduler/src/internals/components/event-popover/EventPopover.types.ts

@@ -21,10 +21,6 @@ export interface EventPopoverProps extends React.HTMLAttributes<HTMLDivElement>
   onClose: () => void;
 }
 
-export interface EventPopoverContextValue {
-  startEditing: (currentTarget: HTMLElement, occurrence: CalendarEventOccurrence) => void;
-}
-
 export interface EventPopoverProviderProps {
   containerRef: React.RefObject<HTMLElement | null>;
   children: React.ReactNode;

packages/x-scheduler/src/internals/components/event/agenda-event/AgendaEvent.css

@@ -18,6 +18,11 @@
   width: 150px;
 }
 
+.AgendaEventTime--compact {
+  width: fit-content;
+  margin-inline-end: var(--space-1);
+}
+
 .EventCard--compact {
   container-type: inline-size;
   border-radius: var(--radius-3);
@@ -26,7 +31,7 @@
   height: fit-content;
 }
 
-.EventCard--compact .AgendaEventCardContent {
+.AgendaEventCardContent {
   margin: 0;
   height: var(--line-height-1);
   line-height: var(--line-height-1);
@@ -38,11 +43,33 @@
   gap: var(--space-2);
   padding: var(--space-1) var(--space-2);
 }
+.AgendaEventCardWrapper--compact,
+.AgendaEventCardWrapper--allDay {
+  padding: 0 var(--space-1);
+}
+
+.AgendaEventCard.EventCard {
+  padding: 0;
+  border-radius: var(--radius-3);
+}
 
-.EventCard--compact:active {
+.AgendaEventCard--compact,
+.AgendaEventCard--allDay {
+  padding: 0;
+  border-radius: var(--radius-3);
+}
+
+.AgendaEventCard--compact:active,
+.AgendaEventCard--regular:active {
   background-color: var(--interactive-active-bg);
 }
 
-.EventCard--compact:hover {
+.AgendaEventCard--compact:hover,
+.AgendaEventCard--regular:hover {
   background-color: var(--interactive-hover-bg);
 }
+
+.AgendaEventCard--allDay {
+  --event-background: var(--allDay-accepted-bg);
+  color: var(--allDay-accepted-primary-text);
+}