@react-spectrum/s2 0.10.0 → 0.10.1

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

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

package/style/__tests__/style-macro.test.js

@@ -37,25 +37,25 @@ describe('style-macro', () => {
     });
 
     expect(css).toMatchInlineSnapshot(`
-      "@layer _.a, _.b, _.c;
+"@layer _.a, _.b, _.c;
 
-      @layer _.b {
-        .Jbs92:first-child {
-          margin-top: 0.25rem;
-        }
-      }
+@layer _.b {
+  .Jbs11:first-child {
+    margin-top: 0.25rem;
+  }
+}
 
-      @layer _.c.p {
-        @media (min-width: 64rem) {
-          .Jbpv92:first-child {
-            margin-top: 0.5rem;
-          }
-        }
-      }
+@layer _.c.p {
+  @media (min-width: 64rem) {
+    .Jbpv11:first-child {
+      margin-top: 0.5rem;
+    }
+  }
+}
 
-      "
-    `);
-    expect(js).toMatchInlineSnapshot('" Jbs92 Jbpv92"');
+"
+`);
+    expect(js).toMatchInlineSnapshot('" Jbs11 Jbpv11"');
   });
 
   it('should support self references', () => {
@@ -66,60 +66,58 @@ describe('style-macro', () => {
     });
 
     expect(css).toMatchInlineSnapshot(`
-      "@layer _.a;
+"@layer _.a;
 
-      @layer _.a {
-        ._kc92 {
-          border-top-width: 2px;
-        }
+@layer _.a {
+  ._kc11 {
+    border-top-width: 2px;
+  }
 
 
-        .hc92 {
-          border-bottom-width: 2px;
-        }
+  .hc11 {
+    border-bottom-width: 2px;
+  }
 
 
-        .mCPFGYc92 {
-          border-inline-start-width: var(--m);
-        }
+  .mCPFGYc11 {
+    border-inline-start-width: var(--m);
+  }
 
 
-        .lc92 {
-          border-inline-end-width: 2px;
-        }
+  .lc11 {
+    border-inline-end-width: 2px;
+  }
 
 
-        .SMBFGYc92 {
-          padding-inline-start: var(--S);
-        }
+  .SMBFGYc11 {
+    padding-inline-start: var(--S);
+  }
 
 
-        .Rv92 {
-          padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
-        }
+  .Rv11 {
+    padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
+  }
 
 
-        .ZjUQgKd92 {
-          width: calc(200px - var(--m) - var(--S));
-        }
+  .ZjUQgKd11 {
+    width: calc(200px - var(--m) - var(--S));
+  }
 
 
-        .-m_-mc92 {
-          --m: 2px;
-        }
+  .-m_-mc11 {
+    --m: 2px;
+  }
 
 
-        .-S_-Sv92 {
-          --S: calc(var(--F, var(--M)) * 3 / 8);
-        }
-      }
+  .-S_-Sv11 {
+    --S: calc(var(--F, var(--M)) * 3 / 8);
+  }
+}
 
-      "
-    `);
+"
+`);
 
-    expect(js).toMatchInlineSnapshot(
-      '" _kc92 hc92 mCPFGYc92 lc92 SMBFGYc92 Rv92 ZjUQgKd92 -m_-mc92 -S_-Sv92"'
-    );
+    expect(js).toMatchInlineSnapshot('" _kc11 hc11 mCPFGYc11 lc11 SMBFGYc11 Rv11 ZjUQgKd11 -m_-mc11 -S_-Sv11"');
   });
 
   it('should support allowed overrides', () => {
@@ -136,9 +134,9 @@ describe('style-macro', () => {
       color: 'green-400'
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gw92 pg92"');
-    expect(overrides).toMatchInlineSnapshot('" g8tmWqb92 pHJ3AUd92"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb92 pg92"');
+    expect(js()).toMatchInlineSnapshot('"  gw11 pg11"');
+    expect(overrides).toMatchInlineSnapshot('" g8tmWqb11 pHJ3AUd11"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb11 pg11"');
   });
 
   it('should support allowed overrides for properties that expand into multiple', () => {
@@ -153,9 +151,9 @@ describe('style-macro', () => {
       translateX: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B92 __Ya92"');
-    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D92 __Ya92"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D92 __Ya92"');
+    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B11 __Ya11"');
+    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D11 __Ya11"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D11 __Ya11"');
   });
 
   it('should support allowed overrides for shorthands', () => {
@@ -170,9 +168,9 @@ describe('style-macro', () => {
       padding: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  Tk92 Qk92 Sk92 Rk92"');
-    expect(overrides).toMatchInlineSnapshot('" Tm92 Qm92 Sm92 Rm92"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm92 Qm92 Sm92 Rm92"');
+    expect(js()).toMatchInlineSnapshot('"  Tk11 Qk11 Sk11 Rk11"');
+    expect(overrides).toMatchInlineSnapshot('" Tm11 Qm11 Sm11 Rm11"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm11 Qm11 Sm11 Rm11"');
   });
 
   it("should support allowed overrides for values that aren't defined", () => {
@@ -187,9 +185,9 @@ describe('style-macro', () => {
       minWidth: 32
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gE92"');
-    expect(overrides).toMatchInlineSnapshot('" Nk92"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk92 gE92"');
+    expect(js()).toMatchInlineSnapshot('"  gE11"');
+    expect(overrides).toMatchInlineSnapshot('" Nk11"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk11 gE11"');
   });
 
   it('should support runtime conditions', () => {
@@ -207,45 +205,45 @@ describe('style-macro', () => {
     });
 
     expect(css).toMatchInlineSnapshot(`
-      "@layer _.a;
+"@layer _.a;
 
-      @layer _.a {
-        .gH92 {
-          background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
-        }
+@layer _.a {
+  .gH11 {
+    background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
+  }
 
 
-        .gF92 {
-          background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
-        }
+  .gF11 {
+    background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
+  }
 
 
-        .gE92 {
-          background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
-        }
+  .gE11 {
+    background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
+  }
 
 
-        .pt92 {
-          color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
-        }
+  .pt11 {
+    color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
+  }
 
 
-        .po92 {
-          color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
-        }
+  .po11 {
+    color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
+  }
 
 
-        .pm92 {
-          color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
-        }
-      }
+  .pm11 {
+    color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
+  }
+}
 
-      "
-    `);
+"
+`);
 
-    expect(js({})).toMatchInlineSnapshot('"  gH92 pt92"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF92 po92"');
-    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE92 pm92"');
+    expect(js({})).toMatchInlineSnapshot('"  gH11 pt11"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF11 po11"');
+    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE11 pm11"');
   });
 
   it('should support nested runtime conditions', () => {
@@ -261,37 +259,35 @@ describe('style-macro', () => {
     });
 
     expect(css).toMatchInlineSnapshot(`
-      "@layer _.a;
+"@layer _.a;
 
-      @layer _.a {
-        .gH92 {
-          background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
-        }
+@layer _.a {
+  .gH11 {
+    background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
+  }
 
 
-        .gF92 {
-          background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
-        }
+  .gF11 {
+    background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
+  }
 
 
-        .g_h92 {
-          background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
-        }
+  .g_h11 {
+    background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
+  }
 
 
-        .g392 {
-          background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
-        }
-      }
+  .g311 {
+    background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
+  }
+}
 
-      "
-    `);
-    expect(js({})).toMatchInlineSnapshot('"  gH92"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF92"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h92"');
-    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot(
-      '"  g392"'
-    );
+"
+`);
+    expect(js({})).toMatchInlineSnapshot('"  gH11"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF11"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h11"');
+    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('"  g311"');
   });
 
   it('should support variant runtime conditions', () => {
@@ -305,9 +301,9 @@ describe('style-macro', () => {
       }
     });
 
-    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY92"');
-    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe92"');
-    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw92"');
+    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY11"');
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe11"');
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw11"');
   });
 
   it('supports runtime conditions nested inside css conditions', () => {
@@ -321,28 +317,28 @@ describe('style-macro', () => {
     });
 
     expect(css).toMatchInlineSnapshot(`
-      "@layer _.a, _.b;
+"@layer _.a, _.b;
 
-      @layer _.b.l {
-        @media (forced-colors: active) {
-          .plb92 {
-            color: ButtonText;
-          }
-        }
+@layer _.b.l {
+  @media (forced-colors: active) {
+    .plb11 {
+      color: ButtonText;
+    }
+  }
 
 
-        @media (forced-colors: active) {
-          .ple92 {
-            color: HighlightText;
-          }
-        }
-      }
+  @media (forced-colors: active) {
+    .ple11 {
+      color: HighlightText;
+    }
+  }
+}
 
-      "
-    `);
+"
+`);
 
-    expect(js({})).toMatchInlineSnapshot('"  plb92"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple92"');
+    expect(js({})).toMatchInlineSnapshot('"  plb11"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple11"');
   });
 
   it('should expand shorthand properties to longhands', () => {
@@ -350,33 +346,33 @@ describe('style-macro', () => {
       padding: 24
     });
 
-    expect(js).toMatchInlineSnapshot('" Th92 Qh92 Sh92 Rh92"');
+    expect(js).toMatchInlineSnapshot('" Th11 Qh11 Sh11 Rh11"');
     expect(css).toMatchInlineSnapshot(`
-      "@layer _.a;
+"@layer _.a;
 
-      @layer _.a {
-        .Th92 {
-          padding-top: 24px;
-        }
+@layer _.a {
+  .Th11 {
+    padding-top: 24px;
+  }
 
 
-        .Qh92 {
-          padding-bottom: 24px;
-        }
+  .Qh11 {
+    padding-bottom: 24px;
+  }
 
 
-        .Sh92 {
-          padding-inline-start: 24px;
-        }
+  .Sh11 {
+    padding-inline-start: 24px;
+  }
 
 
-        .Rh92 {
-          padding-inline-end: 24px;
-        }
-      }
+  .Rh11 {
+    padding-inline-end: 24px;
+  }
+}
 
-      "
-    `);
+"
+`);
   });
 
   it('should support colors with opacity', () => {
@@ -385,16 +381,16 @@ describe('style-macro', () => {
     });
 
     expect(css).toMatchInlineSnapshot(`
-      "@layer _.a;
+"@layer _.a;
 
-      @layer _.a {
-        .gpQzfVb92 {
-          background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
-        }
-      }
+@layer _.a {
+  .gpQzfVb11 {
+    background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
+  }
+}
 
-      "
-    `);
+"
+`);
   });
 
   it('should support setting css variables', () => {
@@ -406,15 +402,15 @@ describe('style-macro', () => {
     });
 
     expect(css).toMatchInlineSnapshot(`
-      "@layer _.a;
+"@layer _.a;
 
-      @layer _.a {
-        .-FUeYm-gE92 {
-          --foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
-        }
-      }
+@layer _.a {
+  .-FUeYm-gE11 {
+    --foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
+  }
+}
 
-      "
-    `);
+"
+`);
   });
 });