feat(react-headless-components-preview): add headless Calendar by dmytrokirpa · Pull Request #36630 · microsoft/fluentui

Dmytro Kirpa (dmytrokirpa) · 2026-08-25T15:44:51Z

Overview

This is PR 3 of 3 in a stack that splits up #36618 ("feat: add non-compat and headless versions for Calendar") into smaller, independently reviewable pieces:

chore: scaffold react-calendar-preview package #36628 — scaffold the new @fluentui/react-calendar-preview package
feat(react-calendar-preview): implement Calendar, month/year pickers, and day grid components #36629 — implement the Calendar component family in react-calendar-preview
feat(react-headless-components-preview): add headless Calendar #36630 (this PR) — add a headless Calendar to react-headless-components-preview

Stack order: master → calendar-preview-scaffold → calendar-preview-impl → headless-calendar. This PR is based on #36629 and only contains the diff on top of it (the headless module).

What's in this PR

A new calendar entry point (@fluentui/react-headless-components-preview/calendar) that re-exports the *Base_unstable/context-value hooks and types from @fluentui/react-calendar-preview (added in #36629), following the existing headless-components pattern used by other components in this package:

library/src/calendar.ts public entry point + library/src/components/Calendar/** re-exports
library/package.json — new @fluentui/react-calendar-preview dependency and ./calendar export map entry
Storybook stories for the headless usage
A beachball change file

Previous Behavior

N/A — new headless entry point, and react-calendar-preview (added in #36629) had no headless consumer yet.

New Behavior

Consumers can import unstyled Calendar base hooks from @fluentui/react-headless-components-preview/calendar to build a fully custom-styled calendar, matching the pattern of the other headless components in this package.

Related Issue(s)

Split from #36618.

github-actions · 2026-08-25T15:58:15Z

Pull request demo site: URL

Copilot

Pull request overview

Adds a headless Calendar entry point backed by react-calendar-preview base hooks, including composable subcomponents, tests, stories, package exports, and release metadata.

Changes:

Adds unstyled Calendar day, month, year, row, and cell components.
Uses focusgroup for keyboard navigation and exposes state through data attributes.
Adds documentation, bundle tracking, package dependency/export metadata, and tests.

Reviewed changes

Copilot reviewed 74 out of 75 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
`change/@fluentui-react-headless-components-preview-aad797e2-6437-4de8-ba5b-ba9ca350c60b.json`	Adds the release change entry.
`packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js`	Includes Calendar in bundle tracking.
`packages/react-components/react-headless-components-preview/library/etc/calendar.api.md`	Records the generated Calendar API.
`packages/react-components/react-headless-components-preview/library/package.json`	Adds the dependency and subpath export.
`packages/react-components/react-headless-components-preview/library/src/calendar.ts`	Defines the public Calendar entry point.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/Calendar.test.tsx`	Tests root Calendar behavior.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/Calendar.tsx`	Implements the headless Calendar component.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/Calendar.types.ts`	Defines headless Calendar contracts.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDay/CalendarDay.test.tsx`	Tests the day picker.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDay/CalendarDay.tsx`	Implements CalendarDay.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDay/CalendarDay.types.ts`	Re-exports day-picker types.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDay/index.ts`	Exports CalendarDay APIs.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDay/renderCalendarDay.ts`	Re-exports day rendering.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDay/useCalendarDay.tsx`	Builds day-picker state and navigation.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridCell/CalendarDayGridCell.tsx`	Implements day cells.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridCell/CalendarDayGridCell.types.ts`	Re-exports day-cell types.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridCell/index.ts`	Exports day-cell APIs.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridCell/renderCalendarDayGridCell.ts`	Re-exports day-cell rendering.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridCell/useCalendarDayGridCell.ts`	Re-exports day-cell state logic.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridHeaderCell/CalendarDayGridHeaderCell.tsx`	Implements weekday header cells.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridHeaderCell/CalendarDayGridHeaderCell.types.ts`	Defines header-cell types.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridHeaderCell/index.ts`	Exports header-cell APIs.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridHeaderCell/renderCalendarDayGridHeaderCell.ts`	Re-exports header-cell rendering.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridHeaderCell/useCalendarDayGridHeaderCell.ts`	Re-exports the header-cell base hook.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridHeaderRow/CalendarDayGridHeaderRow.tsx`	Implements the weekday header row.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridHeaderRow/CalendarDayGridHeaderRow.types.ts`	Defines header-row types.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridHeaderRow/index.ts`	Exports header-row APIs.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridHeaderRow/renderCalendarDayGridHeaderRow.ts`	Re-exports header-row rendering.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridHeaderRow/useCalendarDayGridHeaderRow.tsx`	Builds weekday header rows.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridRow/CalendarDayGridRow.tsx`	Implements day-grid rows.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridRow/CalendarDayGridRow.types.ts`	Defines day-row types.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridRow/index.ts`	Exports day-row APIs.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridRow/renderCalendarDayGridRow.ts`	Re-exports day-row rendering.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarDayGridRow/useCalendarDayGridRow.tsx`	Builds day-grid rows.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonth/CalendarMonth.test.tsx`	Tests the month picker.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonth/CalendarMonth.tsx`	Implements CalendarMonth.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonth/CalendarMonth.types.ts`	Defines headless month-picker contracts.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonth/index.ts`	Exports CalendarMonth APIs.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonth/renderCalendarMonth.ts`	Re-exports month rendering.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonth/useCalendarMonth.tsx`	Builds month-picker state.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonthGridCell/CalendarMonthGridCell.tsx`	Implements month cells.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonthGridCell/CalendarMonthGridCell.types.ts`	Re-exports month-cell types.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonthGridCell/index.ts`	Exports month-cell APIs.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonthGridCell/renderCalendarMonthGridCell.ts`	Re-exports month-cell rendering.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonthGridCell/useCalendarMonthGridCell.ts`	Re-exports month-cell state logic.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonthGridRow/CalendarMonthGridRow.tsx`	Implements month-grid rows.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonthGridRow/CalendarMonthGridRow.types.ts`	Defines month-row types.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonthGridRow/index.ts`	Exports month-row APIs.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonthGridRow/renderCalendarMonthGridRow.ts`	Re-exports month-row rendering.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarMonthGridRow/useCalendarMonthGridRow.ts`	Builds month-grid rows.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYear/CalendarYear.test.tsx`	Tests the year picker.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYear/CalendarYear.tsx`	Implements CalendarYear.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYear/CalendarYear.types.ts`	Defines headless year-picker contracts.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYear/index.ts`	Exports CalendarYear APIs.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYear/renderCalendarYear.ts`	Re-exports year rendering.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYear/useCalendarYear.tsx`	Builds year-picker state.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYearGridCell/CalendarYearGridCell.tsx`	Implements year cells.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYearGridCell/CalendarYearGridCell.types.ts`	Re-exports year-cell types.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYearGridCell/index.ts`	Exports year-cell APIs.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYearGridCell/renderCalendarYearGridCell.ts`	Re-exports year-cell rendering.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYearGridCell/useCalendarYearGridCell.ts`	Re-exports year-cell state logic.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYearGridRow/CalendarYearGridRow.tsx`	Implements year-grid rows.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYearGridRow/CalendarYearGridRow.types.ts`	Defines year-row types.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYearGridRow/index.ts`	Exports year-row APIs.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYearGridRow/renderCalendarYearGridRow.ts`	Re-exports year-row rendering.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/CalendarYearGridRow/useCalendarYearGridRow.ts`	Builds year-grid rows.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/index.ts`	Aggregates internal Calendar exports.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/renderCalendar.ts`	Re-exports Calendar rendering.
`packages/react-components/react-headless-components-preview/library/src/components/Calendar/useCalendar.ts`	Composes headless picker slots.
`packages/react-components/react-headless-components-preview/stories/src/Calendar/CalendarDefault.stories.tsx`	Demonstrates styled headless usage.
`packages/react-components/react-headless-components-preview/stories/src/Calendar/CalendarDescription.md`	Documents behavior and state attributes.
`packages/react-components/react-headless-components-preview/stories/src/Calendar/calendar.module.css`	Styles the Calendar example.
`packages/react-components/react-headless-components-preview/stories/src/Calendar/index.stories.tsx`	Registers Calendar Storybook documentation.
`packages/react-components/react-headless-components-preview/stories/src/shared/browserSupportNotice.ts`	Flags Calendar’s focusgroup dependency.
`yarn.lock`	Locks the new workspace dependency.

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+  // `rowflow` matches the styled layer's `grid-linear` Tabster axis: moving past the end of a week
+  // continues into the next one.
+  // eslint-disable-next-line react-hooks/immutability
+  state.grid.focusgroup = 'grid manual rowflow';


+  const state = useCalendarMonthGridRowBase_unstable(props, ref);
+
+  // eslint-disable-next-line react-hooks/immutability
+  state.root.children ??= state.cells.map(month =>


+  const state = useCalendarYearGridRowBase_unstable(props, ref);
+
+  // eslint-disable-next-line react-hooks/immutability
+  state.root.children ??= state.cells.map(cell => React.createElement(CalendarYearGridCell, { key: cell.year, cell }));


+  CalendarMonth,
+  CalendarMonthGridCell,
+  CalendarMonthGridRow,
+  CalendarDayGridHeaderRow,


+export type {
+  CalendarDayGridRowProps,
+  CalendarDayGridRowSlots,
+  CalendarDayGridRowState,
+} from '@fluentui/react-calendar-preview';


+export type {
+  CalendarDayGridHeaderRowProps,
+  CalendarDayGridHeaderRowSlots,
+  CalendarDayGridHeaderRowState,
+  CalendarWeekDayLabel,


+export type {
+  CalendarMonthGridRowProps,
+  CalendarMonthGridRowSlots,
+  CalendarMonthGridRowState,
+} from '@fluentui/react-calendar-preview';


+export type {
+  CalendarYearGridRowProps,
+  CalendarYearGridRowSlots,
+  CalendarYearGridRowState,
+} from '@fluentui/react-calendar-preview';


+  it('drives roving focus with focusgroup rather than Tabster', () => {
+    const { container } = render(<Calendar value={new Date(2020, 8, 18)} />);
+
+    const dayGrid = container.querySelector('table[role="grid"]')!;
+    expect(dayGrid.getAttribute('focusgroup')).toBe('grid manual rowflow');


+export type {
+  CalendarDayGridHeaderCellProps,
+  CalendarDayGridHeaderCellSlots,
+  CalendarDayGridHeaderCellState,
+} from '@fluentui/react-calendar-preview';


microsoft-github-policy-service Bot added the PR: API Modified label Aug 25, 2026

This was referenced Aug 25, 2026

chore: scaffold react-calendar-preview package #36628

Open

feat(react-calendar-preview): implement Calendar, month/year pickers, and day grid components #36629

Open

Dmytro Kirpa (dmytrokirpa) force-pushed the headless-calendar branch from 8c9219a to 9e62460 Compare August 25, 2026 20:08

Dmytro Kirpa (dmytrokirpa) force-pushed the headless-calendar branch from 9e62460 to 84ffa9e Compare August 29, 2026 08:52

Dmytro Kirpa (dmytrokirpa) marked this pull request as ready for review August 29, 2026 08:55

Dmytro Kirpa (dmytrokirpa) requested review from a team as code owners August 29, 2026 08:55

Dmytro Kirpa (dmytrokirpa) requested a balanced review from Copilot August 29, 2026 08:57

Copilot started reviewing on behalf of Dmytro Kirpa (dmytrokirpa) August 29, 2026 08:57 View session

Copilot AI reviewed Aug 29, 2026

View reviewed changes

Dmytro Kirpa (dmytrokirpa) force-pushed the headless-calendar branch from 84ffa9e to 743535e Compare August 29, 2026 14:26

Dmytro Kirpa (dmytrokirpa) force-pushed the headless-calendar branch from 743535e to 2e2f5e6 Compare August 29, 2026 14:51

feat(react-headless-components-preview): add headless Calendar

4df2423

Dmytro Kirpa (dmytrokirpa) force-pushed the headless-calendar branch from 2e2f5e6 to 4df2423 Compare August 29, 2026 15:28

Navigation Menu

Uh oh!

feat(react-headless-components-preview): add headless Calendar - #36630

feat(react-headless-components-preview): add headless Calendar#36630
Dmytro Kirpa (dmytrokirpa) wants to merge 1 commit into
calendar-preview-implfrom
headless-calendar

Dmytro Kirpa (dmytrokirpa) commented Aug 25, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 25, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Dmytro Kirpa (dmytrokirpa) commented Aug 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

What's in this PR

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

github-actions Bot commented Aug 25, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Dmytro Kirpa (dmytrokirpa) commented Aug 25, 2026 •

edited

Loading