@react-spectrum/s2 1.3.0 → 1.4.0

package/src/DatePicker.tsx

@@ -10,19 +10,43 @@
  * governing permissions and limitations under the License.
  */
 
-import {DatePicker as AriaDatePicker, DatePickerProps as AriaDatePickerProps, DateValue} from 'react-aria-components/DatePicker';
+import {
+  DatePicker as AriaDatePicker,
+  DatePickerProps as AriaDatePickerProps,
+  DateValue
+} from 'react-aria-components/DatePicker';
 import {baseColor, focusRing, fontRelative, space, style} from '../style' with {type: 'macro'};
 import {Button, ButtonRenderProps} from 'react-aria-components/Button';
 import {Calendar, CalendarProps} from './Calendar';
 import CalendarIcon from '../s2wf-icons/S2_Icon_Calendar_20_N.svg';
 import {ContextValue, Provider} from 'react-aria-components/slots';
-import {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, ReactElement, ReactNode, Ref, useContext, useRef, useState} from 'react';
+import {
+  controlBorderRadius,
+  field,
+  fieldInput,
+  getAllowedOverrides,
+  StyleProps
+} from './style-utils' with {type: 'macro'};
+import {
+  createContext,
+  forwardRef,
+  ReactElement,
+  ReactNode,
+  Ref,
+  useContext,
+  useRef,
+  useState
+} from 'react';
 import {DateInput, DateInputContainer, InvalidIndicator} from './DateField';
 import {Dialog, OverlayTriggerStateContext} from 'react-aria-components/Dialog';
 import {FieldGroup, FieldLabel, HelpText} from './Field';
 import {FormContext} from 'react-aria-components/Form';
-import {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {
+  forwardRefType,
+  GlobalDOMAttributes,
+  HelpTextProps,
+  SpectrumLabelableProps
+} from '@react-types/shared';
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -34,30 +58,39 @@ import {TimeValue} from 'react-aria-components/TimeField';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-
-export interface DatePickerProps<T extends DateValue> extends
-  Omit<AriaDatePickerProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
-  Pick<CalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>,
-  Pick<PopoverProps, 'shouldFlip'>,
-  StyleProps,
-  SpectrumLabelableProps,
-  HelpTextProps {
-    /**
-     * The size of the DateField.
-     *
-     * @default 'M'
-     */
-    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 interface DatePickerProps<T extends DateValue>
+  extends
+    Omit<
+      AriaDatePickerProps<T>,
+      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes
+    >,
+    Pick<
+      CalendarProps<T>,
+      'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'
+    >,
+    Pick<PopoverProps, 'shouldFlip'>,
+    StyleProps,
+    SpectrumLabelableProps,
+    HelpTextProps {
+  /**
+   * The size of the DateField.
+   *
+   * @default 'M'
+   */
+  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);
+export const DatePickerContext =
+  createContext<ContextValue<Partial<DatePickerProps<any>>, HTMLDivElement>>(null);
 
-const inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({
+const inputButton = style<ButtonRenderProps & {isOpen: boolean; size: 'S' | 'M' | 'L' | 'XL'}>({
   ...focusRing(),
   ...controlBorderRadius('sm'),
   position: 'relative',
@@ -117,11 +150,12 @@ export const timeField = style({
 });
 
 /**
- * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.
+ * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date
+ * and time value.
  */
-export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<T extends DateValue>(
-  props: DatePickerProps<T>, ref: Ref<HTMLDivElement>
-): ReactElement {
+export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<
+  T extends DateValue
+>(props: DatePickerProps<T>, ref: Ref<HTMLDivElement>): ReactElement {
   [props, ref] = useSpectrumContextProps(props, ref, DatePickerContext);
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {
@@ -151,22 +185,36 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
       isRequired={isRequired}
       {...dateFieldProps}
       style={UNSAFE_style}
-      className={(UNSAFE_className || '') + style(field(), getAllowedOverrides())({
-        isInForm: !!formContext,
-        labelPosition,
-        size
-      }, styles)}>
+      className={
+        (UNSAFE_className || '') +
+        style(field(), getAllowedOverrides())(
+          {
+            isInForm: !!formContext,
+            labelPosition,
+            size
+          },
+          styles
+        )
+      }>
       {({isDisabled, isInvalid, isOpen, state}) => {
         let placeholder: DateValue | undefined = placeholderValue ?? undefined;
         let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;
         let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : undefined;
         let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;
-        let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : undefined;
+        let timeGranularity =
+          state.granularity === 'hour' ||
+          state.granularity === 'minute' ||
+          state.granularity === 'second'
+            ? state.granularity
+            : undefined;
         let showTimeField = !!timeGranularity;
 
         // Ideally, we could omit errorMessage here and let S2 Calendar read it from RAC's CalendarContext which already contains the resolved value via calendarProps from useDatePicker.
         // However, RAC's CalendarProps omits errorMessage, so reading it back from the context would require an unsafe cast. Instead, we resolve it here using the same logic as useDatePicker.
-        let resolvedErrorMessage = typeof errorMessage === 'function' ? errorMessage(state.displayValidation) : (errorMessage || state.displayValidation.validationErrors.join(' '));
+        let resolvedErrorMessage =
+          typeof errorMessage === 'function'
+            ? errorMessage(state.displayValidation)
+            : errorMessage || state.displayValidation.validationErrors.join(' ');
         return (
           <>
             <FieldLabel
@@ -208,7 +256,8 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
               <Calendar
                 visibleMonths={maxVisibleMonths}
                 createCalendar={createCalendar}
-                errorMessage={resolvedErrorMessage} />
+                errorMessage={resolvedErrorMessage}
+              />
               {showTimeField && (
                 <div className={style({display: 'flex', gap: 16, contain: 'inline-size'})}>
                   <TimeField
@@ -222,7 +271,8 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
                     minValue={timeMinValue}
                     maxValue={timeMaxValue}
                     hourCycle={props.hourCycle}
-                    hideTimeZone={props.hideTimeZone} />
+                    hideTimeZone={props.hideTimeZone}
+                  />
                 </div>
               )}
             </CalendarPopover>
@@ -240,12 +290,11 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   );
 });
 
-export function CalendarPopover(props: Omit<PopoverProps, 'children'> & {children: ReactNode}): ReactElement {
+export function CalendarPopover(
+  props: Omit<PopoverProps, 'children'> & {children: ReactNode}
+): ReactElement {
   return (
-    <Popover
-      {...props}
-      hideArrow
-      padding="none">
+    <Popover {...props} hideArrow padding="none">
       <div
         className={style({
           paddingX: 16,
@@ -258,20 +307,18 @@ export function CalendarPopover(props: Omit<PopoverProps, 'children'> & {childre
           size: 'full'
         })}>
         <Dialog>
-          <Provider
-            values={[
-              [OverlayTriggerStateContext, null]
-            ]}>
-            {props.children}
-          </Provider>
+          <Provider values={[[OverlayTriggerStateContext, null]]}>{props.children}</Provider>
         </Dialog>
       </div>
     </Popover>
   );
 }
 
-
-export function CalendarButton(props: {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL', setButtonHasFocus: (hasFocus: boolean) => void}): ReactElement {
+export function CalendarButton(props: {
+  isOpen: boolean;
+  size: 'S' | 'M' | 'L' | 'XL';
+  setButtonHasFocus: (hasFocus: boolean) => void;
+}): ReactElement {
   let buttonRef = useRef<HTMLButtonElement>(null);
   let {isOpen, size, setButtonHasFocus} = props;
   return (
@@ -282,22 +329,27 @@ export function CalendarButton(props: {isOpen: boolean, size: 'S' | 'M' | 'L' |
       isPressed={false}
       onFocusChange={setButtonHasFocus}
       style={pressScale(buttonRef)}
-      className={renderProps => inputButton({
-        ...renderProps,
-        size,
-        isOpen
-      })}>
+      className={renderProps =>
+        inputButton({
+          ...renderProps,
+          size,
+          isOpen
+        })
+      }>
       <Provider
         values={[
-          [IconContext, {
-            styles: style({
-              '--iconPrimary': {
-                type: 'fill',
-                value: 'currentColor'
-              },
-              size: fontRelative(14)
-            })
-          }]
+          [
+            IconContext,
+            {
+              styles: style({
+                '--iconPrimary': {
+                  type: 'fill',
+                  value: 'currentColor'
+                },
+                size: fontRelative(14)
+              })
+            }
+          ]
         ]}>
         <CalendarIcon />
       </Provider>

package/src/DateRangePicker.tsx

@@ -19,10 +19,20 @@ import {CalendarButton, CalendarPopover, timeField} from './DatePicker';
 import {ContextValue} from 'react-aria-components/slots';
 import {createContext, forwardRef, ReactElement, Ref, useContext, useState} from 'react';
 import {DateInput, DateInputContainer, InvalidIndicator} from './DateField';
-import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {
+  field,
+  fieldInput,
+  getAllowedOverrides,
+  StyleProps
+} from './style-utils' with {type: 'macro'};
 import {FieldGroup, FieldLabel, HelpText} from './Field';
 import {FormContext} from 'react-aria-components/Form';
-import {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {
+  forwardRefType,
+  GlobalDOMAttributes,
+  HelpTextProps,
+  SpectrumLabelableProps
+} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {PopoverProps} from 'react-aria-components/Popover';
@@ -32,168 +42,210 @@ import {TimeField} from './TimeField';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-
-export interface DateRangePickerProps<T extends DateValue> extends
-  Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
-  Pick<RangeCalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable' | 'commitBehavior'>,
-  Pick<PopoverProps, 'shouldFlip'>,
-  StyleProps,
-  SpectrumLabelableProps,
-  HelpTextProps {
-    /**
-     * The size of the DateField.
-     *
-     * @default 'M'
-     */
-    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 interface DateRangePickerProps<T extends DateValue>
+  extends
+    Omit<
+      AriaDateRangePickerProps<T>,
+      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes
+    >,
+    Pick<
+      RangeCalendarProps<T>,
+      'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable' | 'commitBehavior'
+    >,
+    Pick<PopoverProps, 'shouldFlip'>,
+    StyleProps,
+    SpectrumLabelableProps,
+    HelpTextProps {
+  /**
+   * The size of the DateField.
+   *
+   * @default 'M'
+   */
+  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);
+export const DateRangePickerContext =
+  createContext<ContextValue<Partial<DateRangePickerProps<any>>, HTMLDivElement>>(null);
 
 /**
  * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users
  * to enter or select a date and time range.
  */
-export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateRangePicker<T extends DateValue>(
-  props: DateRangePickerProps<T>, ref: Ref<HTMLDivElement>
-): ReactElement {
-  [props, ref] = useSpectrumContextProps(props, ref, DateRangePickerContext);
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
-  let {
-    label,
-    contextualHelp,
-    description: descriptionMessage,
-    errorMessage,
-    isRequired,
-    size = 'M',
-    labelPosition = 'top',
-    necessityIndicator,
-    labelAlign = 'start',
-    UNSAFE_style,
-    UNSAFE_className,
-    styles,
-    placeholderValue,
-    maxVisibleMonths = 1,
-    createCalendar,
-    commitBehavior,
-    ...dateFieldProps
-  } = props;
-  let formContext = useContext(FormContext);
-  let [buttonHasFocus, setButtonHasFocus] = useState(false);
+export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(
+  function DateRangePicker<T extends DateValue>(
+    props: DateRangePickerProps<T>,
+    ref: Ref<HTMLDivElement>
+  ): ReactElement {
+    [props, ref] = useSpectrumContextProps(props, ref, DateRangePickerContext);
+    let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+    let {
+      label,
+      contextualHelp,
+      description: descriptionMessage,
+      errorMessage,
+      isRequired,
+      size = 'M',
+      labelPosition = 'top',
+      necessityIndicator,
+      labelAlign = 'start',
+      UNSAFE_style,
+      UNSAFE_className,
+      styles,
+      placeholderValue,
+      maxVisibleMonths = 1,
+      createCalendar,
+      commitBehavior,
+      ...dateFieldProps
+    } = props;
+    let formContext = useContext(FormContext);
+    let [buttonHasFocus, setButtonHasFocus] = useState(false);
 
-  return (
-    <AriaDateRangePicker
-      ref={ref}
-      isRequired={isRequired}
-      {...dateFieldProps}
-      style={UNSAFE_style}
-      className={(UNSAFE_className || '') + style(field(), getAllowedOverrides())({
-        isInForm: !!formContext,
-        labelPosition,
-        size
-      }, styles)}>
-      {({isDisabled, isInvalid, isOpen, state}) => {
-        let placeholder: DateValue | undefined = placeholderValue || undefined;
-        let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;
-        let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : undefined;
-        let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;
-        let timeGranularity = state.granularity === 'hour'
-          || state.granularity === 'minute'
-          || state.granularity === 'second'
-            ? state.granularity : undefined;
-        let showTimeField = !!timeGranularity;
+    return (
+      <AriaDateRangePicker
+        ref={ref}
+        isRequired={isRequired}
+        {...dateFieldProps}
+        style={UNSAFE_style}
+        className={
+          (UNSAFE_className || '') +
+          style(field(), getAllowedOverrides())(
+            {
+              isInForm: !!formContext,
+              labelPosition,
+              size
+            },
+            styles
+          )
+        }>
+        {({isDisabled, isInvalid, isOpen, state}) => {
+          let placeholder: DateValue | undefined = placeholderValue || undefined;
+          let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;
+          let timeMinValue =
+            props.minValue && 'hour' in props.minValue ? props.minValue : undefined;
+          let timeMaxValue =
+            props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;
+          let timeGranularity =
+            state.granularity === 'hour' ||
+            state.granularity === 'minute' ||
+            state.granularity === 'second'
+              ? state.granularity
+              : undefined;
+          let showTimeField = !!timeGranularity;
 
-        // Ideally, we could omit errorMessage here and let S2 Calendar read it from RAC's CalendarContext which already contains the resolved value via calendarProps from useDatePicker.
-        // However, RAC's CalendarProps omits errorMessage, so reading it back from the context would require an unsafe cast. Instead, we resolve it here using the same logic as useDatePicker.
-        let resolvedErrorMessage = typeof errorMessage === 'function' ? errorMessage(state.displayValidation) : (errorMessage || state.displayValidation.validationErrors.join(' '));
-        return (
-          <>
-            <FieldLabel
-              isDisabled={isDisabled}
-              isRequired={isRequired}
-              size={size}
-              labelPosition={labelPosition}
-              labelAlign={labelAlign}
-              necessityIndicator={necessityIndicator}
-              contextualHelp={contextualHelp}>
-              {label}
-            </FieldLabel>
-            <FieldGroup
-              role="presentation"
-              shouldTurnOffFocusRing={buttonHasFocus}
-              isDisabled={isDisabled}
-              isInvalid={isInvalid}
-              size={size}
-              styles={style({
-                ...fieldInput(),
-                textWrap: 'nowrap',
-                paddingStart: 'edge-to-text',
-                paddingEnd: 4
-              })({size})}>
-              <DateInputContainer>
-                <DateInput slot="start" />
-                <span aria-hidden="true" className={style({flexShrink: 0, flexGrow: 0, paddingX: 2})}>–</span>
-                <DateInput slot="end" />
-              </DateInputContainer>
-              <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />
-              <div
-                className={style({
-                  flexShrink: 0,
-                  flexGrow: 1,
-                  display: 'flex',
-                  justifyContent: 'end'
-                })}>
-                <CalendarButton isOpen={isOpen} size={size} setButtonHasFocus={setButtonHasFocus} />
-              </div>
-            </FieldGroup>
-            <CalendarPopover shouldFlip={props.shouldFlip}>
-              <RangeCalendar
-                visibleMonths={maxVisibleMonths}
-                createCalendar={createCalendar}
-                commitBehavior={commitBehavior}
-                errorMessage={resolvedErrorMessage} />
-              {showTimeField && (
-                <div className={style({display: 'flex', gap: 16, contain: 'inline-size', marginTop: 24})}>
-                  <TimeField
-                    styles={timeField}
-                    label={stringFormatter.format('datepicker.startTime')}
-                    value={state.timeRange?.start || null}
-                    onChange={v => state.setTime('start', v)}
-                    placeholderValue={timePlaceholder}
-                    granularity={timeGranularity}
-                    minValue={timeMinValue}
-                    maxValue={timeMaxValue}
-                    hourCycle={props.hourCycle}
-                    hideTimeZone={props.hideTimeZone} />
-                  <TimeField
-                    styles={timeField}
-                    label={stringFormatter.format('datepicker.endTime')}
-                    value={state.timeRange?.end || null}
-                    onChange={v => state.setTime('end', v)}
-                    placeholderValue={timePlaceholder}
-                    granularity={timeGranularity}
-                    minValue={timeMinValue}
-                    maxValue={timeMaxValue}
-                    hourCycle={props.hourCycle}
-                    hideTimeZone={props.hideTimeZone} />
+          // Ideally, we could omit errorMessage here and let S2 Calendar read it from RAC's CalendarContext which already contains the resolved value via calendarProps from useDatePicker.
+          // However, RAC's CalendarProps omits errorMessage, so reading it back from the context would require an unsafe cast. Instead, we resolve it here using the same logic as useDatePicker.
+          let resolvedErrorMessage =
+            typeof errorMessage === 'function'
+              ? errorMessage(state.displayValidation)
+              : errorMessage || state.displayValidation.validationErrors.join(' ');
+          return (
+            <>
+              <FieldLabel
+                isDisabled={isDisabled}
+                isRequired={isRequired}
+                size={size}
+                labelPosition={labelPosition}
+                labelAlign={labelAlign}
+                necessityIndicator={necessityIndicator}
+                contextualHelp={contextualHelp}>
+                {label}
+              </FieldLabel>
+              <FieldGroup
+                role="presentation"
+                shouldTurnOffFocusRing={buttonHasFocus}
+                isDisabled={isDisabled}
+                isInvalid={isInvalid}
+                size={size}
+                styles={style({
+                  ...fieldInput(),
+                  textWrap: 'nowrap',
+                  paddingStart: 'edge-to-text',
+                  paddingEnd: 4
+                })({size})}>
+                <DateInputContainer>
+                  <DateInput slot="start" />
+                  <span
+                    aria-hidden="true"
+                    className={style({flexShrink: 0, flexGrow: 0, paddingX: 2})}>
+                    –
+                  </span>
+                  <DateInput slot="end" />
+                </DateInputContainer>
+                <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />
+                <div
+                  className={style({
+                    flexShrink: 0,
+                    flexGrow: 1,
+                    display: 'flex',
+                    justifyContent: 'end'
+                  })}>
+                  <CalendarButton
+                    isOpen={isOpen}
+                    size={size}
+                    setButtonHasFocus={setButtonHasFocus}
+                  />
                 </div>
-              )}
-            </CalendarPopover>
-            <HelpText
-              size={size}
-              isDisabled={isDisabled}
-              isInvalid={isInvalid}
-              description={descriptionMessage}>
-              {resolvedErrorMessage}
-            </HelpText>
-          </>
-        );
-      }}
-    </AriaDateRangePicker>
-  );
-});
+              </FieldGroup>
+              <CalendarPopover shouldFlip={props.shouldFlip}>
+                <RangeCalendar
+                  visibleMonths={maxVisibleMonths}
+                  createCalendar={createCalendar}
+                  commitBehavior={commitBehavior}
+                  errorMessage={resolvedErrorMessage}
+                />
+                {showTimeField && (
+                  <div
+                    className={style({
+                      display: 'flex',
+                      gap: 16,
+                      contain: 'inline-size',
+                      marginTop: 24
+                    })}>
+                    <TimeField
+                      styles={timeField}
+                      label={stringFormatter.format('datepicker.startTime')}
+                      value={state.timeRange?.start || null}
+                      onChange={v => state.setTime('start', v)}
+                      placeholderValue={timePlaceholder}
+                      granularity={timeGranularity}
+                      minValue={timeMinValue}
+                      maxValue={timeMaxValue}
+                      hourCycle={props.hourCycle}
+                      hideTimeZone={props.hideTimeZone}
+                    />
+                    <TimeField
+                      styles={timeField}
+                      label={stringFormatter.format('datepicker.endTime')}
+                      value={state.timeRange?.end || null}
+                      onChange={v => state.setTime('end', v)}
+                      placeholderValue={timePlaceholder}
+                      granularity={timeGranularity}
+                      minValue={timeMinValue}
+                      maxValue={timeMaxValue}
+                      hourCycle={props.hourCycle}
+                      hideTimeZone={props.hideTimeZone}
+                    />
+                  </div>
+                )}
+              </CalendarPopover>
+              <HelpText
+                size={size}
+                isDisabled={isDisabled}
+                isInvalid={isInvalid}
+                description={descriptionMessage}>
+                {resolvedErrorMessage}
+              </HelpText>
+            </>
+          );
+        }}
+      </AriaDateRangePicker>
+    );
+  }
+);