Repository: adobe/react-spectrum
File: packages/react-aria-components/src/HiddenDateInput.tsx (TypeScript)

Code before:
  /**
   * State for the input.
   */
  state: DateFieldState | DatePickerState
}

export interface HiddenDateAria {
  /** Props for the container element. */
  containerProps: React.HTMLAttributes<HTMLDivElement>,
  /** Props for the hidden input element. */
  inputProps: React.InputHTMLAttributes<HTMLInputElement>
}

const dateSegments = ['day', 'month', 'year'];
const granularityMap = {'hour': 1, 'minute': 2, 'second': 3};

export function useHiddenDateInput(props: HiddenDateInputProps, state: DateFieldState | DatePickerState) : HiddenDateAria {
  let {
    autoComplete,
    isDisabled,
    name
  } = props;
  let {visuallyHiddenProps} = useVisuallyHidden();

  let inputStep = 60;
  if (state.granularity === 'second') {
    inputStep = 1;
  } else if (state.granularity === 'hour') {
    inputStep = 3600; 
  }

  let dateValue = state.value == null ? '' : state.value.toString();

  let inputType = state.granularity === 'day' ? 'date' : 'datetime-local';

  let timeSegments = ['hour', 'minute', 'second'];
  // Depending on the granularity, we only want to validate certain time segments
  let end = 0;
  if (timeSegments.includes(state.granularity)) {
    end = granularityMap[state.granularity];
    timeSegments = timeSegments.slice(0, end);
  }

  return {
    containerProps: {
      ...visuallyHiddenProps,
      'aria-hidden': true,
      // @ts-ignore
      ['data-react-aria-prevent-focus']: true,
      // @ts-ignore
      ['data-a11y-ignore']: 'aria-hidden-focus'

Review comment (suggestion):
Should it be `relative`? It's no longer positioned near the visible element: https://reactspectrum.blob.core.windows.net/reactspectrum/a85e685d1afeeb4c3310e84e24b9fc3b56508ef6/docs/react-aria/Select.html#example

Code after:
  /**
   * State for the input.
   */
  state: DateFieldState | DatePickerState
}

export interface HiddenDateAria {
  /** Props for the container element. */
  containerProps: React.HTMLAttributes<HTMLDivElement>,
  /** Props for the hidden input element. */
  inputProps: React.InputHTMLAttributes<HTMLInputElement>
}

const dateSegments = ['day', 'month', 'year'];
const granularityMap = {'hour': 1, 'minute': 2, 'second': 3};

export function useHiddenDateInput(props: HiddenDateInputProps, state: DateFieldState | DatePickerState) : HiddenDateAria {
  let {
    autoComplete,
    isDisabled,
    name
  } = props;
  let {visuallyHiddenProps} = useVisuallyHidden({
    style: {
      // Prevent page scrolling.
      position: 'fixed',
      top: 0,
      left: 0
    }
  });

  let inputStep = 60;
  if (state.granularity === 'second') {
    inputStep = 1;
  } else if (state.granularity === 'hour') {
    inputStep = 3600; 
  }

  let dateValue = state.value == null ? '' : state.value.toString();

  let inputType = state.granularity === 'day' ? 'date' : 'datetime-local';

  let timeSegments = ['hour', 'minute', 'second'];
  // Depending on the granularity, we only want to validate certain time segments
  let end = 0;
  if (timeSegments.includes(state.granularity)) {
    end = granularityMap[state.granularity];
    timeSegments = timeSegments.slice(0, end);
  }

  return {