rename AgendaEvent

Author: noraleonte

packages/x-scheduler/src/agenda-view/AgendaView.tsx

@@ -11,7 +11,7 @@ import { selectors } from '@mui/x-scheduler-headless/use-event-calendar';
 import { useEventOccurrencesGroupedByDay } from '@mui/x-scheduler-headless/use-event-occurrences-grouped-by-day';
 import { AgendaViewProps } from './AgendaView.types';
 import { EventPopoverProvider, EventPopoverTrigger } from '../internals/components/event-popover';
-import { AgendaEvent } from '../internals/components/event/agenda-event/AgendaEvent';
+import { EventItem } from '../internals/components/event/event-item/EventItem';
 import './AgendaView.css';
 
 // TODO: Create a prop to allow users to customize the number of days in agenda view
@@ -85,7 +85,7 @@ export const AgendaView = React.memo(
                     <EventPopoverTrigger
                       occurrence={occurrence}
                       render={
-                        <AgendaEvent
+                        <EventItem
                           occurrence={occurrence}
                           ariaLabelledBy={`DayHeaderCell-${day.key}`}
                         />

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

@@ -1,14 +1,14 @@
 @import '../../../../styles/colors.css';
 
-.AgendaEventTitle {
+.EventItemTitle {
   margin: 0;
   color: var(--event-primary-text);
   font-weight: var(--font-weight-2);
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
 }
 
-.AgendaEventTime {
+.EventItemTime {
   display: inline-block;
   color: var(--event-secondary-text);
   font-weight: var(--font-weight-1);
@@ -18,7 +18,7 @@
   width: 150px;
 }
 
-.AgendaEventTime--compact {
+.EventItemTime--compact {
   width: fit-content;
   margin-inline-end: var(--space-1);
 }
@@ -31,45 +31,45 @@
   height: fit-content;
 }
 
-.AgendaEventCardContent {
+.EventItemCardContent {
   margin: 0;
   height: var(--line-height-1);
   line-height: var(--line-height-1);
 }
 
-.AgendaEventCardWrapper {
+.EventItemCardWrapper {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-1) var(--space-2);
 }
-.AgendaEventCardWrapper--compact,
-.AgendaEventCardWrapper--allDay {
+.EventItemCardWrapper--compact,
+.EventItemCardWrapper--allDay {
   padding: 0 var(--space-1);
 }
 
-.AgendaEventCard.EventCard {
+.EventItemCard.EventCard {
   padding: 0;
   border-radius: var(--radius-3);
 }
 
-.AgendaEventCard--compact,
-.AgendaEventCard--allDay {
+.EventItemCard--compact,
+.EventItemCard--allDay {
   padding: 0;
   border-radius: var(--radius-3);
 }
 
-.AgendaEventCard--compact:active,
-.AgendaEventCard--regular:active {
+.EventItemCard--compact:active,
+.EventItemCard--regular:active {
   background-color: var(--interactive-active-bg);
 }
 
-.AgendaEventCard--compact:hover,
-.AgendaEventCard--regular:hover {
+.EventItemCard--compact:hover,
+.EventItemCard--regular:hover {
   background-color: var(--interactive-hover-bg);
 }
 
-.AgendaEventCard--allDay {
+.EventItemCard--allDay {
   --event-background: var(--allDay-accepted-bg);
   color: var(--allDay-accepted-primary-text);
 }

packages/x-scheduler/src/internals/components/event/agenda-event/AgendaEvent.css renamed to packages/x-scheduler/src/internals/components/event/event-item/EventItem.css

@@ -7,16 +7,20 @@ import { Repeat } from 'lucide-react';
 import { useAdapter } from '@mui/x-scheduler-headless/use-adapter';
 import { selectors } from '@mui/x-scheduler-headless/use-event-calendar';
 import { useEventCalendarStoreContext } from '@mui/x-scheduler-headless/use-event-calendar-store-context';
-import { AgendaEventProps } from './AgendaEvent.types';
+import { EventItemProps } from './EventItem.types';
 import { getColorClassName } from '../../../utils/color-utils';
 import { useTranslations } from '../../../utils/TranslationsContext';
-import './AgendaEvent.css';
+import './EventItem.css';
 // TODO: Create a standalone component for the resource color pin instead of re-using another component's CSS classes
 import '../../resource-legend/ResourceLegend.css';
 import '../index.css';
 
-export const AgendaEvent = React.forwardRef(function AgendaEvent(
-  props: AgendaEventProps,
+/**
+ * Component used to display an event occurrence, without any positioning capabilities
+ * Used in <AgendaView /> and in the event popover of <MonthView /> to display the list of events for a specific day.
+ */
+export const EventItem = React.forwardRef(function EventItem(
+  props: EventItemProps,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -54,16 +58,16 @@ export const AgendaEvent = React.forwardRef(function AgendaEvent(
               }
             />
             <p
-              className={clsx('AgendaEventCardContent', 'LinesClamp')}
+              className={clsx('EventItemCardContent', 'LinesClamp')}
               style={{ '--number-of-lines': 1 } as React.CSSProperties}
             >
-              <time className="AgendaEventTime AgendaEventTime--compact">
+              <time className="EventItemTime EventItemTime--compact">
                 <span>
                   {adapter.format(occurrence.start, ampm ? 'hoursMinutes12h' : 'hoursMinutes24h')}
                 </span>
               </time>
 
-              <span className="AgendaEventTitle">{occurrence.title}</span>
+              <span className="EventItemTitle">{occurrence.title}</span>
             </p>
             {isRecurring && (
               <Repeat
@@ -80,7 +84,7 @@ export const AgendaEvent = React.forwardRef(function AgendaEvent(
         return (
           <React.Fragment>
             <p
-              className={clsx('AgendaEventTitle', 'LinesClamp')}
+              className={clsx('EventItemTitle', 'LinesClamp')}
               style={{ '--number-of-lines': 1 } as React.CSSProperties}
             >
               {occurrence.title}
@@ -98,7 +102,7 @@ export const AgendaEvent = React.forwardRef(function AgendaEvent(
       case 'regular':
       default:
         return (
-          <div className="AgendaEventCardWrapper">
+          <div className="EventItemCardWrapper">
             <span
               className="ResourceLegendColor"
               role="img"
@@ -109,13 +113,13 @@ export const AgendaEvent = React.forwardRef(function AgendaEvent(
               }
             />
             <p
-              className={clsx('AgendaEventCardContent', 'LinesClamp')}
+              className={clsx('EventItemCardContent', 'LinesClamp')}
               style={{ '--number-of-lines': 1 } as React.CSSProperties}
             >
               {occurrence?.allDay ? (
-                <span className="AgendaEventTime">{translations.allDay}</span>
+                <span className="EventItemTime">{translations.allDay}</span>
               ) : (
-                <time className="AgendaEventTime">
+                <time className="EventItemTime">
                   <span>
                     {adapter.format(occurrence.start, ampm ? 'hoursMinutes12h' : 'hoursMinutes24h')}
                   </span>
@@ -126,7 +130,7 @@ export const AgendaEvent = React.forwardRef(function AgendaEvent(
                 </time>
               )}
 
-              <span className="AgendaEventTitle">{occurrence.title}</span>
+              <span className="EventItemTitle">{occurrence.title}</span>
             </p>
             {isRecurring && (
               <Repeat
@@ -161,14 +165,14 @@ export const AgendaEvent = React.forwardRef(function AgendaEvent(
         className,
         'EventContainer',
         'EventCard',
-        'AgendaEventCard',
-        `AgendaEventCard--${variant}`,
+        'EventItemCard',
+        `EventItemCard--${variant}`,
         getColorClassName(color),
       )}
       aria-labelledby={`${ariaLabelledBy} ${id}`}
       {...other}
     >
-      <div className={clsx('AgendaEventCardWrapper', `AgendaEventCardWrapper--${variant}`)}>
+      <div className={clsx('EventItemCardWrapper', `EventItemCardWrapper--${variant}`)}>
         {content}
       </div>
     </div>

packages/x-scheduler/src/internals/components/event/agenda-event/AgendaEvent.tsx renamed to packages/x-scheduler/src/internals/components/event/event-item/EventItem.tsx

@@ -0,0 +1,21 @@
+import { CalendarEventOccurrence } from '@mui/x-scheduler-headless/models';
+import { EventProps } from '../Event.types';
+
+export interface EventItemProps extends EventProps {
+  /**
+   * The event occurrence to render.
+   */
+  occurrence: CalendarEventOccurrence;
+  /**
+   * The event variant.
+   * 'regular' does not make the styling distinction between all day events and timed events, expect for the time display. Used in <AgendaView />.
+   * 'allDay' is styled to fit in smaller spaces. Displays the event title only on a solid background. Used in <MoreEventsPopover /> for all-day events.
+   * 'compact' is styled to fit in smaller spaces. Displays the resource legend, event title alongside the event time on a neutral background. Used in <MoreEventsPopover /> for timed events.
+   * @default 'regular'
+   */
+  variant?: 'regular' | 'allDay' | 'compact';
+  /**
+   * ID of the header this event is associated with (for aria-labelledby).
+   */
+  ariaLabelledBy: string;
+}

packages/x-scheduler/src/internals/components/event/event-item/EventItem.types.ts

@@ -6,7 +6,7 @@ import { useAdapter } from '@mui/x-scheduler-headless/use-adapter';
 import { useEventOccurrencesWithDayGridPosition } from '@mui/x-scheduler-headless/use-event-occurrences-with-day-grid-position';
 import { MoreEventsPopoverProps, MoreEventsPopoverProviderProps } from './MoreEventsPopover.types';
 import { useTranslations } from '../../utils/TranslationsContext';
-import { AgendaEvent } from '../event/agenda-event/AgendaEvent';
+import { EventItem } from '../event/event-item/EventItem';
 import { createPopover } from '../popover';
 import { ArrowSvg } from './arrow/ArrowSvg';
 import './MoreEventsPopover.css';
@@ -59,7 +59,7 @@ export default function MoreEventsPopoverContent(props: MoreEventsPopoverProps)
           </div>
           <div className="MoreEventsPopoverContent">
             {occurrences.map((occurrence) => (
-              <AgendaEvent
+              <EventItem
                 variant={occurrence.allDay ? 'allDay' : 'compact'}
                 key={occurrence.key}
                 occurrence={occurrence}