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

@@ -312,7 +312,8 @@ export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
                 display: 'flex',
                 flexDirection: 'row',
                 gap: 24,
-                width: 'full'
+                width: 'full',
+                alignItems: 'start'
               })}>
               {Array.from({length: visibleMonths}).map((_, i) => (
                 <CalendarGrid months={i} key={i} />
@@ -454,18 +455,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 +484,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';
@@ -40,7 +41,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface DatePickerProps<T extends DateValue> extends
   Omit<AriaDatePickerProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
-  Pick<CalendarProps<T>, 'visibleMonths' | 'createCalendar'>,
+  Pick<CalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'isDateUnavailable'>,
   StyleProps,
   SpectrumLabelableProps,
   HelpTextProps {
@@ -49,7 +50,12 @@ export interface DatePickerProps<T extends DateValue> extends
      *
      * @default 'M'
      */
-    size?: 'S' | 'M' | 'L' | 'XL'
+    size?: 'S' | 'M' | 'L' | 'XL',
+    /**
+     * The maximum number of months to display at once in the calendar popover, if screen space permits.
+     * @default 1
+     */
+    maxVisibleMonths?: number
 }
 
 export const DatePickerContext = createContext<ContextValue<Partial<DatePickerProps<any>>, HTMLDivElement>>(null);
@@ -132,9 +138,11 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     UNSAFE_className,
     styles,
     placeholderValue,
-    visibleMonths,
+    maxVisibleMonths = 1,
     firstDayOfWeek,
     createCalendar,
+    pageBehavior,
+    isDateUnavailable,
     ...dateFieldProps
   } = props;
   let formContext = useContext(FormContext);
@@ -196,7 +204,12 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
               <CalendarButton isOpen={isOpen} size={size} setButtonHasFocus={setButtonHasFocus} />
             </FieldGroup>
             <CalendarPopover>
-              <Calendar visibleMonths={visibleMonths} createCalendar={createCalendar} firstDayOfWeek={firstDayOfWeek} />
+              <Calendar
+                visibleMonths={maxVisibleMonths}
+                createCalendar={createCalendar}
+                firstDayOfWeek={firstDayOfWeek}
+                isDateUnavailable={isDateUnavailable}
+                pageBehavior={pageBehavior} />
               {showTimeField && (
                 <div className={style({display: 'flex', gap: 16, contain: 'inline-size'})}>
                   <TimeField
@@ -241,7 +254,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/DateRangePicker.tsx

@@ -33,7 +33,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface DateRangePickerProps<T extends DateValue> extends
   Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
-  Pick<RangeCalendarProps<T>, 'visibleMonths' | 'createCalendar'>,
+  Pick<RangeCalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'isDateUnavailable'>,
   StyleProps,
   SpectrumLabelableProps,
   HelpTextProps {
@@ -42,7 +42,12 @@ export interface DateRangePickerProps<T extends DateValue> extends
      *
      * @default 'M'
      */
-    size?: 'S' | 'M' | 'L' | 'XL'
+    size?: 'S' | 'M' | 'L' | 'XL',
+    /**
+     * The maximum number of months to display at once in the calendar popover, if screen space permits.
+     * @default 1
+     */
+    maxVisibleMonths?: number
 }
 
 export const DateRangePickerContext = createContext<ContextValue<Partial<DateRangePickerProps<any>>, HTMLDivElement>>(null);
@@ -66,9 +71,11 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
     UNSAFE_className,
     styles,
     placeholderValue,
-    visibleMonths = 1,
+    maxVisibleMonths = 1,
     firstDayOfWeek,
     createCalendar,
+    pageBehavior,
+    isDateUnavailable,
     ...dateFieldProps
   } = props;
   let formContext = useContext(FormContext);
@@ -136,7 +143,12 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
               </div>
             </FieldGroup>
             <CalendarPopover>
-              <RangeCalendar visibleMonths={visibleMonths} createCalendar={createCalendar} firstDayOfWeek={firstDayOfWeek} />
+              <RangeCalendar
+                visibleMonths={maxVisibleMonths}
+                createCalendar={createCalendar}
+                firstDayOfWeek={firstDayOfWeek}
+                isDateUnavailable={isDateUnavailable}
+                pageBehavior={pageBehavior} />
               {showTimeField && (
                 <div className={style({display: 'flex', gap: 16, contain: 'inline-size'})}>
                   <TimeField

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

@@ -95,15 +95,16 @@ export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
                 display: 'flex',
                 flexDirection: 'row',
                 gap: 24,
-                width: 'full'
+                width: 'full',
+                alignItems: 'start'
               })}>
               {Array.from({length: visibleMonths}).map((_, i) => (
                 <CalendarGrid months={i} key={i} />
               ))}
             </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>
             )}
           </>