@react-spectrum/datepicker 3.14.10 → 3.15.0

package/src/Input.tsx

@@ -1,142 +0,0 @@
-/*
- * 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 './styles.css';
-import {mergeProps, mergeRefs, useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
-import React, {ReactElement, useCallback, useRef} from 'react';
-import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
-import {useFocusRing} from '@react-aria/focus';
-
-export const Input = React.forwardRef(function Input(props: any, ref: any) {
-  let inputRef = useRef<HTMLInputElement | null>(null);
-  let {
-    isDisabled,
-    isQuiet,
-    inputClassName,
-    validationState,
-    children,
-    fieldProps,
-    className,
-    style,
-    disableFocusRing
-  } = 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 (inputRef.current && inputRef.current.parentElement) {
-      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(typeof window !== 'undefined' ? window : null), 'resize', onResize);
-
-  let {focusProps, isFocusVisible, isFocused} = useFocusRing({
-    isTextInput: true,
-    within: true
-  });
-
-  let isInvalid = validationState === 'invalid' && !isDisabled;
-  let textfieldClass = classNames(
-    textfieldStyles,
-    'spectrum-Textfield',
-    {
-      'spectrum-Textfield--invalid': isInvalid,
-      'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,
-      'spectrum-Textfield--quiet': isQuiet,
-      'focus-ring': isFocusVisible && !disableFocusRing
-    },
-    classNames(datepickerStyles, 'react-spectrum-Datepicker-field'),
-    className
-  );
-
-  let inputClass = classNames(
-    textfieldStyles,
-    'spectrum-Textfield-input',
-    {
-      'is-disabled': isDisabled,
-      'is-focused': isFocused
-    },
-    classNames(datepickerStyles, 'react-spectrum-DateField-Input'),
-    reservePadding && classNames(datepickerStyles, 'react-spectrum-Datepicker-input'),
-    inputClassName
-  );
-
-  let iconClass = classNames(
-    textfieldStyles,
-    'spectrum-Textfield-validationIcon'
-  );
-
-  let validationIcon: ReactElement | null = null;
-  if (validationState === 'invalid' && !isDisabled) {
-    validationIcon = <Alert data-testid="invalid-icon" UNSAFE_className={iconClass} />;
-  } else if (validationState === 'valid' && !isDisabled) {
-    validationIcon = <Checkmark data-testid="valid-icon" UNSAFE_className={iconClass} />;
-  }
-
-  return (
-    <div role="presentation" {...mergeProps(fieldProps, focusProps)} className={textfieldClass} style={style}>
-      <div role="presentation" className={inputClass}>
-        <div
-          role="presentation"
-          className={classNames(datepickerStyles, 'react-spectrum-Datepicker-inputContents')}
-          ref={mergeRefs(ref, inputRef)}>
-          <div
-            role="presentation"
-            className={classNames(datepickerStyles, 'react-spectrum-Datepicker-inputSized')}
-            style={{minWidth: props.minWidth}}>
-            {children}
-          </div>
-        </div>
-      </div>
-      {validationIcon}
-    </div>
-  );
-});

package/src/TimeField.tsx

@@ -1,96 +0,0 @@
-/*
- * 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 {DatePickerSegment} from './DatePickerSegment';
-import datepickerStyles from './styles.css';
-import {Field} from '@react-spectrum/label';
-import {FocusableRef} from '@react-types/shared';
-import {Input} from './Input';
-import React, {ReactElement, useRef} from 'react';
-import {SpectrumTimeFieldProps, TimeValue} from '@react-types/datepicker';
-import {useFocusManagerRef, useFormattedDateWidth} from './utils';
-import {useFormProps} from '@react-spectrum/form';
-import {useLocale} from '@react-aria/i18n';
-import {useProviderProps} from '@react-spectrum/provider';
-import {useTimeField} from '@react-aria/datepicker';
-import {useTimeFieldState} from '@react-stately/datepicker';
-
-/**
- * TimeFields allow users to enter and edit time values using a keyboard.
- * Each part of the time is displayed in an individually editable segment.
- */
-export const TimeField = React.forwardRef(function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: FocusableRef<HTMLElement>) {
-  props = useProviderProps(props);
-  props = useFormProps(props);
-  let {
-    autoFocus,
-    isDisabled,
-    isReadOnly,
-    isRequired,
-    isQuiet
-  } = props;
-
-  let domRef = useFocusManagerRef(ref);
-  let {locale} = useLocale();
-  let state = useTimeFieldState({
-    ...props,
-    locale
-  });
-
-  let fieldRef = useRef<HTMLDivElement | null>(null);
-  let inputRef = useRef<HTMLInputElement | null>(null);
-  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useTimeField({
-    ...props,
-    inputRef
-  }, state, fieldRef);
-
-  let validationState = state.validationState || (isInvalid ? 'invalid' : null);
-
-  let approximateWidth = useFormattedDateWidth(state) + 'ch';
-
-  return (
-    <Field
-      {...props}
-      ref={domRef}
-      elementType="span"
-      labelProps={labelProps}
-      descriptionProps={descriptionProps}
-      errorMessageProps={errorMessageProps}
-      validationState={validationState ?? undefined}
-      isInvalid={isInvalid}
-      validationErrors={validationErrors}
-      validationDetails={validationDetails}
-      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-TimeField-fieldWrapper')}>
-      <Input
-        ref={fieldRef}
-        fieldProps={fieldProps}
-        isDisabled={isDisabled}
-        isQuiet={isQuiet}
-        autoFocus={autoFocus}
-        validationState={validationState}
-        minWidth={approximateWidth}
-        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 {...inputProps} ref={inputRef} />
-      </Input>
-    </Field>
-  );
-}) as <T extends TimeValue>(props: SpectrumTimeFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;

package/src/styles.css

@@ -1,203 +0,0 @@
-/*
- * 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.react-spectrum-Datepicker-fieldWrapper {
-   width: auto;
-   min-width: var(--spectrum-global-dimension-size-2000);
-   max-width: 100%;
- }
-
-.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: 100%;
-}
-
-.react-spectrum-Datepicker-field .react-spectrum-DateField-Input {
-  line-height: var(--spectrum-body-4-text-line-height);
-}
-
-/* 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.react-spectrum-TimeField-fieldWrapper {
-  width: auto;
-  min-width: var(--spectrum-global-dimension-size-1250);
-}
-
-.react-spectrum-Datepicker-input.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));
-  cursor: text;
-}
-
-.react-spectrum-Datepicker-inputContents {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  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-inputSized {
-  display: inline;
-  align-items: center;
-}
-
-.react-spectrum-Datepicker-rangeDash {
-  &:before {
-    content: '–';
-  }
-}
-
-.react-spectrum-Datepicker-segments {
-  display: inline-block;
-  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: var(--spectrum-alias-border-radius-small);
-  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.is-placeholder {
-  color: var(--spectrum-gray-600);
-
-  .react-spectrum-DatePicker-placeholder {
-    text-align: center;
-    pointer-events: none;
-  }
-}
-
-.react-spectrum-DatePicker-cell.is-placeholder ~ .react-spectrum-Datepicker-literal {
-  color: var(--spectrum-global-color-gray-600);
-}
-
-.react-spectrum-DatePicker-cell.is-read-only {
-  color: var(--spectrum-global-color-gray-700);
-}
-
-.react-spectrum-DatePicker-cell:focus {
-  background-color: var(--spectrum-accent-background-color-default);
-  color: white;
-  caret-color: transparent;
-  outline: none;
-}
-
-.react-spectrum-Datepicker-dialog.react-spectrum-Datepicker-dialog {
-  width: auto;
-}
-
-.react-spectrum-Datepicker-dialogContent {
-  display: flex;
-  flex-direction: column;
-
-  .react-spectrum-Datepicker-calendar.is-invalid {
-    /* Only apply display: contents when the calendar is invalid, which allows us to move the
-     * error message below the time fields. Otherwise, don't do this because it breaks dragging
-     * the selected range on Android. */
-    display: contents;
-  }
-
-  /* Push the help text within the calendar down to the bottom of the dialog, below the time fields. */
-  :global(.spectrum-Calendar-helpText) {
-    order: 10;
-    margin: var(--spectrum-global-dimension-size-200) var(--spectrum-calendar-day-padding) 0 var(--spectrum-calendar-day-padding);
-  }
-}
-
-/* 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 {
-      margin: 0 auto;
-      max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12));
-    }
-  }
-}
-
-.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;
-}
-
-@media (forced-colors:active) {
-  .react-spectrum-DatePicker-cell:focus {
-    forced-color-adjust: none;
-    background-color: Highlight;
-    color: HighlightText;
-  }
-  .react-spectrum-DatePicker-cell.is-read-only {
-    color: ButtonText;
-    &:focus {
-      color: HighlightText;
-    }
-  }
-  .react-spectrum-DatePicker-cell.is-placeholder {
-    color: ButtonText;
-    &:focus {
-      color: HighlightText;
-    }
-  }
-}

package/src/utils.tsx

@@ -1,96 +0,0 @@
-/*
- * 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 {createDOMRef} from '@react-spectrum/utils';
-import {createFocusManager} from '@react-aria/focus';
-import {DateFormatter, useDateFormatter, useLocale} from '@react-aria/i18n';
-import {FocusableRef} from '@react-types/shared';
-import {FormatterOptions} from '@react-stately/datepicker';
-import React, {ReactNode, useImperativeHandle, useMemo, useRef, useState} from 'react';
-import {SpectrumDatePickerBase} from '@react-types/datepicker';
-import {useDisplayNames} from '@react-aria/datepicker';
-import {useLayoutEffect} from '@react-aria/utils';
-import {useProvider} from '@react-spectrum/provider';
-
-export function useFormatHelpText(props: Pick<SpectrumDatePickerBase<any>, 'description' | 'showFormatHelpText'>): ReactNode {
-  let formatter = useDateFormatter({dateStyle: 'short'});
-  let displayNames = useDisplayNames();
-  return useMemo(() => {
-    if (props.description) {
-      return props.description;
-    }
-
-    if (props.showFormatHelpText) {
-      return (
-        formatter.formatToParts(new Date()).map((s, i) => {
-          if (s.type === 'literal' || s.type === 'unknown' || (s.type as string) === 'yearName') {
-            return <span key={i}>{` ${s.value} `}</span>;
-          }
-
-          let type = s.type as string === 'relatedYear' ? 'year' : s.type;
-          return <span key={i} style={{unicodeBidi: 'embed', direction: 'ltr'}}>{displayNames.of(type)}</span>;
-        })
-      );
-    }
-
-    return '';
-  }, [props.description, props.showFormatHelpText, formatter, displayNames]);
-}
-
-export function useVisibleMonths(maxVisibleMonths: number): number {
-  let {scale} = useProvider()!;
-  let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths(scale));
-  useLayoutEffect(() => {
-    let onResize = () => setVisibleMonths(getVisibleMonths(scale));
-    onResize();
-
-    window.addEventListener('resize', onResize);
-    return () => {
-      window.removeEventListener('resize', onResize);
-    };
-  }, [scale]);
-
-  return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));
-}
-
-function getVisibleMonths(scale) {
-  if (typeof window === 'undefined') {
-    return 1;
-  }
-  let monthWidth = scale === 'large' ? 336 : 280;
-  let gap = scale === 'large' ? 30 : 24;
-  let popoverPadding = scale === 'large' ? 32 : 48;
-  return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));
-}
-
-export function useFocusManagerRef(ref: FocusableRef<HTMLElement>): React.RefObject<HTMLElement | null> {
-  let domRef = useRef<HTMLElement | null>(null);
-  useImperativeHandle(ref, () => ({
-    ...createDOMRef(domRef),
-    focus() {
-      createFocusManager(domRef).focusFirst({tabbable: true});
-    }
-  }));
-  return domRef;
-}
-
-export function useFormattedDateWidth(state: {getDateFormatter: (locale: string, formatOptions: FormatterOptions) => DateFormatter}): number {
-  let locale = useLocale()?.locale;
-  let currentDate = new Date();
-  let formatedDate = state.getDateFormatter(locale, {shouldForceLeadingZeros: true}).format(currentDate);
-  let totalCharacters =  formatedDate.length;
-
-  // The max of two is for times with only hours.
-  // As the length of a date grows we need to proportionally increase the width.
-  // We use the character count with 'ch' units and add extra padding to accomate for
-  // dates with months and time dashes, which are wider characters.
-  return (totalCharacters + Math.max(Math.floor(totalCharacters / 5), 2));
-}