[scheduler] Add header parts to the Calendar Grid primitive (#19854)

Signed-off-by: Flavien DELANGLE <[email protected]>
Co-authored-by: Rita <[email protected]>

Author: flaviendelangle

packages/x-scheduler-headless/src/calendar-grid/day-cell/CalendarGridDayCell.tsx

@@ -2,7 +2,9 @@
 import * as React from 'react';
 import { useRenderElement } from '../../base-ui-copy/utils/useRenderElement';
 import { BaseUIComponentProps } from '../../base-ui-copy/utils/types';
+import { useCompositeListItem } from '../../base-ui-copy/composite/list/useCompositeListItem';
 import { useDayCellDropTarget } from './useDayCellDropTarget';
+import { CalendarGridDayCellContext } from './CalendarGridDayCellContext';
 
 export const CalendarGridDayCell = React.forwardRef(function CalendarGridDayCell(
   componentProps: CalendarGridDayCell.Props,
@@ -19,13 +21,28 @@ export const CalendarGridDayCell = React.forwardRef(function CalendarGridDayCell
     ...elementProps
   } = componentProps;
 
+  const { ref: listItemRef, index } = useCompositeListItem();
   const dropTargetRef = useDayCellDropTarget({ value, addPropertiesToDroppedEvent });
+
   const props = React.useMemo(() => ({ role: 'gridcell' }), []);
 
-  return useRenderElement('div', componentProps, {
-    ref: [forwardedRef, dropTargetRef],
+  const contextValue: CalendarGridDayCellContext = React.useMemo(
+    () => ({
+      index,
+    }),
+    [index],
+  );
+
+  const element = useRenderElement('div', componentProps, {
+    ref: [forwardedRef, dropTargetRef, listItemRef],
     props: [props, elementProps],
   });
+
+  return (
+    <CalendarGridDayCellContext.Provider value={contextValue}>
+      {element}
+    </CalendarGridDayCellContext.Provider>
+  );
 });
 
 export namespace CalendarGridDayCell {

packages/x-scheduler-headless/src/calendar-grid/day-cell/CalendarGridDayCellContext.ts

@@ -1,7 +1,12 @@
 'use client';
 import * as React from 'react';
 
-export interface CalendarGridDayCellContext {}
+export interface CalendarGridDayCellContext {
+  /**
+   * The index of the cell in the row.
+   */
+  index: number;
+}
 
 export const CalendarGridDayCellContext = React.createContext<
   CalendarGridDayCellContext | undefined

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

@@ -4,6 +4,7 @@ import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
 import { useStore } from '@base-ui-components/utils/store/useStore';
+import { useId } from '@base-ui-components/utils/useId';
 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';
@@ -12,10 +13,13 @@ import { CalendarEvent, CalendarEventId, SchedulerValidDate } from '../../models
 import { useAdapter, diffIn } from '../../use-adapter';
 import { useCalendarGridDayRowContext } from '../day-row/CalendarGridDayRowContext';
 import { selectors } from '../../use-event-calendar/EventCalendarStore.selectors';
+import { getCalendarGridHeaderCellId } from '../../utils/accessibility-utils';
 import { CalendarGridDayEventContext } from './CalendarGridDayEventContext';
 import { useEventCalendarStoreContext } from '../../use-event-calendar-store-context';
+import { useCalendarGridDayCellContext } from '../day-cell/CalendarGridDayCellContext';
+import { useCalendarGridRootContext } from '../root/CalendarGridRootContext';
 
-const EVENT_PROPS_WHILE_DRAGGING = { style: { pointerEvents: 'none' as const } };
+const EVENT_STYLE_WHILE_DRAGGING = { pointerEvents: 'none' as const };
 
 export const CalendarGridDayEvent = React.forwardRef(function CalendarGridDayEvent(
   componentProps: CalendarGridDayEvent.Props,
@@ -30,6 +34,7 @@ export const CalendarGridDayEvent = React.forwardRef(function CalendarGridDayEve
     end,
     eventId,
     occurrenceKey,
+    id: idProp,
     isDraggable = false,
     nativeButton = false,
     // Props forwarded to the DOM element
@@ -41,19 +46,32 @@ export const CalendarGridDayEvent = React.forwardRef(function CalendarGridDayEve
   const isInteractive = true;
 
   const adapter = useAdapter();
+  const store = useEventCalendarStoreContext();
+  const { id: rootId } = useCalendarGridRootContext();
+  const { start: rowStart, end: rowEnd } = useCalendarGridDayRowContext();
+  const { index: cellIndex } = useCalendarGridDayCellContext();
+
   const ref = React.useRef<HTMLDivElement>(null);
   const { getButtonProps, buttonRef } = useButton({
     disabled: !isInteractive,
     native: nativeButton,
   });
-  const { start: rowStart, end: rowEnd } = useCalendarGridDayRowContext();
   const { state: eventState } = useEvent({ start, end });
-  const store = useEventCalendarStoreContext();
   const hasPlaceholder = useStore(store, selectors.hasOccurrencePlaceholder);
   const isDragging = useStore(store, selectors.isOccurrenceMatchingThePlaceholder, occurrenceKey);
   const [isResizing, setIsResizing] = React.useState(false);
+  const id = useId(idProp);
 
-  const props = hasPlaceholder ? EVENT_PROPS_WHILE_DRAGGING : undefined;
+  const columnHeaderId = getCalendarGridHeaderCellId(rootId, cellIndex);
+
+  const props = React.useMemo(
+    () => ({
+      id,
+      'aria-labelledby': `${columnHeaderId} ${id}`,
+      style: hasPlaceholder ? EVENT_STYLE_WHILE_DRAGGING : undefined,
+    }),
+    [hasPlaceholder, columnHeaderId, id],
+  );
 
   const state: CalendarGridDayEvent.State = React.useMemo(
     () => ({ ...eventState, dragging: isDragging, resizing: isResizing }),

packages/x-scheduler-headless/src/calendar-grid/day-row/CalendarGridDayRow.tsx

@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useRenderElement } from '../../base-ui-copy/utils/useRenderElement';
+import { CompositeList } from '../../base-ui-copy/composite/list/CompositeList';
 import { BaseUIComponentProps } from '../../base-ui-copy/utils/types';
 import { CalendarGridDayRowContext } from './CalendarGridDayRowContext';
 import { SchedulerValidDate } from '../../models';
@@ -21,6 +22,7 @@ export const CalendarGridDayRow = React.forwardRef(function CalendarGridDayRow(
   } = componentProps;
 
   const props = React.useMemo(() => ({ role: 'row' }), []);
+  const cellsRefs = React.useRef<(HTMLDivElement | null)[]>([]);
 
   const contextValue: CalendarGridDayRowContext = React.useMemo(
     () => ({
@@ -36,9 +38,11 @@ export const CalendarGridDayRow = React.forwardRef(function CalendarGridDayRow(
   });
 
   return (
-    <CalendarGridDayRowContext.Provider value={contextValue}>
-      {element}
-    </CalendarGridDayRowContext.Provider>
+    <CompositeList elementsRef={cellsRefs}>
+      <CalendarGridDayRowContext.Provider value={contextValue}>
+        {element}
+      </CalendarGridDayRowContext.Provider>
+    </CompositeList>
   );
 });
 

packages/x-scheduler-headless/src/calendar-grid/header-cell/CalendarGridHeaderCell.test.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { CalendarGrid } from '@mui/x-scheduler-headless/calendar-grid';
+import { adapter, createSchedulerRenderer, describeConformance } from 'test/utils/scheduler';
+import { EventCalendarProvider } from '@mui/x-scheduler-headless/event-calendar-provider';
+import { processDate } from '@mui/x-scheduler-headless/process-date';
+
+describe('<CalendarGrid.HeaderCell />', () => {
+  const { render } = createSchedulerRenderer();
+
+  describeConformance(
+    <CalendarGrid.HeaderCell date={processDate(adapter.date(), adapter)} />,
+    () => ({
+      refInstanceof: window.HTMLDivElement,
+      render(node) {
+        return render(
+          <EventCalendarProvider events={[]}>
+            <CalendarGrid.Root>
+              <CalendarGrid.HeaderRow>{node}</CalendarGrid.HeaderRow>
+            </CalendarGrid.Root>
+          </EventCalendarProvider>,
+        );
+      },
+    }),
+  );
+});

packages/x-scheduler-headless/src/calendar-grid/header-cell/CalendarGridHeaderCell.tsx

@@ -0,0 +1,91 @@
+'use client';
+import * as React from 'react';
+import { useStore } from '@base-ui-components/utils/store';
+import { useRenderElement } from '../../base-ui-copy/utils/useRenderElement';
+import { BaseUIComponentProps } from '../../base-ui-copy/utils/types';
+import { useCompositeListItem } from '../../base-ui-copy/composite/list/useCompositeListItem';
+import { useAdapter } from '../../use-adapter';
+import { useEventCalendarStoreContext } from '../../use-event-calendar-store-context';
+import { CalendarProcessedDate } from '../../models';
+import { getCalendarGridHeaderCellId } from '../../utils/accessibility-utils';
+import { useCalendarGridRootContext } from '../root/CalendarGridRootContext';
+import { selectors } from '../../utils/SchedulerStore';
+
+export const CalendarGridHeaderCell = React.forwardRef(function CalendarGridHeaderCell(
+  componentProps: CalendarGridHeaderCell.Props,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const adapter = useAdapter();
+
+  const {
+    // Rendering props
+    className,
+    render,
+    // Internal props
+    date,
+    skipDataCurrent,
+    ariaLabelFormat = adapter.formats.weekday,
+    // Props forwarded to the DOM element
+    ...elementProps
+  } = componentProps;
+
+  const store = useEventCalendarStoreContext();
+  const { id: rootId } = useCalendarGridRootContext();
+  const isCurrentDay = useStore(
+    store,
+    skipDataCurrent ? () => false : selectors.isCurrentDay,
+    date.value,
+  );
+
+  const { ref: listItemRef, index } = useCompositeListItem();
+  const id = getCalendarGridHeaderCellId(rootId, index);
+
+  const props = React.useMemo(
+    () => ({
+      role: 'columnheader',
+      id,
+      'aria-label': `${adapter.formatByString(date.value, ariaLabelFormat)}`,
+    }),
+    [adapter, date, id, ariaLabelFormat],
+  );
+
+  const state: CalendarGridHeaderCell.State = React.useMemo(
+    () => ({
+      current: isCurrentDay,
+    }),
+    [isCurrentDay],
+  );
+
+  return useRenderElement('div', componentProps, {
+    state,
+    ref: [forwardedRef, listItemRef],
+    props: [props, elementProps],
+  });
+});
+
+export namespace CalendarGridHeaderCell {
+  export interface State {
+    /**
+     * Whether the header cell represents the current day.
+     */
+    current: boolean;
+  }
+
+  export interface Props extends BaseUIComponentProps<'div', State> {
+    /**
+     * The date of the events rendered in the same column as this header cell.
+     */
+    date: CalendarProcessedDate;
+    /**
+     * The format used for the `aria-label` attribute.
+     * @default adapter.formats.weekday
+     */
+    ariaLabelFormat?: string;
+    /**
+     * Whether to skip adding the `data-current` attribute to the root element when the header cell represents the current day.
+     * This can be useful when the cells in the column are not representing a single day (e.g. in the month view).
+     * @default false
+     */
+    skipDataCurrent?: boolean;
+  }
+}

packages/x-scheduler-headless/src/calendar-grid/header-cell/CalendarGridHeaderCellDataAttributes.ts

@@ -0,0 +1,6 @@
+export enum CalendarGridHeaderCellDataAttributes {
+  /**
+   * Present when the header cell represents the current date.
+   */
+  current = 'data-current',
+}

packages/x-scheduler-headless/src/calendar-grid/scrollable-content/CalendarGridScrollableContent.test.tsx renamed to packages/x-scheduler-headless/src/calendar-grid/header-row/CalendarGridHeaderRow.test.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { CalendarGrid } from '@mui/x-scheduler-headless/calendar-grid';
-import { EventCalendarProvider } from '@mui/x-scheduler-headless/event-calendar-provider';
 import { createSchedulerRenderer, describeConformance } from 'test/utils/scheduler';
+import { EventCalendarProvider } from '@mui/x-scheduler-headless/event-calendar-provider';
 
-describe('<CalendarGrid.ScrollableContent />', () => {
+describe('<CalendarGrid.HeaderRow />', () => {
   const { render } = createSchedulerRenderer();
 
-  describeConformance(<CalendarGrid.ScrollableContent />, () => ({
+  describeConformance(<CalendarGrid.HeaderRow />, () => ({
     refInstanceof: window.HTMLDivElement,
     render(node) {
       return render(

packages/x-scheduler-headless/src/calendar-grid/header-row/CalendarGridHeaderRow.tsx

@@ -0,0 +1,34 @@
+'use client';
+import * as React from 'react';
+import { useRenderElement } from '../../base-ui-copy/utils/useRenderElement';
+import { BaseUIComponentProps } from '../../base-ui-copy/utils/types';
+import { CompositeList } from '../../base-ui-copy/composite/list/CompositeList';
+
+export const CalendarGridHeaderRow = React.forwardRef(function CalendarGridHeaderRow(
+  componentProps: CalendarGridHeaderRow.Props,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    // Rendering props
+    className,
+    render,
+    // Props forwarded to the DOM element
+    ...elementProps
+  } = componentProps;
+
+  const props = React.useMemo(() => ({ role: 'row' }), []);
+  const cellsRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+
+  const element = useRenderElement('div', componentProps, {
+    ref: [forwardedRef],
+    props: [props, elementProps],
+  });
+
+  return <CompositeList elementsRef={cellsRefs}>{element}</CompositeList>;
+});
+
+export namespace CalendarGridHeaderRow {
+  export interface State {}
+
+  export interface Props extends BaseUIComponentProps<'div', State> {}
+}

packages/x-scheduler-headless/src/calendar-grid/index.parts.ts

@@ -1,12 +1,15 @@
 export { CalendarGridRoot as Root } from './root/CalendarGridRoot';
-export { CalendarGridScrollableContent as ScrollableContent } from './scrollable-content/CalendarGridScrollableContent';
+
+export { CalendarGridHeaderRow as HeaderRow } from './header-row/CalendarGridHeaderRow';
+export { CalendarGridHeaderCell as HeaderCell } from './header-cell/CalendarGridHeaderCell';
 
 export { CalendarGridDayRow as DayRow } from './day-row/CalendarGridDayRow';
 export { CalendarGridDayCell as DayCell } from './day-cell/CalendarGridDayCell';
 export { CalendarGridDayEvent as DayEvent } from './day-event/CalendarGridDayEvent';
 export { CalendarGridDayEventPlaceholder as DayEventPlaceholder } from './day-event-placeholder/CalendarGridDayEventPlaceholder';
 export { CalendarGridDayEventResizeHandler as DayEventResizeHandler } from './day-event-resize-handler/CalendarGridDayEventResizeHandler';
 
+export { CalendarGridTimeScrollableContent as TimeScrollableContent } from './time-scrollable-content/CalendarGridTimeScrollableContent';
 export { CalendarGridTimeColumn as TimeColumn } from './time-column/CalendarGridTimeColumn';
 export { CalendarGridTimeEvent as TimeEvent } from './time-event/CalendarGridTimeEvent';
 export { CalendarGridTimeEventPlaceholder as TimeEventPlaceholder } from './time-event-placeholder/CalendarGridTimeEventPlaceholder';