chore: s2 date followup

packages/@react-spectrum/actiongroup/intl/ar-AE.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "المزيد من العناصر"
 }

packages/@react-spectrum/actiongroup/intl/bg-BG.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Още елементи"
 }

packages/@react-spectrum/actiongroup/intl/cs-CZ.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Další položky"
 }

packages/@react-spectrum/actiongroup/intl/da-DK.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Flere elementer"
 }

packages/@react-spectrum/actiongroup/intl/de-DE.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Weitere Elemente"
 }

packages/@react-spectrum/actiongroup/intl/el-GR.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Περισσότερα στοιχεία"
 }

packages/@react-spectrum/actiongroup/intl/es-ES.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Más elementos"
 }

packages/@react-spectrum/actiongroup/intl/et-EE.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Veel üksusi"
 }

packages/@react-spectrum/actiongroup/intl/fi-FI.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Lisää kohteita"
 }

packages/@react-spectrum/actiongroup/intl/fr-FR.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Plus d’éléments"
 }

packages/@react-spectrum/actiongroup/intl/he-IL.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "פריטים נוספים"
 }

packages/@react-spectrum/actiongroup/intl/hr-HR.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Više stavki"
 }

packages/@react-spectrum/actiongroup/intl/hu-HU.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "További elemek"
 }

packages/@react-spectrum/actiongroup/intl/it-IT.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Altri elementi"
 }

packages/@react-spectrum/actiongroup/intl/ja-JP.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "その他の項目"
 }

packages/@react-spectrum/actiongroup/intl/ko-KR.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "기타 항목"
 }

packages/@react-spectrum/actiongroup/intl/lt-LT.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Daugiau elementų"
 }

packages/@react-spectrum/actiongroup/intl/lv-LV.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Vairāk vienumu"
 }

packages/@react-spectrum/actiongroup/intl/nb-NO.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Flere elementer"
 }

packages/@react-spectrum/actiongroup/intl/nl-NL.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Meer items"
 }

packages/@react-spectrum/actiongroup/intl/pl-PL.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Więcej elementów"
 }

packages/@react-spectrum/actiongroup/intl/pt-BR.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Mais itens"
 }

packages/@react-spectrum/actiongroup/intl/pt-PT.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Mais artigos"
 }

packages/@react-spectrum/actiongroup/intl/ro-RO.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Mai multe articole"
 }

packages/@react-spectrum/actiongroup/intl/ru-RU.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Дополнительные элементы"
 }

packages/@react-spectrum/actiongroup/intl/sk-SK.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Ďalšie položky"
 }

packages/@react-spectrum/actiongroup/intl/sl-SI.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Več elementov"
 }

packages/@react-spectrum/actiongroup/intl/sr-SP.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Više stavki"
 }

packages/@react-spectrum/actiongroup/intl/sv-SE.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Fler artiklar"
 }

packages/@react-spectrum/actiongroup/intl/tr-TR.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Daha fazla öğe"
 }

packages/@react-spectrum/actiongroup/intl/uk-UA.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "Більше елементів"
 }

packages/@react-spectrum/actiongroup/intl/zh-CN.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "更多项目"
 }

packages/@react-spectrum/actiongroup/intl/zh-TW.json

@@ -1,3 +1,3 @@
 {
-  "more": "More items"
+  "more": "更多項目"
 }

packages/@react-spectrum/s2/src/Calendar.tsx

@@ -454,18 +454,17 @@ const CalendarCell = (props: Omit<CalendarCellProps, 'children'> & {firstDayOfWe
   let isFirstWeek = weekIndex === 0;
   let isFirstChild = dayIndex === 0;
   let isLastChild = dayIndex === 6;
-  let isNextDaySelected = state.isSelected(props.date.add({days: 1}));
   return (
     <AriaCalendarCell
       date={props.date}
       className={(renderProps) => cellStyles({...renderProps, isFirstChild, isLastChild, isFirstWeek})}>
-      {(renderProps) => <CalendarCellInner {...props} weekIndex={weekIndex} dayIndex={dayIndex} state={state} isRangeSelection={!!rangeCalendarStateContext} isNextDaySelected={isNextDaySelected} isLastChild={isLastChild} renderProps={renderProps} />}
+      {(renderProps) => <CalendarCellInner {...props} weekIndex={weekIndex} dayIndex={dayIndex} state={state} isRangeSelection={!!rangeCalendarStateContext} renderProps={renderProps} />}
     </AriaCalendarCell>
   );
 };
 
-const CalendarCellInner = (props: Omit<CalendarCellProps, 'children'> & {isNextDaySelected: boolean, isLastChild: boolean, isRangeSelection: boolean, state: CalendarState | RangeCalendarState, weekIndex: number, dayIndex: number, renderProps?: CalendarCellRenderProps, date: DateValue}): ReactElement => {
-  let {weekIndex, dayIndex, date, renderProps, state, isRangeSelection, isNextDaySelected, isLastChild} = props;
+const CalendarCellInner = (props: Omit<CalendarCellProps, 'children'> & {isRangeSelection: boolean, state: CalendarState | RangeCalendarState, weekIndex: number, dayIndex: number, renderProps?: CalendarCellRenderProps, date: DateValue}): ReactElement => {
+  let {weekIndex, dayIndex, date, renderProps, state, isRangeSelection} = props;
   let {getDatesInWeek} = state;
   let ref = useRef<HTMLDivElement>(null);
   let {isUnavailable, formattedDate, isSelected} = renderProps!;
@@ -484,13 +483,14 @@ const CalendarCellInner = (props: Omit<CalendarCellProps, 'children'> & {isNextD
     selectionSpan = dayIndex;
   }
 
+  let prevDay = date.subtract({days: 1});
+  let nextDay = date.add({days: 1});
   let isBackgroundStyleApplied = (
     isSelected
-    && (isLastChild || !isNextDaySelected)
     && isRangeSelection
-    && (state.isSelected(date.subtract({days: 1}))
-      || state.isSelected(date.add({days: 1}))
-    ));
+    && (state.isSelected(prevDay)
+      || (nextDay.month === date.month && state.isSelected(nextDay)))
+    );
 
   return (
     <div

packages/@react-spectrum/s2/src/DatePicker.tsx

@@ -19,6 +19,7 @@ import {
   DateValue,
   Dialog,
   FormContext,
+  OverlayTriggerStateContext,
   Provider,
   TimeValue
 } from 'react-aria-components';
@@ -241,7 +242,12 @@ export function CalendarPopover(props: PropsWithChildren): ReactElement {
         gap: 16
       })}>
       <Dialog>
-        {props.children}
+        <Provider
+          values={[
+            [OverlayTriggerStateContext, null]
+          ]}>
+          {props.children}
+        </Provider>
       </Dialog>
     </PopoverBase>
   );

packages/@react-spectrum/s2/src/RangeCalendar.tsx

@@ -103,7 +103,7 @@ export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
             </div>
             {isInvalid && (
               <Text slot="errorMessage" className={helpTextStyles({isInvalid, isDisabled, size: 'M'})}>
-                {errorMessage || stringFormatter.format('invalidSelection', {selectedCount: 2})}
+                {errorMessage || stringFormatter.format('calendar.invalidSelection', {selectedCount: 2})}
               </Text>
             )}
           </>

packages/@react-spectrum/s2/src/TimeField.tsx

@@ -21,13 +21,13 @@ import {createContext, forwardRef, ReactElement, Ref, useContext} from 'react';
 import {DateInput, DateInputContainer, InvalidIndicator} from './DateField';
 import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldGroup, FieldLabel, HelpText} from './Field';
-import {forwardRefType, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {style} from '../style' with {type: 'macro'};
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface TimeFieldProps<T extends TimeValue> extends
-  Omit<AriaTimeFieldProps<T>, 'children' | 'className' | 'style'>,
+  Omit<AriaTimeFieldProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
   StyleProps,
   SpectrumLabelableProps,
   HelpTextProps {

packages/@react-spectrum/s2/stories/DateField.stories.tsx

@@ -13,6 +13,7 @@
 import {Button, Content, ContextualHelp, DateField, Footer, Form, Heading, Link, Text} from '../src';
 import {CalendarSwitcher, categorizeArgTypes} from './utils';
 import type {Meta, StoryObj} from '@storybook/react';
+import {parseDate, toZoned} from '@internationalized/date';
 import {style} from '../style' with {type: 'macro'};
 
 const meta: Meta<typeof DateField> = {
@@ -47,6 +48,13 @@ export const Example: Story = {
   }
 };
 
+export const Zoned: Story = {
+  args: {
+    label: 'Birthday',
+    defaultValue: toZoned(parseDate('2020-02-03'), 'America/New_York')
+  }
+};
+
 export const AriaLabel: Story = {
   args: {
     'aria-label': 'Birthday'

packages/@react-spectrum/s2/stories/DatePicker.stories.tsx

@@ -14,6 +14,7 @@ import {Button, Content, ContextualHelp, DatePicker, Footer, Form, Heading, Link
 import {CalendarSwitcher, categorizeArgTypes} from './utils';
 import {fn} from '@storybook/test';
 import type {Meta, StoryObj} from '@storybook/react';
+import {parseDate, toZoned} from '@internationalized/date';
 import {style} from '../style' with {type: 'macro'};
 
 const meta: Meta<typeof DatePicker> = {
@@ -58,6 +59,13 @@ export const Example: Story = {
   }
 };
 
+export const Zoned: Story = {
+  args: {
+    label: 'Birthday',
+    defaultValue: toZoned(parseDate('2020-02-03'), 'America/New_York')
+  }
+};
+
 export const AriaLabel: Story = {
   args: {
     'aria-label': 'Birthday'

packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx

@@ -14,6 +14,7 @@ import {Button, Content, ContextualHelp, DateRangePicker, Footer, Form, Heading,
 import {CalendarSwitcher, categorizeArgTypes} from './utils';
 import {fn} from '@storybook/test';
 import type {Meta, StoryObj} from '@storybook/react';
+import {parseDate, toZoned} from '@internationalized/date';
 import {style} from '../style' with {type: 'macro'};
 
 const meta: Meta<typeof DateRangePicker> = {
@@ -58,6 +59,13 @@ export const Example: Story = {
   }
 };
 
+export const Zoned: Story = {
+  args: {
+    label: 'Reservation dates',
+    defaultValue: {start: toZoned(parseDate('2020-02-03'), 'America/New_York'), end: toZoned(parseDate('2020-02-05'), 'America/Los_Angeles')}
+  }
+};
+
 export const AriaLabel: Story = {
   args: {
     'aria-label': 'Reservation dates'

packages/react-aria-components/src/Calendar.tsx

@@ -387,6 +387,7 @@ export const CalendarGrid = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
         {...mergeProps(DOMProps, gridProps)}
         ref={ref}
         style={props.style}
+        cellPadding={0}
         className={props.className ?? 'react-aria-CalendarGrid'}>
         {typeof props.children !== 'function'
           ? props.children
@@ -507,7 +508,6 @@ export const CalendarCell = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
   let state = calendarState ?? rangeCalendarState!;
   let {startDate: currentMonth} = useContext(InternalCalendarGridContext) ?? {startDate: state.visibleRange.start};
   let isOutsideMonth = !isSameMonth(currentMonth, date);
-  // TODO: check api with team, this seemed useful though
   let istoday = isToday(date, state.timeZone);
 
   let buttonRef = useRef<HTMLDivElement>(null);

packages/react-aria-components/src/DatePicker.tsx

@@ -74,7 +74,7 @@ export const DatePickerStateContext = createContext<DatePickerState | null>(null
 export const DateRangePickerStateContext = createContext<DateRangePickerState | null>(null);
 
 // Contexts to clear inside the popover.
-const CLEAR_CONTEXTS = [GroupContext, ButtonContext, LabelContext, TextContext, OverlayTriggerStateContext];
+const CLEAR_CONTEXTS = [GroupContext, ButtonContext, LabelContext, TextContext];
 
 /**
  * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
@@ -173,7 +173,7 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
         data-focus-visible={isFocusVisible || undefined}
         data-disabled={props.isDisabled || undefined}
         data-open={state.isOpen || undefined} />
-      <HiddenDateInput 
+      <HiddenDateInput
         autoComplete={props.autoComplete}
         name={props.name}
         isDisabled={props.isDisabled}

packages/react-aria-components/stories/Autocomplete.stories.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import styles from '../example/index.css';
 import {useAsyncList, useListData, useTreeData} from 'react-stately';
 import {useFilter} from 'react-aria';
+import './styles.css';
 
 export default {
   title: 'React Aria Components/Autocomplete',