fix: show calendar header in s2 dialog (#8621)

* clear context

* add story for testing

* Revert "add story for testing"

This reverts commit 680ddcf.

* add fix to range calendar

Author: yihuiliao

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',

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',