@react-types/datepicker 3.0.0-alpha.1 → 3.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-types/datepicker",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.4",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "types": "src/index.d.ts",
@@ -9,8 +9,8 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/date": "3.0.0-alpha.1",
-    "@react-types/shared": "^3.10.0"
+    "@internationalized/date": "3.0.0-alpha.4",
+    "@react-types/shared": "^3.11.1"
   },
   "publishConfig": {
     "access": "public"
@@ -18,5 +18,5 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1"
   },
-  "gitHead": "16fc29ac722793ffaea083f13760d82ab341cc8d"
+  "gitHead": "e7708349a637642a30d33a11ca4a75ad5829eaa3"
 }

package/src/index.d.ts

@@ -34,11 +34,22 @@ type MappedDateValue<T> =
 
 export type Granularity = 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
 interface DatePickerBase<T extends DateValue> extends InputBase, Validation, FocusableProps, LabelableProps, HelpTextProps {
+  /** The minimum allowed date that a user may select. */
   minValue?: DateValue,
+  /** The maximum allowed date that a user may select. */
   maxValue?: DateValue,
+  /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
+  isDateUnavailable?: (date: DateValue) => boolean,
+  /** A placeholder date to display when no value is selected. Defaults to today's date at midnight. */
   placeholderValue?: T,
+  /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */
   hourCycle?: 12 | 24,
+  /** Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times. */
   granularity?: Granularity,
+  /**
+   * Whether to hide the time zone abbreviation.
+   * @default false
+   */
   hideTimeZone?: boolean
 }
 
@@ -48,17 +59,37 @@ export interface DatePickerProps<T extends DateValue> extends DatePickerBase<T>,
 export interface AriaDatePickerProps<T extends DateValue> extends AriaDatePickerBaseProps<T>, DatePickerProps<T> {}
 
 export type DateRange = RangeValue<DateValue>;
-export interface DateRangePickerProps<T extends DateValue> extends DatePickerBase<T>, ValueBase<RangeValue<T>, RangeValue<MappedDateValue<T>>> {}
+export interface DateRangePickerProps<T extends DateValue> extends DatePickerBase<T>, ValueBase<RangeValue<T>, RangeValue<MappedDateValue<T>>> {
+  /**
+   * When combined with `isDateUnavailable`, determines whether non-contiguous ranges,
+   * i.e. ranges containing unavailable dates, may be selected.
+   */
+  allowsNonContiguousRanges?: boolean
+}
+
 export interface AriaDateRangePickerProps<T extends DateValue> extends AriaDatePickerBaseProps<T>, DateRangePickerProps<T> {}
 
 interface SpectrumDatePickerBase<T extends DateValue> extends AriaDatePickerBaseProps<T>, SpectrumLabelableProps, StyleProps {
+  /**
+   * Whether the date picker should be displayed with a quiet style.
+   * @default false
+   */
   isQuiet?: boolean,
+  /**
+   * Whether to show the localized date format as help text below the field.
+   * @default false
+   */
   showFormatHelpText?: boolean,
+  /**
+   * The maximum number of months to display at once in the calendar popover, if screen space permits.
+   * @default 1
+   */
   maxVisibleMonths?: number
 }
 
 export interface SpectrumDatePickerProps<T extends DateValue> extends DatePickerProps<T>, SpectrumDatePickerBase<T> {}
 export interface SpectrumDateRangePickerProps<T extends DateValue> extends DateRangePickerProps<T>, SpectrumDatePickerBase<T> {}
+export interface SpectrumDateFieldProps<T extends DateValue> extends Omit<SpectrumDatePickerProps<T>, 'maxVisibleMonths'> {}
 
 export type TimeValue = Time | CalendarDateTime | ZonedDateTime;
 type MappedTimeValue<T> =
@@ -68,14 +99,29 @@ type MappedTimeValue<T> =
   never;
 
 export interface TimePickerProps<T extends TimeValue> extends InputBase, Validation, FocusableProps, LabelableProps, ValueBase<T, MappedTimeValue<T>> {
+  /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */
   hourCycle?: 12 | 24,
+  /**
+   * Determines the smallest unit that is displayed in the time picker.
+   * @default 'minute'
+   */
   granularity?: 'hour' | 'minute' | 'second' | 'millisecond',
+  /** Whether to hide the time zone abbreviation. */
   hideTimeZone?: boolean,
+  /** A placeholder time to display when no value is selected. Defaults to 12:00 or 00:00 depending on the hour cycle. */
   placeholderValue?: T,
+  /** The minimum allowed time that a user may select. */
   minValue?: TimeValue,
+  /** The maximum allowed time that a user may select. */
   maxValue?: TimeValue
 }
 
-export interface SpectrumTimePickerProps<T extends TimeValue> extends TimePickerProps<T>, SpectrumLabelableProps, DOMProps, StyleProps {
+export interface AriaTimeFieldProps<T extends TimeValue> extends TimePickerProps<T>, AriaLabelingProps, DOMProps {}
+
+export interface SpectrumTimePickerProps<T extends TimeValue> extends AriaTimeFieldProps<T>, SpectrumLabelableProps, StyleProps {
+  /**
+   * Whether the time field should be displayed with a quiet style.
+   * @default false
+   */
   isQuiet?: boolean
 }