@react-aria/datepicker 3.0.0-nightly.1662 → 3.0.0-nightly.1673

package/src/useDateField.ts

@@ -21,7 +21,7 @@ import {RefObject, useEffect, useMemo, useRef} from 'react';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
-import {useMessageFormatter} from '@react-aria/i18n';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 // Allows this hook to also be used with TimeField
 export interface AriaDateFieldProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {}
@@ -69,10 +69,10 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldProps<T>,
     }
   });
 
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let message = state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription';
   let field = state.maxGranularity === 'hour' ? 'time' : 'date';
-  let description = state.value ? formatMessage(message, {[field]: state.formatValue({month: 'long'})}) : '';
+  let description = state.value ? stringFormatter.format(message, {[field]: state.formatValue({month: 'long'})}) : '';
   let descProps = useDescription(description);
 
   // If within a date picker or date range picker, the date field will have role="presentation" and an aria-describedby

package/src/useDatePicker.ts

@@ -24,7 +24,7 @@ import {RefObject, useMemo} from 'react';
 import {roleSymbol} from './useDateField';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
-import {useLocale, useMessageFormatter} from '@react-aria/i18n';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface DatePickerAria {
   /** Props for the date picker's visible label element, if any. */
@@ -52,7 +52,7 @@ export interface DatePickerAria {
 export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<Element>): DatePickerAria {
   let buttonId = useId();
   let dialogId = useId();
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
@@ -65,7 +65,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
 
   let {locale} = useLocale();
   let date = state.formatValue(locale, {month: 'long'});
-  let description = date ? formatMessage('selectedDateDescription', {date}) : '';
+  let description = date ? stringFormatter.format('selectedDateDescription', {date}) : '';
   let descProps = useDescription(description);
   let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;
   let domProps = filterDOMProps(props);
@@ -108,7 +108,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       ...descProps,
       id: buttonId,
       'aria-haspopup': 'dialog',
-      'aria-label': formatMessage('calendar'),
+      'aria-label': stringFormatter.format('calendar'),
       'aria-labelledby': `${labelledBy} ${buttonId}`,
       'aria-describedby': ariaDescribedBy,
       onPress: () => state.setOpen(true)

package/src/useDateRangePicker.ts

@@ -24,7 +24,7 @@ import {RangeCalendarProps} from '@react-types/calendar';
 import {RefObject, useMemo} from 'react';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
-import {useLocale, useMessageFormatter} from '@react-aria/i18n';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface DateRangePickerAria {
   /** Props for the date range picker's visible label element, if any. */
@@ -53,7 +53,7 @@ export interface DateRangePickerAria {
  * users to enter or select a date and time range.
  */
 export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<Element>): DateRangePickerAria {
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     labelElementType: 'span'
@@ -63,16 +63,16 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
 
   let {locale} = useLocale();
   let range = state.formatValue(locale, {month: 'long'});
-  let description = range ? formatMessage('selectedRangeDescription', {startDate: range.start, endDate: range.end}) : '';
+  let description = range ? stringFormatter.format('selectedRangeDescription', {startDate: range.start, endDate: range.end}) : '';
   let descProps = useDescription(description);
 
   let startFieldProps = {
-    'aria-label': formatMessage('startDate'),
+    'aria-label': stringFormatter.format('startDate'),
     'aria-labelledby': labelledBy
   };
 
   let endFieldProps = {
-    'aria-label': formatMessage('endDate'),
+    'aria-label': stringFormatter.format('endDate'),
     'aria-labelledby': labelledBy
   };
 
@@ -121,7 +121,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       ...descProps,
       id: buttonId,
       'aria-haspopup': 'dialog',
-      'aria-label': formatMessage('calendar'),
+      'aria-label': stringFormatter.format('calendar'),
       'aria-labelledby': `${labelledBy} ${buttonId}`,
       'aria-describedby': ariaDescribedBy,
       onPress: () => state.setOpen(true)

package/src/useDisplayNames.ts

@@ -12,7 +12,7 @@
 
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {MessageDictionary} from '@internationalized/message';
+import {LocalizedStringDictionary} from '@internationalized/string';
 import {useLocale} from '@react-aria/i18n';
 import {useMemo} from 'react';
 
@@ -38,11 +38,11 @@ export function useDisplayNames(): DisplayNames {
 
 class DisplayNamesPolyfill implements DisplayNames {
   private locale: string;
-  private dictionary: MessageDictionary;
+  private dictionary: LocalizedStringDictionary<Field, string>;
 
   constructor(locale: string) {
     this.locale = locale;
-    this.dictionary = new MessageDictionary(intlMessages);
+    this.dictionary = new LocalizedStringDictionary<Field, string>(intlMessages);
   }
 
   of(field: Field): string {