@react-stately/datepicker 3.12.0 → 3.14.0

package/src/placeholders.ts

@@ -57,7 +57,7 @@ const placeholders = new LocalizedStringDictionary({
   ia: {year: 'aaaa', month: 'mm', day: 'dd'},
   id: {year: 'tttt', month: 'bb', day: 'hh'},
   it: {year: 'aaaa', month: 'mm', day: 'gg'},
-  ja: {year: ' 年 ', month: '月', day: '日'},
+  ja: {year: '年', month: '月', day: '日'},
   ka: {year: 'წწწწ', month: 'თთ', day: 'რრ'},
   kk: {year: 'жжжж', month: 'аа', day: 'кк'},
   kn: {year: 'ವವವವ', month: 'ಮಿಮೀ', day: 'ದಿದಿ'},
@@ -93,7 +93,7 @@ const placeholders = new LocalizedStringDictionary({
   'zh-TW': {year: '年', month: '月', day: '日'}
 }, 'en');
 
-export function getPlaceholder(field: string, value: string, locale: string) {
+export function getPlaceholder(field: string, value: string, locale: string): string {
   // Use the actual placeholder value for the era and day period fields.
   if (field === 'era' || field === 'dayPeriod') {
     return value;

package/src/useDateFieldState.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Calendar, DateFormatter, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, toCalendar} from '@internationalized/date';
+import {Calendar, CalendarIdentifier, DateFormatter, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, isEqualCalendar, toCalendar} from '@internationalized/date';
 import {convertValue, createPlaceholderDate, FieldOptions, FormatterOptions, getFormatOptions, getValidationResult, useDefaultProps} from './utils';
 import {DatePickerProps, DateValue, Granularity, MappedDateValue} from '@react-types/datepicker';
 import {FormValidationState, useFormValidationState} from '@react-stately/form';
@@ -137,7 +137,7 @@ export interface DateFieldStateOptions<T extends DateValue = DateValue> extends
    * `@internationalized/date` package, or manually implemented to include support for
    * only certain calendars.
    */
-  createCalendar: (name: string) => Calendar
+  createCalendar: (name: CalendarIdentifier) => Calendar
 }
 
 /**
@@ -168,7 +168,7 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   }
 
   let defaultFormatter = useMemo(() => new DateFormatter(locale), [locale]);
-  let calendar = useMemo(() => createCalendar(defaultFormatter.resolvedOptions().calendar), [createCalendar, defaultFormatter]);
+  let calendar = useMemo(() => createCalendar(defaultFormatter.resolvedOptions().calendar as CalendarIdentifier), [createCalendar, defaultFormatter]);
 
   let [value, setDate] = useControlledState<DateValue | null, MappedDateValue<T> | null>(
     props.value,
@@ -217,10 +217,10 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   let clearedSegment = useRef<string | null>(null);
 
   // Reset placeholder when calendar changes
-  let lastCalendarIdentifier = useRef(calendar.identifier);
+  let lastCalendar = useRef(calendar);
   useEffect(() => {
-    if (calendar.identifier !== lastCalendarIdentifier.current) {
-      lastCalendarIdentifier.current = calendar.identifier;
+    if (!isEqualCalendar(calendar, lastCalendar.current)) {
+      lastCalendar.current = calendar;
       setPlaceholderDate(placeholder =>
         Object.keys(validSegments).length > 0
           ? toCalendar(placeholder, calendar)
@@ -268,26 +268,9 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   };
 
   let dateValue = useMemo(() => displayValue.toDate(timeZone), [displayValue, timeZone]);
-  let segments = useMemo(() =>
-    dateFormatter.formatToParts(dateValue)
-      .map(segment => {
-        let isEditable = EDITABLE_SEGMENTS[segment.type];
-        if (segment.type === 'era' && calendar.getEras().length === 1) {
-          isEditable = false;
-        }
-
-        let isPlaceholder = EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type];
-        let placeholder = EDITABLE_SEGMENTS[segment.type] ? getPlaceholder(segment.type, segment.value, locale) : null;
-        return {
-          type: TYPE_MAPPING[segment.type] || segment.type,
-          text: isPlaceholder ? placeholder : segment.value,
-          ...getSegmentLimits(displayValue, segment.type, resolvedOptions),
-          isPlaceholder,
-          placeholder,
-          isEditable
-        } as DateSegment;
-      })
-  , [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale]);
+  let segments = useMemo(() => 
+    processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity), 
+    [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity]);
 
   // When the era field appears, mark it valid if the year field is already valid.
   // If the era field disappears, remove it from the valid segments.
@@ -399,6 +382,8 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
         } else if (!isPM && shouldBePM) {
           value = displayValue.set({hour: displayValue.hour + 12});
         }
+      } else if (part === 'hour' && 'hour' in displayValue && displayValue.hour >= 12 && validSegments.dayPeriod) {
+        value = displayValue.set({hour: placeholder['hour'] + 12});
       } else if (part in displayValue) {
         value = displayValue.set({[part]: placeholder[part]});
       }
@@ -423,6 +408,73 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   };
 }
 
+function processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity) : DateSegment[] {
+  let timeValue = ['hour', 'minute', 'second'];
+  let segments = dateFormatter.formatToParts(dateValue);
+  let processedSegments: DateSegment[] = [];
+  for (let segment of segments) {
+    let isEditable = EDITABLE_SEGMENTS[segment.type];
+    if (segment.type === 'era' && calendar.getEras().length === 1) {
+      isEditable = false;
+    }
+
+    let isPlaceholder = EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type];
+    let placeholder = EDITABLE_SEGMENTS[segment.type] ? getPlaceholder(segment.type, segment.value, locale) : null;
+
+    let dateSegment = {
+      type: TYPE_MAPPING[segment.type] || segment.type,
+      text: isPlaceholder ? placeholder : segment.value,
+      ...getSegmentLimits(displayValue, segment.type, resolvedOptions),
+      isPlaceholder,
+      placeholder,
+      isEditable
+    } as DateSegment;
+
+    // There is an issue in RTL languages where time fields render (minute:hour) instead of (hour:minute).
+    // To force an LTR direction on the time field since, we wrap the time segments in LRI (left-to-right) isolate unicode. See https://www.w3.org/International/questions/qa-bidi-unicode-controls.
+    // These unicode characters will be added to the array of processed segments as literals and will mark the start and end of the embedded direction change. 
+    if (segment.type === 'hour') {
+      // This marks the start of the embedded direction change. 
+      processedSegments.push({
+        type: 'literal',
+        text: '\u2066',
+        ...getSegmentLimits(displayValue, 'literal', resolvedOptions),
+        isPlaceholder: false,
+        placeholder: '',
+        isEditable: false
+      });
+      processedSegments.push(dateSegment);
+      // This marks the end of the embedded direction change in the case that the granularity it set to "hour".
+      if (segment.type === granularity) {
+        processedSegments.push({
+          type: 'literal',
+          text: '\u2069',
+          ...getSegmentLimits(displayValue, 'literal', resolvedOptions),
+          isPlaceholder: false,
+          placeholder: '',
+          isEditable: false
+        });
+      }
+    } else if (timeValue.includes(segment.type) && segment.type === granularity) {
+      processedSegments.push(dateSegment);
+      // This marks the end of the embedded direction change.
+      processedSegments.push({
+        type: 'literal',
+        text: '\u2069',
+        ...getSegmentLimits(displayValue, 'literal', resolvedOptions),
+        isPlaceholder: false,
+        placeholder: '',
+        isEditable: false
+      });
+    } else {
+      // We only want to "wrap" the unicode around segments that are hour, minute, or second. If they aren't, just process as normal. 
+      processedSegments.push(dateSegment);
+    }
+  }
+
+  return processedSegments;
+}
+
 function getSegmentLimits(date: DateValue, type: string, options: Intl.ResolvedDateTimeFormatOptions) {
   switch (type) {
     case 'era': {

package/src/utils.ts

@@ -86,7 +86,7 @@ export function getRangeValidationResult(
   maxValue: DateValue | null | undefined,
   isDateUnavailable: ((v: DateValue) => boolean) | undefined,
   options: FormatterOptions
-) {
+): ValidationResult {
   let startValidation = getValidationResult(
     value?.start ?? null,
     minValue,