From 1e8c02e9410b86be08836882307ee20daaff2688 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 23 Jul 2025 17:40:39 -0700
Subject: [PATCH] fix: show calendar header in s2 dialog  (#8621)

* clear context

* add story for testing

* Revert "add story for testing"

This reverts commit 680ddcf4bf8366c57c4abf3e454a73f01ded19f7.

* add fix to range calendar
---
 packages/@react-spectrum/s2/src/Calendar.tsx  | 19 +++++++++++++------
 .../@react-spectrum/s2/src/RangeCalendar.tsx  | 19 +++++++++++++------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Calendar.tsx b/packages/@react-spectrum/s2/src/Calendar.tsx
index 31509068d9b..5b06b4dddc1 100644
--- a/packages/@react-spectrum/s2/src/Calendar.tsx
+++ b/packages/@react-spectrum/s2/src/Calendar.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {ActionButton, Header, Heading, pressScale} from './';
+import {ActionButton, Header, HeaderContext, Heading, HeadingContext, pressScale} from './';
 import {
   Calendar as AriaCalendar,
   CalendarCell as AriaCalendarCell,
@@ -27,6 +27,7 @@ import {
   CalendarStateContext,
   ContextValue,
   DateValue,
+  Provider,
   RangeCalendarState,
   RangeCalendarStateContext,
   Text
@@ -304,11 +305,17 @@ export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
       {({isInvalid, isDisabled}) => {
         return (
           <>
-            <Header styles={headerStyles}>
-              <CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
-              <CalendarHeading />
-              <CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
-            </Header>
+            <Provider
+              values={[
+                [HeaderContext, null],
+                [HeadingContext, null]
+              ]}>
+              <Header styles={headerStyles}>
+                <CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
+                <CalendarHeading />
+                <CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
+              </Header>
+            </Provider>
             <div
               className={style({
                 display: 'flex',
diff --git a/packages/@react-spectrum/s2/src/RangeCalendar.tsx b/packages/@react-spectrum/s2/src/RangeCalendar.tsx
index ce0f8d0e5c7..edde8fc179f 100644
--- a/packages/@react-spectrum/s2/src/RangeCalendar.tsx
+++ b/packages/@react-spectrum/s2/src/RangeCalendar.tsx
@@ -15,6 +15,7 @@ import {
   RangeCalendarProps as AriaRangeCalendarProps,
   ContextValue,
   DateValue,
+  Provider,
   Text
 } from 'react-aria-components';
 import {CalendarButton, CalendarGrid, CalendarHeading} from './Calendar';
@@ -23,7 +24,7 @@ import ChevronRightIcon from '../s2wf-icons/S2_Icon_ChevronRight_20_N.svg';
 import {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';
 import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {Header} from './';
+import {Header, HeaderContext, HeadingContext} from './';
 import {helpTextStyles} from './Field';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -85,11 +86,17 @@ export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
       {({isInvalid, isDisabled}) => {
         return (
           <>
-            <Header styles={headerStyles}>
-              <CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
-              <CalendarHeading />
-              <CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
-            </Header>
+            <Provider
+              values={[
+                [HeaderContext, null],
+                [HeadingContext, null]
+              ]}>
+              <Header styles={headerStyles}>
+                <CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
+                <CalendarHeading />
+                <CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
+              </Header>
+            </Provider>
             <div
               className={style({
                 display: 'flex',