react-day-picker 8.0.0 → 8.0.3

package/README.md

@@ -3,8 +3,9 @@
 DayPicker is a date picker component for [React](https://reactjs.org).
 
 ```bash
-$ npm install react-day-picker date-fns # using npm
-$ yarn add react-day-picker date-fns    # using yarn
+$ npm install react-day-picker date-fns  # using npm
+$ pnpm install react-day-picker date-fns # using pnpm
+$ yarn add react-day-picker date-fns     # using yarn
 ```
 
 <a href="https://www.npmjs.com/package/react-day-picker">

package/dist/components/Caption/Caption.d.ts

@@ -13,7 +13,7 @@ export interface CaptionProps {
  */
 export declare type CaptionLayout = 'dropdown' | 'buttons';
 /**
- * Render the caption of a month, which includes title and navigation buttons.
- * The caption has a different layout when setting the [[DayPickerProps.captionLayout]] prop.
+ * Render the caption of a month. The caption has a different layout when
+ * setting the [[DayPickerProps.captionLayout]] prop.
  */
 export declare function Caption(props: CaptionProps): JSX.Element;

package/dist/components/CaptionDropdowns/CaptionDropdowns.d.ts

@@ -0,0 +1,5 @@
+import { CaptionProps } from '../../components/Caption/Caption';
+/**
+ * Render a caption with the dropdowns to navigate between months and years.
+ */
+export declare function CaptionDropdowns(props: CaptionProps): JSX.Element;

package/dist/components/CaptionDropdowns/index.d.ts

@@ -0,0 +1 @@
+export * from './CaptionDropdowns';

package/dist/components/CaptionNavigation/CaptionNavigation.d.ts

@@ -0,0 +1,5 @@
+import { CaptionProps } from '../../components/Caption/Caption';
+/**
+ * Render a caption with a button-based navigation.
+ */
+export declare function CaptionNavigation(props: CaptionProps): JSX.Element;

package/dist/components/CaptionNavigation/index.d.ts

@@ -0,0 +1 @@
+export * from './CaptionNavigation';

package/dist/components/Head/utils/getWeekdays.d.ts

@@ -1,6 +1,8 @@
-import { Locale } from 'date-fns';
+import type { Locale } from 'date-fns';
 /**
  * Generate a series of 7 days, starting from the week, to use for formatting
  * the weekday names (Monday, Tuesday, etc.).
  */
-export declare function getWeekdays(locale?: Locale): Date[];
+export declare function getWeekdays(locale?: Locale, 
+/** The index of the first day of the week (0 - Sunday) */
+weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6): Date[];

package/dist/components/Table/utils/daysToMonthWeeks.d.ts

@@ -1,4 +1,4 @@
-import { Locale } from 'date-fns';
+import type { Locale } from 'date-fns';
 import { MonthWeek } from './getMonthWeeks';
 /** Return the weeks between two dates.  */
 export declare function daysToMonthWeeks(fromDate: Date, toDate: Date, options?: {

package/dist/components/Table/utils/getMonthWeeks.d.ts

@@ -1,4 +1,4 @@
-import { Locale } from 'date-fns';
+import type { Locale } from 'date-fns';
 /** Represents a week in the month.*/
 export declare type MonthWeek = {
     /** The week number from the start of the year. */

package/dist/contexts/DayPicker/formatters/formatCaption.d.ts

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

package/dist/contexts/DayPicker/formatters/formatDay.d.ts

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

package/dist/contexts/DayPicker/formatters/formatMonthCaption.d.ts

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

package/dist/contexts/DayPicker/formatters/formatWeekdayName.d.ts

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

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 export * from './DayPicker';
 export * from './components/Button';
 export * from './components/Caption';
+export * from './components/CaptionDropdowns';
 export * from './components/CaptionLabel';
+export * from './components/CaptionNavigation';
 export * from './components/Day';
 export * from './components/DayContent';
 export * from './components/Dropdown';

package/dist/index.esm.js

@@ -1,6 +1,30 @@
 import React, { useLayoutEffect, useEffect, useState, createContext, useContext, forwardRef, useRef } from 'react';
-import { format, startOfDay, startOfMonth, isSameYear, setMonth, setYear, startOfYear, differenceInCalendarMonths, addMonths, isSameMonth, isBefore, startOfWeek, addDays, isSameDay, isAfter, differenceInCalendarDays, isDate, endOfMonth, addWeeks, endOfWeek, addYears, getUnixTime, getWeek, getWeeksInMonth, parse } from 'date-fns';
 import enUS from 'date-fns/locale/en-US';
+import format from 'date-fns/format';
+import endOfMonth from 'date-fns/endOfMonth';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import isSameYear from 'date-fns/isSameYear';
+import setMonth from 'date-fns/setMonth';
+import setYear from 'date-fns/setYear';
+import startOfYear from 'date-fns/startOfYear';
+import addMonths from 'date-fns/addMonths';
+import isBefore from 'date-fns/isBefore';
+import isSameMonth from 'date-fns/isSameMonth';
+import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
+import addDays from 'date-fns/addDays';
+import startOfWeek from 'date-fns/startOfWeek';
+import getUnixTime from 'date-fns/getUnixTime';
+import isSameDay from 'date-fns/isSameDay';
+import addWeeks from 'date-fns/addWeeks';
+import addYears from 'date-fns/addYears';
+import endOfWeek from 'date-fns/endOfWeek';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import isAfter from 'date-fns/isAfter';
+import isDate from 'date-fns/isDate';
+import getWeeksInMonth from 'date-fns/getWeeksInMonth';
+import getWeek from 'date-fns/getWeek';
+import parse from 'date-fns/parse';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -389,7 +413,7 @@ function parseFromToProps(props) {
         fromDate = new Date(fromYear, 0, 1);
     }
     if (toMonth) {
-        toDate = startOfMonth(toMonth);
+        toDate = endOfMonth(toMonth);
     }
     else if (toYear) {
         toDate = new Date(toYear, 11, 31);
@@ -470,7 +494,8 @@ function DayPickerProvider(props) {
         style: initialProps.style,
         styles: __assign(__assign({}, defaults.styles), initialProps.styles),
         toDate: toDate,
-        today: (_d = initialProps.today) !== null && _d !== void 0 ? _d : defaults.today
+        today: (_d = initialProps.today) !== null && _d !== void 0 ? _d : defaults.today,
+        weekStartsOn: initialProps.weekStartsOn
     };
     return (React.createElement(DayPickerContext.Provider, { value: value }, props.children));
 }
@@ -553,63 +578,6 @@ function MonthsDropdown(props) {
     return (React.createElement(DropdownComponent, { "aria-label": labelMonthDropdown(), className: classNames.dropdown_month, style: styles.dropdown_month, onChange: handleChange, value: props.displayMonth.getMonth(), caption: formatMonthCaption(props.displayMonth, { locale: locale }) }, dropdownMonths.map(function (m) { return (React.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale: locale }))); })));
 }
 
-/**
- * Render the "previous month" button in the navigation.
- */
-function IconLeft(props) {
-    return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
-        React.createElement("path", { d: "M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z", fill: "currentColor", fillRule: "nonzero" })));
-}
-
-/**
- * Render the "next month" button in the navigation.
- */
-function IconRight(props) {
-    return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
-        React.createElement("path", { d: "M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z", fill: "currentColor" })));
-}
-
-/**
- * Render a button HTML element applying the reset class name.
- */
-var Button = forwardRef(function (props, ref) {
-    var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
-    var classNamesArr = [classNames.button_reset, classNames.button];
-    if (props.className) {
-        classNamesArr.push(props.className);
-    }
-    var className = classNamesArr.join(' ');
-    var style = __assign(__assign({}, styles.button_reset), styles.button);
-    if (props.style) {
-        Object.assign(style, props.style);
-    }
-    return (React.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
-});
-
-/** A component rendering the navigation buttons or the drop-downs. */
-function Navigation(props) {
-    var _a, _b;
-    var _c = useDayPicker(), dir = _c.dir, locale = _c.locale, classNames = _c.classNames, styles = _c.styles, _d = _c.labels, labelPrevious = _d.labelPrevious, labelNext = _d.labelNext, components = _c.components;
-    if (!props.nextMonth && !props.previousMonth) {
-        return React.createElement(React.Fragment, null);
-    }
-    var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
-    var previousClassName = [
-        classNames.nav_button,
-        classNames.nav_button_previous
-    ].join(' ');
-    var nextLabel = labelNext(props.nextMonth, { locale: locale });
-    var nextClassName = [
-        classNames.nav_button,
-        classNames.nav_button_next
-    ].join(' ');
-    var IconRightComponent = (_a = components === null || components === void 0 ? void 0 : components.IconRight) !== null && _a !== void 0 ? _a : IconRight;
-    var IconLeftComponent = (_b = components === null || components === void 0 ? void 0 : components.IconLeft) !== null && _b !== void 0 ? _b : IconLeft;
-    return (React.createElement("div", { className: classNames.nav, style: styles.nav },
-        !props.hidePrevious && (React.createElement(Button, { "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick }, dir === 'rtl' ? (React.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
-        !props.hideNext && (React.createElement(Button, { "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick }, dir === 'rtl' ? (React.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }))))));
-}
-
 /**
  * Render a dropdown to change the year. Take in account the `nav.fromDate` and
  * `toDate` from context.
@@ -809,30 +777,89 @@ function useNavigation() {
 }
 
 /**
- * Render the caption of a month, which includes title and navigation buttons.
- * The caption has a different layout when setting the [[DayPickerProps.captionLayout]] prop.
+ * Render a caption with the dropdowns to navigate between months and years.
  */
-function Caption(props) {
+function CaptionDropdowns(props) {
     var _a;
-    var _b;
-    var _c = useDayPicker(), classNames = _c.classNames, numberOfMonths = _c.numberOfMonths, disableNavigation = _c.disableNavigation, styles = _c.styles, captionLayout = _c.captionLayout, onMonthChange = _c.onMonthChange, dir = _c.dir, components = _c.components;
-    var _d = useNavigation(), previousMonth = _d.previousMonth, nextMonth = _d.nextMonth, goToMonth = _d.goToMonth, displayMonths = _d.displayMonths;
-    var handlePreviousClick = function () {
-        if (!previousMonth)
-            return;
-        goToMonth(previousMonth);
-        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(previousMonth);
-    };
-    var handleNextClick = function () {
-        if (!nextMonth)
-            return;
-        goToMonth(nextMonth);
-        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextMonth);
-    };
+    var _b = useDayPicker(), classNames = _b.classNames, styles = _b.styles, onMonthChange = _b.onMonthChange, components = _b.components;
+    var goToMonth = useNavigation().goToMonth;
     var handleMonthChange = function (newMonth) {
         goToMonth(newMonth);
         onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newMonth);
     };
+    var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
+    var captionLabel = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
+    return (React.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
+        React.createElement("div", { className: classNames.vhidden }, captionLabel),
+        React.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
+        React.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
+}
+
+/**
+ * Render the "previous month" button in the navigation.
+ */
+function IconLeft(props) {
+    return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
+        React.createElement("path", { d: "M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z", fill: "currentColor", fillRule: "nonzero" })));
+}
+
+/**
+ * Render the "next month" button in the navigation.
+ */
+function IconRight(props) {
+    return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
+        React.createElement("path", { d: "M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z", fill: "currentColor" })));
+}
+
+/**
+ * Render a button HTML element applying the reset class name.
+ */
+var Button = forwardRef(function (props, ref) {
+    var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
+    var classNamesArr = [classNames.button_reset, classNames.button];
+    if (props.className) {
+        classNamesArr.push(props.className);
+    }
+    var className = classNamesArr.join(' ');
+    var style = __assign(__assign({}, styles.button_reset), styles.button);
+    if (props.style) {
+        Object.assign(style, props.style);
+    }
+    return (React.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
+});
+
+/** A component rendering the navigation buttons or the drop-downs. */
+function Navigation(props) {
+    var _a, _b;
+    var _c = useDayPicker(), dir = _c.dir, locale = _c.locale, classNames = _c.classNames, styles = _c.styles, _d = _c.labels, labelPrevious = _d.labelPrevious, labelNext = _d.labelNext, components = _c.components;
+    if (!props.nextMonth && !props.previousMonth) {
+        return React.createElement(React.Fragment, null);
+    }
+    var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
+    var previousClassName = [
+        classNames.nav_button,
+        classNames.nav_button_previous
+    ].join(' ');
+    var nextLabel = labelNext(props.nextMonth, { locale: locale });
+    var nextClassName = [
+        classNames.nav_button,
+        classNames.nav_button_next
+    ].join(' ');
+    var IconRightComponent = (_a = components === null || components === void 0 ? void 0 : components.IconRight) !== null && _a !== void 0 ? _a : IconRight;
+    var IconLeftComponent = (_b = components === null || components === void 0 ? void 0 : components.IconLeft) !== null && _b !== void 0 ? _b : IconLeft;
+    return (React.createElement("div", { className: classNames.nav, style: styles.nav },
+        !props.hidePrevious && (React.createElement(Button, { "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick }, dir === 'rtl' ? (React.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
+        !props.hideNext && (React.createElement(Button, { "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick }, dir === 'rtl' ? (React.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }))))));
+}
+
+/**
+ * Render a caption with a button-based navigation.
+ */
+function CaptionNavigation(props) {
+    var _a;
+    var _b;
+    var _c = useDayPicker(), numberOfMonths = _c.numberOfMonths, onMonthChange = _c.onMonthChange, dir = _c.dir, components = _c.components;
+    var _d = useNavigation(), previousMonth = _d.previousMonth, nextMonth = _d.nextMonth, goToMonth = _d.goToMonth, displayMonths = _d.displayMonths;
     var displayIndex = displayMonths.findIndex(function (month) {
         return isSameMonth(props.displayMonth, month);
     });
@@ -843,24 +870,44 @@ function Caption(props) {
     }
     var hideNext = numberOfMonths > 1 && (isFirst || !isLast);
     var hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
+    var handlePreviousClick = function () {
+        if (!previousMonth)
+            return;
+        goToMonth(previousMonth);
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(previousMonth);
+    };
+    var handleNextClick = function () {
+        if (!nextMonth)
+            return;
+        goToMonth(nextMonth);
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextMonth);
+    };
     var CaptionLabelComponent = (_b = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _b !== void 0 ? _b : CaptionLabel;
     var captionLabel = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
-    var captionContent;
+    return (React.createElement(React.Fragment, null,
+        captionLabel,
+        React.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })));
+}
+
+/**
+ * Render the caption of a month. The caption has a different layout when
+ * setting the [[DayPickerProps.captionLayout]] prop.
+ */
+function Caption(props) {
+    var _a;
+    var _b = useDayPicker(), classNames = _b.classNames, disableNavigation = _b.disableNavigation, styles = _b.styles, captionLayout = _b.captionLayout, components = _b.components;
+    var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
+    var caption;
     if (disableNavigation) {
-        captionContent = captionLabel;
+        caption = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
     }
     else if (captionLayout === 'dropdown') {
-        captionContent = (React.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
-            React.createElement("div", { className: classNames.vhidden }, captionLabel),
-            React.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
-            React.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
+        caption = (React.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
     }
     else {
-        captionContent = (React.createElement(React.Fragment, null,
-            captionLabel,
-            React.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })));
+        caption = (React.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id }));
     }
-    return (React.createElement("div", { className: classNames.caption, style: styles.caption }, captionContent));
+    return (React.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
 }
 
 /** Render the Footer component (empty as default).*/
@@ -877,8 +924,10 @@ function Footer() {
  * Generate a series of 7 days, starting from the week, to use for formatting
  * the weekday names (Monday, Tuesday, etc.).
  */
-function getWeekdays(locale) {
-    var start = startOfWeek(new Date(), { locale: locale });
+function getWeekdays(locale, 
+/** The index of the first day of the week (0 - Sunday) */
+weekStartsOn) {
+    var start = startOfWeek(new Date(), { locale: locale, weekStartsOn: weekStartsOn });
     var days = [];
     for (var i = 0; i < 7; i++) {
         var day = addDays(start, i);
@@ -891,8 +940,8 @@ function getWeekdays(locale) {
  * Render the Head component - i.e. the table head with the weekday names.
  */
 function Head() {
-    var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, formatWeekdayName = _a.formatters.formatWeekdayName, labelWeekday = _a.labels.labelWeekday;
-    var weekdays = getWeekdays(locale);
+    var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, weekStartsOn = _a.weekStartsOn, formatWeekdayName = _a.formatters.formatWeekdayName, labelWeekday = _a.labels.labelWeekday;
+    var weekdays = getWeekdays(locale, weekStartsOn);
     return (React.createElement("thead", { style: styles.head, className: classNames.head },
         React.createElement("tr", { style: styles.head_row, className: classNames.head_row },
             showWeekNumber && (React.createElement("th", { scope: "col", style: styles.head_cell, className: classNames.head_cell })),
@@ -1234,7 +1283,6 @@ function isDateInterval(matcher) {
 }
 /** Returns true if `value` is a [[DateRange]] type. */
 function isDateRange(value) {
-    // TODO: Check if dates?!
     return Boolean(value && typeof value === 'object' && 'from' in value);
 }
 /** Returns true if `value` is of type [[DateAfter]]. */
@@ -1930,10 +1978,11 @@ month, options) {
 /** Render the table with the calendar. */
 function Table(props) {
     var _a, _b, _c;
-    var _d = useDayPicker(), locale = _d.locale, classNames = _d.classNames, styles = _d.styles, hideHead = _d.hideHead, fixedWeeks = _d.fixedWeeks, components = _d.components;
+    var _d = useDayPicker(), locale = _d.locale, classNames = _d.classNames, styles = _d.styles, hideHead = _d.hideHead, fixedWeeks = _d.fixedWeeks, components = _d.components, weekStartsOn = _d.weekStartsOn;
     var weeks = getMonthWeeks(props.displayMonth, {
         useFixedWeeks: Boolean(fixedWeeks),
-        locale: locale
+        locale: locale,
+        weekStartsOn: weekStartsOn
     });
     var HeadComponent = (_a = components === null || components === void 0 ? void 0 : components.Head) !== null && _a !== void 0 ? _a : Head;
     var RowComponent = (_b = components === null || components === void 0 ? void 0 : components.Row) !== null && _b !== void 0 ? _b : Row;
@@ -2134,5 +2183,5 @@ function isDayPickerDefault(props) {
     return props.mode === undefined || props.mode === 'default';
 }
 
-export { Button, Caption, CaptionLabel, Day, DayContent, DayPicker, DayPickerContext, DayPickerProvider, Dropdown, FocusContext, FocusProvider, Footer, Head, IconDropdown, IconLeft, IconRight, InternalModifier, NavigationContext, NavigationProvider, RootProvider, Row, SelectMultipleContext, SelectMultipleProvider, SelectMultipleProviderInternal, SelectRangeContext, SelectRangeProvider, SelectRangeProviderInternal, SelectSingleContext, SelectSingleProvider, SelectSingleProviderInternal, WeekNumber, isDateAfterType, isDateBeforeType, isDateInterval, isDateRange, isDayOfWeekType, isDayPickerDefault, isDayPickerMultiple, isDayPickerRange, isDayPickerSingle, isMatch, useActiveModifiers, useDayPicker, useDayRender, useFocusContext, useInput, useNavigation, useSelectMultiple, useSelectRange, useSelectSingle };
+export { Button, Caption, CaptionDropdowns, CaptionLabel, CaptionNavigation, Day, DayContent, DayPicker, DayPickerContext, DayPickerProvider, Dropdown, FocusContext, FocusProvider, Footer, Head, IconDropdown, IconLeft, IconRight, InternalModifier, NavigationContext, NavigationProvider, RootProvider, Row, SelectMultipleContext, SelectMultipleProvider, SelectMultipleProviderInternal, SelectRangeContext, SelectRangeProvider, SelectRangeProviderInternal, SelectSingleContext, SelectSingleProvider, SelectSingleProviderInternal, WeekNumber, isDateAfterType, isDateBeforeType, isDateInterval, isDateRange, isDayOfWeekType, isDayPickerDefault, isDayPickerMultiple, isDayPickerRange, isDayPickerSingle, isMatch, useActiveModifiers, useDayPicker, useDayRender, useFocusContext, useInput, useNavigation, useSelectMultiple, useSelectRange, useSelectSingle };
 //# sourceMappingURL=index.esm.js.map