Initial DatePicker + TimeField implementation (#2220)

* Fix updating isFocused in useFocusRing

* Add useEvent hook and use it in useScrollWheel

* Improved keyboard event handling

* Improve styling and add granularity option

* Better support for manipulating eras and time

* Various i18n and UI fixes

* Handle timezones

* Improve software keyboard support

* Add hideTimeZone and placeholderValue props

* Add comparison functions etc.

* Refactoring. Add builtin label support, etc.

* Fix existing tests

* Fix react 17

* Fix DST bug

* Fix issues on mobile

Co-authored-by: Danni <[email protected]>

Author: devongovett

packages/@adobe/spectrum-css-temp/components/inputgroup/index.css

@@ -161,7 +161,7 @@ governing permissions and limitations under the License.
     }
   }
   .spectrum-Datepicker-endField {
-    .spectrum-InputGroup-field {
+    .spectrum-InputGroup-input {
       flex: 1;
       border-inline-start: 0;
       border-radius: 0;

packages/@internationalized/date/src/CalendarDate.ts

@@ -10,17 +10,25 @@
  * governing permissions and limitations under the License.
  */
 
-import {Calendar} from './types';
+import {add, addTime, addZoned, cycleDate, cycleTime, cycleZoned, set, setTime, setZoned, subtract, subtractTime, subtractZoned} from './manipulation';
+import {Calendar, CycleOptions, CycleTimeOptions, DateField, DateFields, Disambiguation, Duration, OverflowBehavior, TimeField, TimeFields} from './types';
+import {compareDate, compareTime} from './queries';
+import {dateTimeToString, dateToString, timeToString, zonedDateTimeToString} from './string';
 import {GregorianCalendar} from './calendars/GregorianCalendar';
+import {toCalendarDateTime, toDate, toZoned, zonedToDate} from './conversion';
 
 function shiftArgs(args: any[]) {
   let calendar: Calendar = typeof args[0] === 'object'
     ? args.shift()
     : new GregorianCalendar();
 
-  let era = typeof args[0] === 'string'
-    ? args.shift()
-    : calendar.getCurrentEra();
+  let era: string;
+  if (typeof args[0] === 'string') {
+    era = args.shift();
+  } else {
+    let eras = calendar.getEras();
+    era = eras[eras.length - 1];
+  }
 
   let year = args.shift();
   let month = args.shift();
@@ -51,6 +59,42 @@ export class CalendarDate {
       this.calendar.balanceDate(this);
     }
   }
+
+  copy(): CalendarDate {
+    if (this.era) {
+      return new CalendarDate(this.calendar, this.era, this.year, this.month, this.day);
+    } else {
+      return new CalendarDate(this.calendar, this.year, this.month, this.day);
+    }
+  }
+
+  add(duration: Duration) {
+    return add(this, duration);
+  }
+
+  subtract(duration: Duration) {
+    return subtract(this, duration);
+  }
+
+  set(fields: DateFields, behavior?: OverflowBehavior) {
+    return set(this, fields, behavior);
+  }
+
+  cycle(field: DateField, amount: number, options?: CycleOptions) {
+    return cycleDate(this, field, amount, options);
+  }
+
+  toDate(timeZone: string) {
+    return toDate(this, timeZone);
+  }
+
+  toString() {
+    return dateToString(this);
+  }
+
+  compare(b: CalendarDate) {
+    return compareDate(this, b);
+  }
 }
 
 export class Time {
@@ -60,6 +104,34 @@ export class Time {
     public readonly second: number = 0,
     public readonly millisecond: number = 0
   ) {}
+
+  copy(): Time {
+    return new Time(this.hour, this.minute, this.second, this.millisecond);
+  }
+
+  add(duration: Duration) {
+    return addTime(this, duration);
+  }
+
+  subtract(duration: Duration) {
+    return subtractTime(this, duration);
+  }
+
+  set(fields: TimeFields, behavior?: OverflowBehavior) {
+    return setTime(this, fields, behavior);
+  }
+
+  cycle(field: TimeField, amount: number, options?: CycleTimeOptions) {
+    return cycleTime(this, field, amount, options);
+  }
+
+  toString() {
+    return timeToString(this);
+  }
+
+  compare(b: Time) {
+    return compareTime(this, b);
+  }
 }
 
 export class CalendarDateTime extends CalendarDate {
@@ -79,4 +151,99 @@ export class CalendarDateTime extends CalendarDate {
     this.second = args.shift() || 0;
     this.millisecond = args.shift() || 0;
   }
+
+  copy(): CalendarDateTime {
+    if (this.era) {
+      return new CalendarDateTime(this.calendar, this.era, this.year, this.month, this.day, this.hour, this.minute, this.second, this.millisecond);
+    } else {
+      return new CalendarDateTime(this.calendar, this.year, this.month, this.day, this.hour, this.minute, this.second, this.millisecond);
+    }
+  }
+
+  set(fields: DateFields & TimeFields, behavior?: OverflowBehavior) {
+    return set(setTime(this, fields, behavior), fields, behavior);
+  }
+
+  cycle(field: DateField | TimeField, amount: number, options?: CycleTimeOptions) {
+    switch (field) {
+      case 'era':
+      case 'year':
+      case 'month':
+      case 'day':
+        return cycleDate(this, field, amount, options);
+      default:
+        return cycleTime(this, field, amount, options);
+    }
+  }
+
+  toString() {
+    return dateTimeToString(this);
+  }
+
+  compare(b: CalendarDate | CalendarDateTime) {
+    let res = compareDate(this, b);
+    if (res === 0) {
+      return compareTime(this, toCalendarDateTime(b));
+    }
+
+    return res;
+  }
+}
+
+export class ZonedDateTime extends CalendarDateTime {
+  public readonly timeZone: string;
+  public readonly offset: number;
+
+  constructor(year: number, month: number, day: number, timeZone: string, offset: number, hour?: number, minute?: number, second?: number, millisecond?: number);
+  constructor(calendar: Calendar, year: number, month: number, day: number, timeZone: string, offset: number, hour?: number, minute?: number, second?: number, millisecond?: number);
+  constructor(calendar: Calendar, era: string, year: number, month: number, day: number, timeZone: string, offset: number, hour?: number, minute?: number, second?: number, millisecond?: number);
+  constructor(...args: any[]) {
+    let [calendar, era, year, month, day] = shiftArgs(args);
+    let timeZone = args.shift();
+    let offset = args.shift();
+    super(calendar, era, year, month, day, ...args);
+    this.timeZone = timeZone;
+    this.offset = offset;
+  }
+
+  copy(): ZonedDateTime {
+    if (this.era) {
+      return new ZonedDateTime(this.calendar, this.era, this.year, this.month, this.day, this.timeZone, this.offset, this.hour, this.minute, this.second, this.millisecond);
+    } else {
+      return new ZonedDateTime(this.calendar, this.year, this.month, this.day, this.timeZone, this.offset, this.hour, this.minute, this.second, this.millisecond);
+    }
+  }
+
+  add(duration: Duration) {
+    return addZoned(this, duration);
+  }
+
+  subtract(duration: Duration) {
+    return subtractZoned(this, duration);
+  }
+
+  set(fields: DateFields & TimeFields, behavior?: OverflowBehavior, disambiguation?: Disambiguation) {
+    return setZoned(this, fields, behavior, disambiguation);
+  }
+
+  cycle(field: DateField | TimeField, amount: number, options?: CycleTimeOptions) {
+    return cycleZoned(this, field, amount, options);
+  }
+
+  toDate() {
+    return zonedToDate(this);
+  }
+
+  toString() {
+    return zonedDateTimeToString(this);
+  }
+
+  toAbsoluteString() {
+    return this.toDate().toISOString();
+  }
+
+  compare(b: CalendarDate | CalendarDateTime | ZonedDateTime) {
+    // TODO: Is this a bad idea??
+    return this.toDate() - toZoned(b, this.timeZone).toDate();
+  }
 }

packages/@internationalized/date/src/calendars/BuddhistCalendar.ts

@@ -38,7 +38,7 @@ export class BuddhistCalendar extends GregorianCalendar {
     );
   }
 
-  getCurrentEra() {
-    return 'BE';
+  getEras() {
+    return ['BE'];
   }
 }

packages/@internationalized/date/src/calendars/EthiopicCalendar.ts

@@ -102,8 +102,12 @@ export class EthiopicCalendar implements Calendar {
     return 365 + getLeapDay(date.year);
   }
 
-  getCurrentEra() {
-    return 'AM';
+  getYearsInEra(): number {
+    return 9999;
+  }
+
+  getEras() {
+    return ['AA', 'AM'];
   }
 }
 
@@ -117,8 +121,8 @@ export class EthiopicAmeteAlemCalendar extends EthiopicCalendar {
     return date;
   }
 
-  getCurrentEra() {
-    return 'AA';
+  getEras() {
+    return ['AA'];
   }
 }
 
@@ -163,7 +167,7 @@ export class CopticCalendar extends EthiopicCalendar {
     date.year += years;
   }
 
-  getCurrentEra() {
-    return 'CE';
+  getEras() {
+    return ['BCE', 'CE'];
   }
 }

packages/@internationalized/date/src/calendars/GregorianCalendar.ts

@@ -91,7 +91,12 @@ export class GregorianCalendar implements Calendar {
     return isLeapYear(date.year) ? 366 : 365;
   }
 
-  getCurrentEra() {
-    return 'AD';
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getYearsInEra(date: CalendarDate): number {
+    return 9999;
+  }
+
+  getEras() {
+    return ['BC', 'AD'];
   }
 }

packages/@internationalized/date/src/calendars/HebrewCalendar.ts

@@ -15,7 +15,7 @@
 
 import {Calendar} from '../types';
 import {CalendarDate} from '../CalendarDate';
-import {mod} from '../utils';
+import {mod, Mutable} from '../utils';
 
 const HEBREW_EPOCH = 347997;
 
@@ -175,7 +175,23 @@ export class HebrewCalendar implements Calendar {
     return getDaysInYear(date.year);
   }
 
-  getCurrentEra() {
-    return 'AM';
+  getYearsInEra(): number {
+    return 9999;
+  }
+
+  getEras() {
+    return ['AM'];
+  }
+
+  addYears(date: Mutable<CalendarDate>, years: number) {
+    // Keep date in the same month when switching between leap years and non leap years
+    let nextYear = date.year + years;
+    if (isLeapYear(date.year) && !isLeapYear(nextYear) && date.month > 6) {
+      date.month--;
+    } else if (!isLeapYear(date.year) && isLeapYear(nextYear) && date.month > 6) {
+      date.month++;
+    }
+
+    date.year = nextYear;
   }
 }

packages/@internationalized/date/src/calendars/IndianCalendar.ts

@@ -109,7 +109,11 @@ export class IndianCalendar extends GregorianCalendar {
     return 30;
   }
 
-  getCurrentEra() {
-    return 'saka';
+  getYearsInEra(): number {
+    return 9999;
+  }
+
+  getEras() {
+    return ['saka'];
   }
 }

packages/@internationalized/date/src/calendars/IslamicCalendar.ts

@@ -70,8 +70,12 @@ export class IslamicCivilCalendar implements Calendar {
     return isLeapYear(date.year) ? 355 : 354;
   }
 
-  getCurrentEra() {
-    return 'AH';
+  getYearsInEra(): number {
+    return 9999;
+  }
+
+  getEras() {
+    return ['AH'];
   }
 }
 

packages/@internationalized/date/src/calendars/JapaneseCalendar.ts

@@ -88,7 +88,25 @@ export class JapaneseCalendar extends GregorianCalendar {
     }
   }
 
-  getCurrentEra() {
-    return ERA_NAMES[ERA_NAMES.length - 1];
+  getEras() {
+    return ERA_NAMES;
+  }
+
+  getYearsInEra(date: CalendarDate): number {
+    let gregorianDate = toGregorian(date);
+    let era = findEraFromGregorianDate(gregorianDate);
+    let next = ERA_START_DATES[era + 1];
+    if (next == null) {
+      return 9999;
+    }
+
+    let cur = ERA_START_DATES[era];
+    let years = next[0] - cur[0];
+
+    if (date.month < next[1] || (date.month === next[1] && date.day < next[2])) {
+      years++;
+    }
+
+    return years;
   }
 }

packages/@internationalized/date/src/calendars/PersianCalendar.ts

@@ -82,7 +82,11 @@ export class PersianCalendar implements Calendar {
     return isLeapYear(date.year) ? 30 : 29;
   }
 
-  getCurrentEra() {
-    return 'AP';
+  getEras() {
+    return ['AP'];
+  }
+
+  getYearsInEra(): number {
+    return 9999;
   }
 }