@react-spectrum/datepicker 3.0.0-alpha.0

package/src/DatePickerSegment.tsx

@@ -0,0 +1,90 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {classNames} from '@react-spectrum/utils';
+import {DatePickerBase, DateValue} from '@react-types/datepicker';
+import {DatePickerFieldState, DateSegment} from '@react-stately/datepicker';
+import {NumberParser} from '@internationalized/number';
+import React, {useMemo, useRef} from 'react';
+import styles from './index.css';
+import {useDateSegment} from '@react-aria/datepicker';
+import {useFocusManager} from '@react-aria/focus';
+import {useLocale} from '@react-aria/i18n';
+import {usePress} from '@react-aria/interactions';
+
+interface DatePickerSegmentProps extends DatePickerBase<DateValue> {
+  segment: DateSegment,
+  state: DatePickerFieldState
+}
+
+interface LiteralSegmentProps {
+  segment: DateSegment
+}
+
+export function DatePickerSegment({segment, state, ...otherProps}: DatePickerSegmentProps) {
+  switch (segment.type) {
+    // A separator, e.g. punctuation
+    case 'literal':
+      return <LiteralSegment segment={segment} />;
+
+    // Editable segment
+    default:
+      return <EditableSegment segment={segment} state={state} {...otherProps} />;
+  }
+}
+
+function LiteralSegment({segment}: LiteralSegmentProps) {
+  let focusManager = useFocusManager();
+  let {pressProps} = usePress({
+    onPressStart: (e) => {
+      if (e.pointerType === 'mouse') {
+        let res = focusManager.focusNext({from: e.target as HTMLElement});
+        if (!res) {
+          focusManager.focusPrevious({from: e.target as HTMLElement});
+        }
+      }
+    }
+  });
+
+  return (
+    <span
+      aria-hidden="true"
+      className={classNames(styles, 'react-spectrum-Datepicker-literal')}
+      {...pressProps}
+      data-testid={segment.type === 'literal' ? undefined : segment.type}>
+      {segment.text}
+    </span>
+  );
+}
+
+function EditableSegment({segment, state, ...otherProps}: DatePickerSegmentProps) {
+  let ref = useRef();
+  let {segmentProps} = useDateSegment(otherProps, segment, state, ref);
+  let {locale} = useLocale();
+  let parser = useMemo(() => new NumberParser(locale), [locale]);
+  let isNumeric = useMemo(() => parser.isValidPartialNumber(segment.text), [segment.text, parser]);
+  return (
+    <div
+      ref={ref}
+      className={classNames(styles, 'react-spectrum-DatePicker-cell', {
+        'is-placeholder': segment.isPlaceholder,
+        'is-read-only': !segment.isEditable
+      })}
+      style={{
+        minWidth: !isNumeric ? null : String(segment.maxValue).length + 'ch'
+      }}
+      data-testid={segment.type}
+      {...segmentProps}>
+      {segment.isPlaceholder ? '' : segment.text}
+    </div>
+  );
+}

package/src/DateRangePicker.tsx

@@ -0,0 +1,226 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import CalendarIcon from '@spectrum-icons/workflow/Calendar';
+import {classNames, useStyleProps} from '@react-spectrum/utils';
+import {Content} from '@react-spectrum/view';
+import {DatePickerField} from './DatePickerField';
+import datepickerStyles from './index.css';
+import {DateValue, SpectrumDateRangePickerProps} from '@react-types/datepicker';
+import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
+import {Field} from '@react-spectrum/label';
+import {FieldButton} from '@react-spectrum/button';
+import {Flex} from '@react-spectrum/layout';
+import {Input} from './Input';
+import {mergeProps} from '@react-aria/utils';
+import {RangeCalendar} from '@react-spectrum/calendar';
+import React, {useRef} from 'react';
+import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';
+import {TimeField} from './TimeField';
+import {useDateRangePicker} from '@react-aria/datepicker';
+import {useDateRangePickerState} from '@react-stately/datepicker';
+import {useFocusRing} from '@react-aria/focus';
+import {useFormatHelpText, useVisibleMonths} from './utils';
+import {useHover} from '@react-aria/interactions';
+import {useLocale} from '@react-aria/i18n';
+import {useProviderProps} from '@react-spectrum/provider';
+
+export function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>) {
+  props = useProviderProps(props);
+  let {
+    isQuiet,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    autoFocus,
+    placeholderValue,
+    maxVisibleMonths = 1,
+    ...otherProps
+  } = props;
+  let {styleProps} = useStyleProps(otherProps);
+  let {hoverProps, isHovered} = useHover({isDisabled});
+  let targetRef = useRef<HTMLDivElement>();
+  let state = useDateRangePickerState(props);
+  let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps} = useDateRangePicker(props, state, targetRef);
+  let {value, isOpen, setOpen} = state;
+  let {direction} = useLocale();
+
+  let {isFocused, isFocusVisible, focusProps} = useFocusRing({
+    within: true,
+    isTextInput: true,
+    autoFocus
+  });
+
+  let className = classNames(
+    styles,
+    'spectrum-InputGroup',
+    {
+      'spectrum-InputGroup--quiet': isQuiet,
+      'spectrum-InputGroup--invalid': state.validationState === 'invalid',
+      'is-disabled': isDisabled,
+      'is-hovered': isHovered,
+      'is-focused': isFocused,
+      'focus-ring': isFocusVisible
+    },
+    styleProps.className
+  );
+
+  let fieldClassName = classNames(
+    styles,
+    'spectrum-InputGroup-input',
+    {
+      'is-disabled': isDisabled,
+      'is-invalid': state.validationState === 'invalid'
+    }
+  );
+
+  // Note: this description is intentionally not passed to useDatePicker.
+  // The format help text is unnecessary for screen reader users because each segment already has a label.
+  let description = useFormatHelpText(props);
+  if (description && !props.description) {
+    descriptionProps.id = null;
+  }
+
+  let placeholder: DateValue = placeholderValue;
+  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
+  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;
+  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;
+  let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' || state.granularity === 'millisecond' ? state.granularity : null;
+  let showTimeField = !!timeGranularity;
+
+  let visibleMonths = useVisibleMonths(maxVisibleMonths);
+
+  return (
+    <Field
+      {...props}
+      ref={targetRef}
+      description={description}
+      labelProps={labelProps}
+      descriptionProps={descriptionProps}
+      errorMessageProps={errorMessageProps}
+      validationState={state.validationState}
+      UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>
+      <div
+        {...styleProps}
+        {...mergeProps(groupProps, hoverProps, focusProps)}
+        className={className}>
+        <Input
+          isDisabled={isDisabled}
+          isQuiet={isQuiet}
+          validationState={state.validationState}
+          autoFocus={autoFocus}
+          className={classNames(styles, 'spectrum-InputGroup-field')}
+          inputClassName={fieldClassName}>
+          <DatePickerField
+            {...startFieldProps}
+            isQuiet={props.isQuiet}
+            isDisabled={isDisabled}
+            isReadOnly={isReadOnly}
+            isRequired={isRequired}
+            validationState={state.validationState}
+            placeholderValue={placeholderValue}
+            value={value?.start || null}
+            defaultValue={null}
+            onChange={start => state.setDateTime('start', start)}
+            granularity={props.granularity}
+            hourCycle={props.hourCycle}
+            inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')} />
+          <DateRangeDash />
+          <DatePickerField
+            {...endFieldProps}
+            isQuiet={props.isQuiet}
+            isDisabled={isDisabled}
+            isReadOnly={isReadOnly}
+            isRequired={isRequired}
+            validationState={state.validationState}
+            placeholderValue={placeholderValue}
+            value={value?.end || null}
+            defaultValue={null}
+            onChange={end => state.setDateTime('end', end)}
+            granularity={props.granularity}
+            hourCycle={props.hourCycle}
+            inputClassName={classNames(
+              styles,
+              'spectrum-Datepicker-endField',
+              classNames(
+                datepickerStyles,
+                'react-spectrum-Datepicker-endField'
+              )
+            )} />
+        </Input>
+        <DialogTrigger
+          type="popover"
+          mobileType="tray"
+          placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}
+          targetRef={targetRef}
+          hideArrow
+          isOpen={isOpen}
+          onOpenChange={setOpen}>
+          <FieldButton
+            {...buttonProps}
+            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}
+            isQuiet={isQuiet}
+            validationState={state.validationState}
+            isDisabled={isDisabled || isReadOnly}>
+            <CalendarIcon />
+          </FieldButton>
+          <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>
+            <Content UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>
+              <RangeCalendar
+                autoFocus
+                value={state.dateRange}
+                onChange={state.setDateRange}
+                visibleMonths={visibleMonths}
+                minValue={props.minValue}
+                maxValue={props.maxValue} />
+              {showTimeField &&
+                <Flex gap="size-100" marginTop="size-100" UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>
+                  <TimeField
+                    label="Start time"
+                    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}
+                    flex />
+                  <TimeField
+                    label="End time"
+                    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}
+                    flex />
+                </Flex>
+              }
+            </Content>
+          </Dialog>
+        </DialogTrigger>
+      </div>
+    </Field>
+  );
+}
+
+function DateRangeDash() {
+  return (
+    <div
+      aria-hidden="true"
+      data-testid="date-range-dash"
+      className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')} />
+  );
+}

package/src/Input.tsx

@@ -0,0 +1,129 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import Alert from '@spectrum-icons/ui/AlertMedium';
+import Checkmark from '@spectrum-icons/ui/CheckmarkMedium';
+import {classNames, useValueEffect} from '@react-spectrum/utils';
+import datepickerStyles from './index.css';
+import {FocusRing, FocusScope} from '@react-aria/focus';
+import {mergeProps, useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
+import React, {useCallback, useRef} from 'react';
+import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
+
+export function Input(props) {
+  let defaultRef = useRef();
+  let {
+    isDisabled,
+    isQuiet,
+    inputClassName,
+    validationState,
+    children,
+    fieldProps,
+    inputRef = defaultRef,
+    className,
+    autoFocus,
+    style
+  } = props;
+
+  // Reserve padding for the error icon when the width of the input is unconstrained.
+  // When constrained, don't reserve space because adding it only when invalid will
+  // not cause a layout shift.
+  let [reservePadding, setReservePadding] = useValueEffect(false);
+  let onResize = useCallback(() => setReservePadding(function *(reservePadding) {
+    if (reservePadding) {
+      // Try to collapse padding if the content is clipped.
+      if (inputRef.current.scrollWidth > inputRef.current.offsetWidth) {
+        let width = inputRef.current.parentElement.offsetWidth;
+        yield false;
+
+        // If removing padding causes a layout shift, add it back.
+        if (inputRef.current.parentElement.offsetWidth !== width) {
+          yield true;
+        }
+      }
+    } else {
+      // Try to add padding if the content is not clipped.
+      if (inputRef.current.offsetWidth >= inputRef.current.scrollWidth) {
+        let width = inputRef.current.parentElement.offsetWidth;
+        yield true;
+
+        // If adding padding does not change the width (i.e. width is constrained), remove it again.
+        if (inputRef.current.parentElement.offsetWidth === width) {
+          yield false;
+        }
+      }
+    }
+  }), [inputRef, setReservePadding]);
+
+  useLayoutEffect(onResize, [onResize]);
+  useResizeObserver({
+    ref: inputRef,
+    onResize
+  });
+
+  // We also need to listen for resize events of the window so we can detect
+  // when there is enough space for the padding to be re-added. Ideally we'd
+  // use a resize observer on a parent element, but it's hard to know _what_
+  // parent element.
+  useEvent(useRef(window), 'resize', onResize);
+
+  let isInvalid = validationState === 'invalid';
+  let textfieldClass = classNames(
+    textfieldStyles,
+    'spectrum-Textfield',
+    {
+      'spectrum-Textfield--invalid': isInvalid,
+      'spectrum-Textfield--valid': validationState === 'valid',
+      'spectrum-Textfield--quiet': isQuiet
+    },
+    classNames(datepickerStyles, 'react-spectrum-Datepicker-field'),
+    className
+  );
+
+  let inputClass = classNames(
+    textfieldStyles,
+    'spectrum-Textfield-input',
+    {
+      'is-disabled': isDisabled,
+      'is-invalid': isInvalid
+    },
+    reservePadding && classNames(datepickerStyles, 'react-spectrum-Datepicker-input'),
+    inputClassName
+  );
+
+  let iconClass = classNames(
+    textfieldStyles,
+    'spectrum-Textfield-validationIcon'
+  );
+
+  let validationIcon = null;
+  if (validationState === 'invalid') {
+    validationIcon = <Alert data-testid="invalid-icon" UNSAFE_className={iconClass} />;
+  } else if (validationState === 'valid') {
+    validationIcon = <Checkmark data-testid="valid-icon" UNSAFE_className={iconClass} />;
+  }
+
+  return (
+    <div {...mergeProps(fieldProps)} className={textfieldClass} style={style}>
+      <FocusRing focusClass={classNames(textfieldStyles, 'is-focused')} focusRingClass={classNames(textfieldStyles, 'focus-ring')} isTextInput within>
+        <div role="presentation" className={inputClass}>
+          <div role="presentation" className={classNames(datepickerStyles, 'react-spectrum-Datepicker-inputContents')} ref={inputRef}>
+            <FocusScope autoFocus={autoFocus}>
+              {children}
+            </FocusScope>
+          </div>
+        </div>
+      </FocusRing>
+      {validationIcon}
+    </div>
+  );
+}

package/src/TimeField.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {classNames} from '@react-spectrum/utils';
+import {createCalendar} from '@internationalized/date';
+import {DatePickerSegment} from './DatePickerSegment';
+import datepickerStyles from './index.css';
+import {Field} from '@react-spectrum/label';
+import {Input} from './Input';
+import React, {useRef} from 'react';
+import {SpectrumTimePickerProps, TimeValue} from '@react-types/datepicker';
+import {useDateField} from '@react-aria/datepicker';
+import {useLocale} from '@react-aria/i18n';
+import {useProviderProps} from '@react-spectrum/provider';
+import {useTimeFieldState} from '@react-stately/datepicker';
+
+export function TimeField<T extends TimeValue>(props: SpectrumTimePickerProps<T>) {
+  props = useProviderProps(props);
+  let {
+    autoFocus,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    isQuiet
+  } = props;
+
+  let ref = useRef();
+  let {locale} = useLocale();
+  let state = useTimeFieldState({
+    ...props,
+    locale,
+    createCalendar
+  });
+
+  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useDateField(props, state, ref);
+
+  return (
+    <Field
+      {...props}
+      labelProps={labelProps}
+      descriptionProps={descriptionProps}
+      errorMessageProps={errorMessageProps}
+      validationState={state.validationState}
+      UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-TimeField-fieldWrapper')}>
+      <Input
+        fieldProps={fieldProps}
+        isDisabled={isDisabled}
+        isQuiet={isQuiet}
+        autoFocus={autoFocus}
+        validationState={state.validationState}
+        inputRef={ref}
+        className={classNames(datepickerStyles, 'react-spectrum-TimeField')}>
+        {state.segments.map((segment, i) =>
+          (<DatePickerSegment
+            key={i}
+            segment={segment}
+            state={state}
+            isDisabled={isDisabled}
+            isReadOnly={isReadOnly}
+            isRequired={isRequired} />)
+        )}
+      </Input>
+    </Field>
+  );
+}

package/src/index.css

@@ -0,0 +1,161 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper {
+   width: auto;
+   min-width: var(--spectrum-global-dimension-size-2000);
+ }
+
+.react-spectrum-Datepicker-startField {
+  width: auto;
+  padding-inline-end: var(--spectrum-global-dimension-size-100);
+}
+
+.react-spectrum-Datepicker-endField {
+  width: auto;
+  flex: 1;
+  padding-inline-start: var(--spectrum-global-dimension-size-100);
+}
+
+.react-spectrum-Datepicker-field ~ .react-spectrum-Datepicker-endField > .react-spectrum-Datepicker-input {
+  border-inline-start-width: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.react-spectrum-Datepicker-field.react-spectrum-Datepicker-field {
+  width: auto;
+}
+
+/* specificity war with .spectrum-Field--positionSide etc. */
+.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField {
+  min-width: var(--spectrum-global-dimension-size-2000)
+}
+
+.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField {
+  min-width: var(--spectrum-global-dimension-size-1250);
+}
+
+.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper {
+  width: auto;
+  min-width: var(--spectrum-global-dimension-size-1250);
+}
+
+.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input {
+  /* always reserve space for the validation icon */
+  padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));
+}
+
+.react-spectrum-Datepicker-inputContents {
+  display: flex;
+  align-items: center;
+  /* width: auto; */
+  overflow-x: auto;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+
+  &::-webkit-scrollbar { /* WebKit */
+    width: 0;
+    height: 0;
+    display: none;
+  }
+}
+
+.react-spectrum-Datepicker-rangeDash {
+  &:before {
+    content: '–';
+  }
+}
+
+.react-spectrum-Datepicker-segments {
+  display: flex;
+  align-items: center;
+}
+
+.react-spectrum-Datepicker-literal {
+  white-space: pre;
+  user-select: none;
+  color: var(--spectrum-textfield-text-color);
+}
+
+.react-spectrum-DatePicker-cell {
+  border: none;
+  background: none;
+  padding: 0 2px;
+  border-radius: 2px;
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+  box-sizing: content-box;
+  white-space: nowrap;
+  color: var(--spectrum-textfield-text-color);
+
+  &::selection {
+    /* hide the selection because there is no way to fully prevent it in Firefox */
+    /* https://bugzilla.mozilla.org/show_bug.cgi?id=1742153 */
+    background: transparent;
+  }
+}
+
+.react-spectrum-DatePicker-cell:focus {
+  background-color: var(--spectrum-global-color-static-blue);
+  color: white;
+  caret-color: transparent;
+  outline: none;
+}
+
+.react-spectrum-DatePicker-cell.is-placeholder {
+  color: var(--spectrum-textfield-placeholder-text-color, var(--spectrum-global-color-gray-600));
+
+  &:before {
+    content: attr(aria-placeholder);
+  }
+}
+
+.react-spectrum-DatePicker-cell.is-placeholder ~ .react-spectrum-Datepicker-literal {
+  color: var(--spectrum-textfield-placeholder-text-color, var(--spectrum-global-color-gray-600));
+}
+
+.react-spectrum-DatePicker-cell.is-placeholder:focus {
+  color: var(--spectrum-global-color-static-gray-400);
+}
+
+.react-spectrum-DatePicker-cell.is-read-only {
+  color: var(--spectrum-global-color-gray-700);
+  &:focus {
+    color: var(--spectrum-global-color-static-gray-300);
+  }
+}
+
+.react-spectrum-Datepicker-dialog {
+  width: auto;
+}
+
+/* when displayed in a tray, reduce the padding of the dialog */
+@media (max-width: 700px) {
+  .react-spectrum-Datepicker-dialog {
+    --spectrum-dialog-padding-x: 8px;
+
+    .react-spectrum-Datepicker-dialogContent {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+.react-spectrum-Datepicker-timeFields {
+  width: 100%;
+  min-width: calc(var(--spectrum-calendar-day-width) * 7);
+  max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12));
+  padding: 0 var(--spectrum-calendar-day-padding);
+  box-sizing: border-box;
+}