chore: update date-fns imports (#1436)

packages/react-day-picker/package.json

@@ -14,7 +14,6 @@
   },
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
-  "browser": "dist/react-day-picker.min.js",
   "unpkg": "dist/react-day-picker.min.js",
   "types": "dist/index.d.ts",
   "style": "dist/style.css",

packages/react-day-picker/src/components/Head/utils/getWeekdays.ts

@@ -1,4 +1,7 @@
-import { addDays, Locale, startOfWeek } from 'date-fns';
+import addDays from 'date-fns/addDays';
+import startOfWeek from 'date-fns/startOfWeek';
+
+import type { Locale } from 'date-fns';
 
 /**
  * Generate a series of 7 days, starting from the week, to use for formatting

packages/react-day-picker/src/components/MonthsDropdown/MonthsDropdown.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-import { isSameYear, setMonth as setDateMonth, startOfMonth } from 'date-fns';
+import isSameYear from 'date-fns/isSameYear';
+import setMonth from 'date-fns/setMonth';
+import startOfMonth from 'date-fns/startOfMonth';
 
 import { Dropdown } from 'components/Dropdown';
 import { useDayPicker } from 'contexts/DayPicker';
@@ -36,22 +38,19 @@ export function MonthsDropdown(props: MonthsDropdownProps): JSX.Element {
     // only display the months included in the range
     const date = startOfMonth(fromDate);
     for (let month = fromDate.getMonth(); month <= toDate.getMonth(); month++) {
-      dropdownMonths.push(setDateMonth(date, month));
+      dropdownMonths.push(setMonth(date, month));
     }
   } else {
     // display all the 12 months
     const date = startOfMonth(new Date()); // Any date should be OK, as we just need the year
     for (let month = 0; month <= 11; month++) {
-      dropdownMonths.push(setDateMonth(date, month));
+      dropdownMonths.push(setMonth(date, month));
     }
   }
 
   const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
     const selectedMonth = Number(e.target.value);
-    const newMonth = setDateMonth(
-      startOfMonth(props.displayMonth),
-      selectedMonth
-    );
+    const newMonth = setMonth(startOfMonth(props.displayMonth), selectedMonth);
     props.onChange(newMonth);
   };
 

packages/react-day-picker/src/components/Row/Row.tsx

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

packages/react-day-picker/src/components/Table/utils/daysToMonthWeeks.ts

@@ -1,11 +1,10 @@
-import {
-  addDays,
-  differenceInCalendarDays,
-  endOfWeek,
-  getWeek,
-  Locale,
-  startOfWeek
-} from 'date-fns';
+import type { Locale } from 'date-fns';
+
+import addDays from 'date-fns/addDays';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import endOfWeek from 'date-fns/endOfWeek';
+import getWeek from 'date-fns/getWeek';
+import startOfWeek from 'date-fns/startOfWeek';
 
 import { MonthWeek } from './getMonthWeeks';
 

packages/react-day-picker/src/components/Table/utils/getMonthWeeks.ts

@@ -1,10 +1,9 @@
-import {
-  addWeeks,
-  endOfMonth,
-  getWeeksInMonth,
-  Locale,
-  startOfMonth
-} from 'date-fns';
+import type { Locale } from 'date-fns';
+
+import addWeeks from 'date-fns/addWeeks';
+import endOfMonth from 'date-fns/endOfMonth';
+import getWeeksInMonth from 'date-fns/getWeeksInMonth';
+import startOfMonth from 'date-fns/startOfMonth';
 
 import { daysToMonthWeeks } from './daysToMonthWeeks';
 

packages/react-day-picker/src/components/YearsDropdown/YearsDropdown.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-import { setYear, startOfMonth, startOfYear } from 'date-fns';
+import setYear from 'date-fns/setYear';
+import startOfMonth from 'date-fns/startOfMonth';
+import startOfYear from 'date-fns/startOfYear';
 
 import { Dropdown } from 'components/Dropdown';
 import { useDayPicker } from 'contexts/DayPicker';

packages/react-day-picker/src/contexts/DayPicker/formatters/formatCaption.ts

@@ -1,4 +1,5 @@
-import { format, Locale } from 'date-fns';
+import type { Locale } from 'date-fns';
+import format from 'date-fns/format';
 
 /**
  * The default formatter for the caption.

packages/react-day-picker/src/contexts/DayPicker/formatters/formatDay.ts

@@ -1,4 +1,5 @@
-import { format, Locale } from 'date-fns';
+import type { Locale } from 'date-fns';
+import format from 'date-fns/format';
 
 /**
  * The default formatter for the Day button.

packages/react-day-picker/src/contexts/DayPicker/formatters/formatMonthCaption.ts

@@ -1,4 +1,5 @@
-import { format, Locale } from 'date-fns';
+import type { Locale } from 'date-fns';
+import format from 'date-fns/format';
 
 /**
  * The default formatter for the Month caption.

packages/react-day-picker/src/contexts/DayPicker/formatters/formatWeekdayName.ts

@@ -1,4 +1,5 @@
-import { format, Locale } from 'date-fns';
+import type { Locale } from 'date-fns';
+import format from 'date-fns/format';
 
 /**
  * The default formatter for the name of the weekday.

packages/react-day-picker/src/contexts/DayPicker/formatters/formatYearCaption.ts

@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 
 /**
  * The default formatter for the Year caption.

packages/react-day-picker/src/contexts/DayPicker/labels/labelDay.ts

@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 
 import { DayLabel } from 'types/Labels';
 

packages/react-day-picker/src/contexts/DayPicker/labels/labelWeekday.ts

@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 
 import { WeekdayLabel } from 'types/Labels';
 

packages/react-day-picker/src/contexts/DayPicker/utils/parseFromToProps.ts

@@ -1,4 +1,6 @@
-import { startOfDay, startOfMonth, endOfMonth } from 'date-fns';
+import endOfMonth from 'date-fns/endOfMonth';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
 
 import { DayPickerBase } from 'types/DayPickerBase';
 

packages/react-day-picker/src/contexts/Focus/FocusContext.tsx

@@ -1,13 +1,11 @@
 import React, { createContext, ReactNode, useState } from 'react';
 
-import {
-  addDays,
-  addMonths,
-  addWeeks,
-  addYears,
-  endOfWeek,
-  startOfWeek
-} from 'date-fns';
+import addDays from 'date-fns/addDays';
+import addMonths from 'date-fns/addMonths';
+import addWeeks from 'date-fns/addWeeks';
+import addYears from 'date-fns/addYears';
+import endOfWeek from 'date-fns/endOfWeek';
+import startOfWeek from 'date-fns/startOfWeek';
 
 import { useModifiers } from '../Modifiers';
 import { useNavigation } from '../Navigation';

packages/react-day-picker/src/contexts/Focus/utils/getInitialFocusTarget.tsx

@@ -1,4 +1,6 @@
-import { addDays, endOfMonth, startOfMonth } from 'date-fns';
+import addDays from 'date-fns/addDays';
+import endOfMonth from 'date-fns/endOfMonth';
+import startOfMonth from 'date-fns/startOfMonth';
 
 import { getActiveModifiers } from 'contexts/Modifiers';
 import { Modifiers } from 'types/Modifiers';

packages/react-day-picker/src/contexts/Modifiers/utils/getActiveModifiers.ts

@@ -1,4 +1,4 @@
-import { isSameMonth } from 'date-fns';
+import isSameMonth from 'date-fns/isSameMonth';
 
 import { ActiveModifiers, Modifiers } from 'types/Modifiers';
 

packages/react-day-picker/src/contexts/Modifiers/utils/isDateInRange.ts

@@ -1,4 +1,5 @@
-import { differenceInCalendarDays, isSameDay } from 'date-fns';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import isSameDay from 'date-fns/isSameDay';
 
 import { DateRange } from 'types/Matchers';
 

packages/react-day-picker/src/contexts/Modifiers/utils/isMatch.ts

@@ -1,4 +1,6 @@
-import { differenceInCalendarDays, isDate, isSameDay } from 'date-fns';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import isDate from 'date-fns/isDate';
+import isSameDay from 'date-fns/isSameDay';
 
 import {
   isDateAfterType,

packages/react-day-picker/src/contexts/Navigation/NavigationContext.tsx

@@ -1,6 +1,8 @@
 import React, { createContext, ReactNode } from 'react';
 
-import { addMonths, isBefore, isSameMonth } from 'date-fns';
+import addMonths from 'date-fns/addMonths';
+import isBefore from 'date-fns/isBefore';
+import isSameMonth from 'date-fns/isSameMonth';
 
 import { useDayPicker } from '../DayPicker';
 import { useNavigationState } from './useNavigationState';

packages/react-day-picker/src/contexts/Navigation/useNavigationState.ts

@@ -1,4 +1,4 @@
-import { startOfMonth } from 'date-fns';
+import startOfMonth from 'date-fns/startOfMonth';
 
 import { useDayPicker } from 'contexts/DayPicker';
 import { useControlledValue } from 'hooks/useControlledValue';

packages/react-day-picker/src/contexts/Navigation/utils/getDisplayMonths.ts

@@ -1,4 +1,6 @@
-import { addMonths, differenceInCalendarMonths, startOfMonth } from 'date-fns';
+import addMonths from 'date-fns/addMonths';
+import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
+import startOfMonth from 'date-fns/startOfMonth';
 
 /**
  * Return the months to display in the component according to the number of

packages/react-day-picker/src/contexts/Navigation/utils/getInitialMonth.ts

@@ -1,4 +1,6 @@
-import { addMonths, differenceInCalendarMonths, startOfMonth } from 'date-fns';
+import addMonths from 'date-fns/addMonths';
+import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
+import startOfMonth from 'date-fns/startOfMonth';
 
 import { DayPickerContextValue } from 'contexts/DayPicker';
 

packages/react-day-picker/src/contexts/Navigation/utils/getNextMonth.ts

@@ -1,4 +1,6 @@
-import { addMonths, differenceInCalendarMonths, startOfMonth } from 'date-fns';
+import addMonths from 'date-fns/addMonths';
+import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
+import startOfMonth from 'date-fns/startOfMonth';
 
 /**
  * Returns the next month the user can navigate to according to the given

packages/react-day-picker/src/contexts/Navigation/utils/getPreviousMonth.ts

@@ -1,4 +1,6 @@
-import { addMonths, differenceInCalendarMonths, startOfMonth } from 'date-fns';
+import addMonths from 'date-fns/addMonths';
+import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
+import startOfMonth from 'date-fns/startOfMonth';
 
 /**
  * Returns the next previous the user can navigate to, according to the given

packages/react-day-picker/src/contexts/SelectMultiple/SelectMultipleContext.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, ReactNode } from 'react';
 
-import { isSameDay } from 'date-fns';
+import isSameDay from 'date-fns/isSameDay';
 
 import { DayPickerBase } from 'types/DayPickerBase';
 import {

packages/react-day-picker/src/contexts/SelectRange/SelectRangeContext.tsx

@@ -1,6 +1,8 @@
 import React, { createContext, ReactNode } from 'react';
 
-import { differenceInCalendarDays, isAfter, isBefore } from 'date-fns';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
 
 import { DayPickerBase } from 'types/DayPickerBase';
 import { DayPickerRangeProps, isDayPickerRange } from 'types/DayPickerRange';

packages/react-day-picker/src/contexts/SelectRange/utils/addToRange.ts

@@ -1,4 +1,6 @@
-import { isAfter, isBefore, isSameDay } from 'date-fns';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+import isSameDay from 'date-fns/isSameDay';
 
 import { DateRange } from 'types/Matchers';
 

packages/react-day-picker/src/hooks/useDayRender/useDayRender.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 
-import { isSameDay } from 'date-fns';
+import isSameDay from 'date-fns/isSameDay';
 
 import { ButtonProps } from 'components/Button';
 import { DayContent } from 'components/DayContent';

packages/react-day-picker/src/hooks/useInput/useInput.ts

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 
-import { differenceInCalendarDays, format as _format, parse } from 'date-fns';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import _format from 'date-fns/format';
 import enUS from 'date-fns/locale/en-US';
+import parse from 'date-fns/parse';
 
 import { parseFromToProps } from 'contexts/DayPicker/utils';
 import { DayPickerBase } from 'types/DayPickerBase';

packages/react-day-picker/src/types/DayPickerBase.ts

@@ -1,4 +1,4 @@
-import { Locale } from 'date-fns';
+import type { Locale } from 'date-fns';
 
 import { CaptionLayout, CaptionProps } from 'components/Caption';
 import { CaptionLabelProps } from 'components/CaptionLabel';

packages/react-day-picker/src/types/Labels.ts

@@ -1,4 +1,4 @@
-import { Locale } from 'date-fns';
+import type { Locale } from 'date-fns';
 
 import { ActiveModifiers } from 'types/Modifiers';
 

website/examples/custom-single.tsx

@@ -7,7 +7,7 @@ export default function App() {
   const handleDayClick = (day: Date) => setSelectedDay(day);
 
   const footer = selectedDay ? (
-    <p>You selected ${selectedDay.toDateString()}</p>
+    <p>You selected {selectedDay.toDateString()}.</p>
   ) : (
     <p>Please pick a day.</p>
   );

website/examples/multiple-min-max.tsx

@@ -6,9 +6,11 @@ export default function App() {
   const [days, setDays] = React.useState<Date[]>();
 
   const footer =
-    days && days.length > 0
-      ? `You selected ${days.length} day(s).`
-      : `Please pick one or more days.`;
+    days && days.length > 0 ? (
+      <p>You selected {days.length} day(s).</p>
+    ) : (
+      <p>Please pick one or more days.</p>
+    );
 
   return (
     <DayPicker

website/examples/multiple.tsx

@@ -7,9 +7,11 @@ export default function App() {
   const [days, setDays] = React.useState<Date[] | undefined>(initialDays);
 
   const footer =
-    days && days.length > 0
-      ? `You selected ${days.length} day(s).`
-      : `Please pick one or more days.`;
+    days && days.length > 0 ? (
+      <p>You selected {days.length} day(s).</p>
+    ) : (
+      <p>Please pick one or more days.</p>
+    );
 
   return (
     <DayPicker