react-day-picker 8.8.2 → 8.9.0

package/src/components/Root/Root.test.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { RenderResult } from '@testing-library/react';
+import { RenderResult, screen } from '@testing-library/react';
 import { addDays } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';
 
@@ -8,6 +6,7 @@ import { customRender } from 'test/render';
 import { getDayButton, queryMonthGrids } from 'test/selectors';
 import { freezeBeforeAll } from 'test/utils';
 
+import { MonthsProps } from 'components/Months';
 import { defaultClassNames } from 'contexts/DayPicker/defaultClassNames';
 import { ClassNames } from 'types/Styles';
 
@@ -19,7 +18,7 @@ freezeBeforeAll(today);
 let container: HTMLElement;
 let view: RenderResult;
 
-function setup(dayPickerProps: DayPickerProps = {}) {
+function render(dayPickerProps: DayPickerProps = {}) {
   view = customRender(<Root initialProps={dayPickerProps} />, dayPickerProps);
   container = view.container;
 }
@@ -27,7 +26,7 @@ function setup(dayPickerProps: DayPickerProps = {}) {
 describe('when the number of months is 1', () => {
   const props: DayPickerProps = { numberOfMonths: 1 };
   beforeEach(() => {
-    setup(props);
+    render(props);
   });
   test('should display one month grid', () => {
     expect(queryMonthGrids()).toHaveLength(1);
@@ -37,7 +36,7 @@ describe('when the number of months is 1', () => {
 describe('when the number of months is greater than 1', () => {
   const props: DayPickerProps = { numberOfMonths: 3 };
   beforeEach(() => {
-    setup(props);
+    render(props);
   });
   test('should display the specified number of month grids', () => {
     expect(queryMonthGrids()).toHaveLength(3);
@@ -49,25 +48,69 @@ describe('when using the "classNames" prop', () => {
     root: 'foo'
   };
   beforeEach(() => {
-    setup({ classNames });
+    render({ classNames });
   });
-  test('should display the specified number of month grids', () => {
+  test('should add the class to the container', () => {
     expect(container.firstChild).toHaveClass('foo');
   });
 });
 
+describe('when using a custom "Months" component', () => {
+  function CustomMonths(props: MonthsProps) {
+    return (
+      <div>
+        <div data-testid="foo" />
+        {props.children}
+      </div>
+    );
+  }
+  beforeEach(() => {
+    render({ numberOfMonths: 3, components: { Months: CustomMonths } });
+  });
+  test('should render the custom component', () => {
+    expect(screen.getByTestId('foo')).toBeInTheDocument();
+  });
+  test('should still display the specified number of months', () => {
+    expect(queryMonthGrids()).toHaveLength(3);
+  });
+});
+
 describe('when using the "id" prop', () => {
   const testId = 'foo';
-  beforeEach(() => setup({ id: testId }));
-  test('should display the specified number of month grids', () => {
+  beforeEach(() => render({ id: testId }));
+  test('should add the "id" attribute', () => {
     expect(container.firstChild).toHaveAttribute('id', testId);
   });
 });
 
+describe('when using the "nonce" prop', () => {
+  const nonce = 'foo';
+  beforeEach(() => render({ nonce }));
+  test('should add the "nonce" attribute', () => {
+    expect(container.firstChild).toHaveAttribute('nonce', nonce);
+  });
+});
+
+describe('when using the "title" prop', () => {
+  const title = 'foo';
+  beforeEach(() => render({ title }));
+  test('should add the "title" attribute', () => {
+    expect(container.firstChild).toHaveAttribute('title', title);
+  });
+});
+
+describe('when using the "lang" prop', () => {
+  const lang = 'en-US';
+  beforeEach(() => render({ lang }));
+  test('should add the "lang" attribute', () => {
+    expect(container.firstChild).toHaveAttribute('lang', lang);
+  });
+});
+
 describe('when using the "className" prop', () => {
   const props: DayPickerProps = { className: 'foo' };
   beforeEach(() => {
-    setup(props);
+    render(props);
   });
   test('should append the class name to the root element', () => {
     expect(container.firstChild).toHaveClass('rdp foo');
@@ -78,7 +121,7 @@ describe('when the "numberOfMonths" is greater than 1', () => {
   const props: DayPickerProps = { numberOfMonths: 3 };
   const expectedClassName = defaultClassNames.multiple_months;
   beforeEach(() => {
-    setup(props);
+    render(props);
   });
   test(`should have the ${expectedClassName} class name`, () => {
     expect(container.firstChild).toHaveClass(expectedClassName);
@@ -89,7 +132,7 @@ describe('when showing the week numbers', () => {
   const props: DayPickerProps = { showWeekNumber: true };
   const expectedClassName = defaultClassNames.with_weeknumber;
   beforeEach(() => {
-    setup(props);
+    render(props);
   });
   test(`should have the ${expectedClassName} class name`, () => {
     expect(container.firstChild).toHaveClass(expectedClassName);
@@ -103,7 +146,7 @@ describe('when "initialFocus" is set', () => {
   };
   describe('when a day is not selected', () => {
     beforeEach(() => {
-      setup(baseProps);
+      render(baseProps);
     });
     test('should focus today', () => {
       expect(getDayButton(today)).toHaveFocus();
@@ -121,7 +164,7 @@ describe('when "initialFocus" is set', () => {
     const selected = addDays(today, 1);
     const props: DayPickerProps = { ...baseProps, selected };
     beforeEach(() => {
-      setup(props);
+      render(props);
     });
     test('should focus the selected day', () => {
       expect(getDayButton(selected)).toHaveFocus();

package/src/components/Root/Root.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { DayPickerProps } from 'DayPicker';
 
 import { Month } from 'components/Month';
+import { Months } from 'components/Months';
 import { useDayPicker } from 'contexts/DayPicker';
 import { useFocusContext } from 'contexts/Focus';
 import { useNavigation } from 'contexts/Navigation';
@@ -65,22 +66,24 @@ export function Root({ initialProps }: RootProps): JSX.Element {
       };
     }, {});
 
+  const MonthsComponent = initialProps.components?.Months ?? Months;
+
   return (
     <div
       className={classNames.join(' ')}
       style={style}
       dir={dayPicker.dir}
       id={dayPicker.id}
+      nonce={initialProps.nonce}
+      title={initialProps.title}
+      lang={initialProps.lang}
       {...dataAttributes}
     >
-      <div
-        className={dayPicker.classNames.months}
-        style={dayPicker.styles.months}
-      >
+      <MonthsComponent>
         {navigation.displayMonths.map((month, i) => (
           <Month key={i} displayIndex={i} displayMonth={month} />
         ))}
-      </div>
+      </MonthsComponent>
     </div>
   );
 }

package/src/components/Row/Row.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 

package/src/components/Row/Row.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { getUnixTime } from 'date-fns';
 
 import { Day } from 'components/Day';

package/src/components/Table/Table.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { DayPickerProps } from 'DayPicker';
 
 import { customRender } from 'test/render/customRender';

package/src/components/Table/Table.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Footer } from 'components/Footer';
 import { Head } from 'components/Head';
 import { Row } from 'components/Row';

package/src/components/WeekNumber/WeekNumber.test.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 import { DayPickerProps } from 'DayPicker';
 
 import { customRender } from 'test/render/customRender';

package/src/components/WeekNumber/WeekNumber.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { MouseEventHandler } from 'react';
 
 import { useDayPicker } from 'contexts/DayPicker';
 
@@ -41,7 +41,7 @@ export function WeekNumber(props: WeekNumberProps): JSX.Element {
 
   const label = labelWeekNumber(Number(weekNumber), { locale });
 
-  const handleClick: React.MouseEventHandler = function (e) {
+  const handleClick: MouseEventHandler = function (e) {
     onWeekNumberClick(weekNumber, dates, e);
   };
 

package/src/components/YearsDropdown/YearsDropdown.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { addMonths, differenceInYears } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';

package/src/components/YearsDropdown/YearsDropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ChangeEventHandler } from 'react';
 
 import { setYear, startOfMonth, startOfYear } from 'date-fns';
 
@@ -45,7 +45,7 @@ export function YearsDropdown(props: YearsDropdownProps): JSX.Element {
     years.push(setYear(startOfYear(new Date()), year));
   }
 
-  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
+  const handleChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
     const newMonth = setYear(
       startOfMonth(displayMonth),
       Number(e.target.value)

package/src/contexts/DayPicker/DayPickerContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useContext } from 'react';
+import { createContext, ReactNode, useContext } from 'react';
 
 import { DayPickerProps } from 'DayPicker';
 

package/src/contexts/Focus/FocusContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useContext, useState } from 'react';
+import { createContext, PropsWithChildren, useContext, useState } from 'react';
 
 import { isSameDay } from 'date-fns';
 
@@ -54,8 +54,10 @@ export const FocusContext = createContext<FocusContextValue | undefined>(
   undefined
 );
 
+export type FocusProviderProps = PropsWithChildren;
+
 /** The provider for the {@link FocusContext}. */
-export function FocusProvider(props: { children: ReactNode }): JSX.Element {
+export function FocusProvider(props: FocusProviderProps): JSX.Element {
   const navigation = useNavigation();
   const modifiers = useModifiers();
 

package/src/contexts/Modifiers/ModifiersContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useContext } from 'react';
+import { createContext, PropsWithChildren, useContext } from 'react';
 
 import { useDayPicker } from 'contexts/DayPicker';
 import { useSelectMultiple } from 'contexts/SelectMultiple';
@@ -11,9 +11,7 @@ import { getInternalModifiers } from './utils/getInternalModifiers';
 /** The Modifiers context store the modifiers used in DayPicker. To access the value of this context, use {@link useModifiers}. */
 export const ModifiersContext = createContext<Modifiers | undefined>(undefined);
 
-export type ModifiersProviderProps = {
-  children: ReactNode;
-};
+export type ModifiersProviderProps = PropsWithChildren;
 
 /** Provide the value for the {@link ModifiersContext}. */
 export function ModifiersProvider(props: ModifiersProviderProps): JSX.Element {

package/src/contexts/Navigation/NavigationContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useContext } from 'react';
+import { createContext, ReactNode, useContext } from 'react';
 
 import { addMonths, isBefore, isSameMonth } from 'date-fns';
 

package/src/contexts/RootProvider.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PropsWithChildren } from 'react';
 
 import { ModifiersProvider } from 'contexts/Modifiers/ModifiersContext';
 import { DayPickerBase } from 'types/DayPickerBase';
@@ -11,9 +11,7 @@ import { SelectRangeProvider } from './SelectRange';
 import { SelectSingleProvider } from './SelectSingle';
 
 /** The props of {@link RootProvider}. */
-export type RootContext = DayPickerBase & {
-  children: React.ReactNode;
-};
+export type RootContext = PropsWithChildren<DayPickerBase>;
 
 /** Provide the value for all the context providers. */
 export function RootProvider(props: RootContext): JSX.Element {

package/src/contexts/SelectMultiple/SelectMultipleContext.test.ts

@@ -1,3 +1,5 @@
+import { MouseEvent } from 'react';
+
 import { addDays, addMonths } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';
 
@@ -57,7 +59,7 @@ describe('when days are selected', () => {
   describe('when `onDayClick` is called with a not selected day', () => {
     const clickedDay = addDays(selectedDay1, -1);
     const activeModifiers = {};
-    const event = {} as React.MouseEvent;
+    const event = {} as MouseEvent;
     beforeAll(() => {
       const result = renderHook(dayPickerProps);
       result.current.onDayClick?.(clickedDay, activeModifiers, event);
@@ -92,7 +94,7 @@ describe('when days are selected', () => {
     afterAll(() => {
       jest.resetAllMocks();
     });
-    const event = {} as React.MouseEvent;
+    const event = {} as MouseEvent;
     test('should call the `onDayClick` from the DayPicker props', () => {
       expect(dayPickerProps.onDayClick).toHaveBeenCalledWith(
         clickedDay,
@@ -142,7 +144,7 @@ describe('when the maximum number of days are selected', () => {
     afterAll(() => {
       jest.resetAllMocks();
     });
-    const event = {} as React.MouseEvent;
+    const event = {} as MouseEvent;
     test('should call the `onDayClick` from the DayPicker props', () => {
       expect(dayPickerProps.onDayClick).toHaveBeenCalledWith(
         clickedDay,
@@ -173,7 +175,7 @@ describe('when the minimum number of days are selected', () => {
     afterAll(() => {
       jest.resetAllMocks();
     });
-    const event = {} as React.MouseEvent;
+    const event = {} as MouseEvent;
     test('should call the `onDayClick` from the DayPicker props', () => {
       expect(dayPickerProps.onDayClick).toHaveBeenCalledWith(
         clickedDay,

package/src/contexts/SelectMultiple/SelectMultipleContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useContext } from 'react';
+import { createContext, ReactNode, useContext } from 'react';
 
 import { isSameDay } from 'date-fns';
 

package/src/contexts/SelectRange/SelectRangeContext.test.ts

@@ -1,3 +1,5 @@
+import { MouseEvent } from 'react';
+
 import {
   addDays,
   addMonths,
@@ -36,7 +38,7 @@ const initialProps: DayPickerRangeProps = {
 
 const from = today;
 const to = addDays(today, 6);
-const stubEvent = {} as React.MouseEvent;
+const stubEvent = {} as MouseEvent;
 
 describe('when no days are selected', () => {
   test('the selected days should be undefined', () => {

package/src/contexts/SelectRange/SelectRangeContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useContext } from 'react';
+import { createContext, PropsWithChildren, useContext } from 'react';
 
 import {
   addDays,
@@ -46,8 +46,7 @@ export const SelectRangeContext = createContext<
 
 type SelectRangeProviderProps = {
   initialProps: DayPickerBase;
-  children: ReactNode;
-};
+} & PropsWithChildren;
 
 /** Provides the values for the {@link SelectRangeProvider}. */
 export function SelectRangeProvider(
@@ -79,8 +78,7 @@ export function SelectRangeProvider(
 
 type SelectRangeProviderInternalProps = {
   initialProps: DayPickerRangeProps;
-  children: ReactNode;
-};
+} & PropsWithChildren;
 
 export function SelectRangeProviderInternal({
   initialProps,

package/src/contexts/SelectSingle/SelectSingleContext.test.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { MouseEvent } from 'react';
 
 import { DayPickerProps } from 'DayPicker';
 
@@ -44,7 +44,7 @@ describe('when onDayClick is called', () => {
   };
   const result = renderHook(dayPickerProps);
   const activeModifiers = {};
-  const event = {} as React.MouseEvent;
+  const event = {} as MouseEvent;
   test('should call the `onSelect` event handler', () => {
     result.current.onDayClick?.(today, activeModifiers, event);
     expect(dayPickerProps.onSelect).toHaveBeenCalledWith(
@@ -72,7 +72,7 @@ describe('if a selected day is not required', () => {
   test('should call the `onSelect` event handler with an undefined day', () => {
     const result = renderHook(dayPickerProps);
     const activeModifiers: ActiveModifiers = { selected: true };
-    const event = {} as React.MouseEvent;
+    const event = {} as MouseEvent;
     result.current.onDayClick?.(today, activeModifiers, event);
     expect(dayPickerProps.onSelect).toHaveBeenCalledWith(
       undefined,

package/src/contexts/SelectSingle/SelectSingleContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext } from 'react';
+import { createContext, ReactNode, useContext } from 'react';
 
 import { DayPickerBase } from 'types/DayPickerBase';
 import { DayPickerSingleProps, isDayPickerSingle } from 'types/DayPickerSingle';
@@ -24,7 +24,7 @@ export const SelectSingleContext = createContext<
 
 type SelectSingleProviderProps = {
   initialProps: DayPickerBase;
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 /** Provides the values for the {@link SelectSingleProvider}. */
@@ -51,7 +51,7 @@ export function SelectSingleProvider(
 
 type SelectSingleProviderInternal = {
   initialProps: DayPickerSingleProps;
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 export function SelectSingleProviderInternal({

package/src/hooks/useControlledValue/useControlledValue.ts

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import { Dispatch, SetStateAction, useState } from 'react';
 
-export type DispatchStateAction<T> = React.Dispatch<React.SetStateAction<T>>;
+export type DispatchStateAction<T> = Dispatch<SetStateAction<T>>;
 
 /**
  * Helper hook for using controlled/uncontrolled values from a component props.

package/src/hooks/useDayRender/useDayRender.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { RefObject, useEffect } from 'react';
 
 import { isSameDay } from 'date-fns';
 
@@ -46,7 +46,7 @@ export function useDayRender(
   /** The month where the date is displayed (if not the same as `date`, it means it is an "outside" day). */
   displayMonth: Date,
   /** A ref to the button element that will be target of focus when rendered (if required). */
-  buttonRef: React.RefObject<HTMLButtonElement>
+  buttonRef: RefObject<HTMLButtonElement>
 ): DayRender {
   const dayPicker = useDayPicker();
   const focusContext = useFocusContext();

package/src/hooks/useDayRender/utils/getDayStyle.ts

@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react';
+
 import { DayPickerContextValue } from 'contexts/DayPicker';
 import { ActiveModifiers } from 'types/Modifiers';
 
@@ -5,8 +7,8 @@ import { ActiveModifiers } from 'types/Modifiers';
 export function getDayStyle(
   dayPicker: Pick<DayPickerContextValue, 'modifiersStyles' | 'styles'>,
   activeModifiers: ActiveModifiers
-): React.CSSProperties {
-  let style: React.CSSProperties = {
+): CSSProperties {
+  let style: CSSProperties = {
     ...dayPicker.styles.day
   };
   Object.keys(activeModifiers).forEach((modifier) => {

package/src/hooks/useId/useId.ts

@@ -67,7 +67,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
  * server hydration and never again, SO BACK OFF ALRIGHT?
  */
 
-import * as React from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 
 function canUseDOM() {
   return !!(
@@ -100,9 +100,7 @@ function canUseDOM() {
  * @param effect
  * @param deps
  */
-const useIsomorphicLayoutEffect = canUseDOM()
-  ? React.useLayoutEffect
-  : React.useEffect;
+const useIsomorphicLayoutEffect = canUseDOM() ? useLayoutEffect : useEffect;
 
 let serverHandoffComplete = false;
 let id = 0;
@@ -140,7 +138,7 @@ function useId(providedId?: number | string | undefined | null) {
   // If this instance isn't part of the initial render, we don't have to do the
   // double render/patch-up dance. We can just generate the ID and return it.
   let initialId = providedId ?? (serverHandoffComplete ? genId() : null);
-  let [id, setId] = React.useState(initialId);
+  let [id, setId] = useState(initialId);
 
   useIsomorphicLayoutEffect(() => {
     if (id === null) {
@@ -153,7 +151,7 @@ function useId(providedId?: number | string | undefined | null) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (serverHandoffComplete === false) {
       // Flag all future uses of `useId` to skip the update dance. This is in
       // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
@@ -165,4 +163,4 @@ function useId(providedId?: number | string | undefined | null) {
   return providedId ?? id ?? undefined;
 }
 
-export { useId };
+export { useId, canUseDOM };

package/src/hooks/useId/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,31 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+import { canUseDOM } from './useId';
+
+/**
+ * React currently throws a warning when using useLayoutEffect on the server. To
+ * get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect in the browser. We occasionally need useLayoutEffect to
+ * ensure we don't get a render flash for certain operations, but we may also
+ * need affected components to render on the server. One example is when setting
+ * a component's descendants to retrieve their index values.
+ *
+ * Important to note that using this hook as an escape hatch will break the
+ * eslint dependency warnings unless you rename the import to `useLayoutEffect`.
+ * Use sparingly only when the effect won't effect the rendered HTML to avoid
+ * any server/client mismatch.
+ *
+ * If a useLayoutEffect is needed and the result would create a mismatch, it's
+ * likely that the component in question shouldn't be rendered on the server at
+ * all, so a better approach would be to lazily render those in a parent
+ * component after client-side hydration.
+ *
+ * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
+ *
+ * @param effect
+ * @param deps
+ */
+export const useIsomorphicLayoutEffect = canUseDOM()
+  ? useLayoutEffect
+  : useEffect;

package/src/hooks/useInput/useInput.ts

@@ -1,4 +1,9 @@
-import React, { useState } from 'react';
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  InputHTMLAttributes,
+  useState
+} from 'react';
 
 import { differenceInCalendarDays, format as _format, parse } from 'date-fns';
 import { enUS } from 'date-fns/locale';
@@ -14,8 +19,8 @@ import {
 import { isValidDate } from './utils/isValidDate';
 
 /** The props to attach to the input field when using {@link useInput}. */
-export type InputHTMLAttributes = Pick<
-  React.InputHTMLAttributes<HTMLInputElement>,
+export type InputProps = Pick<
+  InputHTMLAttributes<HTMLInputElement>,
   'onBlur' | 'onChange' | 'onFocus' | 'value' | 'placeholder'
 >;
 
@@ -62,7 +67,7 @@ export interface UseInputValue {
   /** The props to pass to a DayPicker component. */
   dayPickerProps: InputDayPickerProps;
   /** The props to pass to an input field. */
-  inputProps: InputHTMLAttributes;
+  inputProps: InputProps;
   /** A function to reset to the initial state. */
   reset: () => void;
   /** A function to set the selected day. */
@@ -120,7 +125,7 @@ export function useInput(options: UseInputOptions = {}): UseInputValue {
   // When changing the input field, save its value in state and check if the
   // string is a valid date. If it is a valid day, set it as selected and update
   // the calendar’s month.
-  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     setInputValue(e.target.value);
     const day = parseValue(e.target.value);
     const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
@@ -135,7 +140,7 @@ export function useInput(options: UseInputOptions = {}): UseInputValue {
 
   // Special case for _required_ fields: on blur, if the value of the input is not
   // a valid date, reset the calendar and the input value.
-  const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
     const day = parseValue(e.target.value);
     if (!isValidDate(day)) {
       reset();
@@ -144,7 +149,7 @@ export function useInput(options: UseInputOptions = {}): UseInputValue {
 
   // When focusing, make sure DayPicker visualizes the month of the date in the
   // input field.
-  const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+  const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
     if (!e.target.value) {
       reset();
       return;
@@ -166,7 +171,7 @@ export function useInput(options: UseInputOptions = {}): UseInputValue {
     today
   };
 
-  const inputProps: InputHTMLAttributes = {
+  const inputProps: InputProps = {
     onBlur: handleBlur,
     onChange: handleChange,
     onFocus: handleFocus,