react-day-picker 8.0.1 → 8.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -3,8 +3,9 @@
3
3
  DayPicker is a date picker component for [React](https://reactjs.org).
4
4
 
5
5
  ```bash
6
- $ npm install react-day-picker date-fns # using npm
7
- $ yarn add react-day-picker date-fns # using yarn
6
+ $ npm install react-day-picker date-fns # using npm
7
+ $ pnpm install react-day-picker date-fns # using pnpm
8
+ $ yarn add react-day-picker date-fns # using yarn
8
9
  ```
9
10
 
10
11
  <a href="https://www.npmjs.com/package/react-day-picker">
@@ -13,7 +13,7 @@ export interface CaptionProps {
13
13
  */
14
14
  export declare type CaptionLayout = 'dropdown' | 'buttons';
15
15
  /**
16
- * Render the caption of a month, which includes title and navigation buttons.
17
- * The caption has a different layout when setting the [[DayPickerProps.captionLayout]] prop.
16
+ * Render the caption of a month. The caption has a different layout when
17
+ * setting the [[DayPickerProps.captionLayout]] prop.
18
18
  */
19
19
  export declare function Caption(props: CaptionProps): JSX.Element;
@@ -0,0 +1,5 @@
1
+ import { CaptionProps } from '../../components/Caption/Caption';
2
+ /**
3
+ * Render a caption with the dropdowns to navigate between months and years.
4
+ */
5
+ export declare function CaptionDropdowns(props: CaptionProps): JSX.Element;
@@ -0,0 +1 @@
1
+ export * from './CaptionDropdowns';
@@ -0,0 +1,5 @@
1
+ import { CaptionProps } from '../../components/Caption/Caption';
2
+ /**
3
+ * Render a caption with a button-based navigation.
4
+ */
5
+ export declare function CaptionNavigation(props: CaptionProps): JSX.Element;
@@ -0,0 +1 @@
1
+ export * from './CaptionNavigation';
@@ -3,4 +3,6 @@ import { Locale } from 'date-fns';
3
3
  * Generate a series of 7 days, starting from the week, to use for formatting
4
4
  * the weekday names (Monday, Tuesday, etc.).
5
5
  */
6
- export declare function getWeekdays(locale?: Locale): Date[];
6
+ export declare function getWeekdays(locale?: Locale,
7
+ /** The index of the first day of the week (0 - Sunday) */
8
+ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6): Date[];
package/dist/index.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  export * from './DayPicker';
2
2
  export * from './components/Button';
3
3
  export * from './components/Caption';
4
+ export * from './components/CaptionDropdowns';
4
5
  export * from './components/CaptionLabel';
6
+ export * from './components/CaptionNavigation';
5
7
  export * from './components/Day';
6
8
  export * from './components/DayContent';
7
9
  export * from './components/Dropdown';
package/dist/index.esm.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { useLayoutEffect, useEffect, useState, createContext, useContext, forwardRef, useRef } from 'react';
2
- 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';
3
2
  import enUS from 'date-fns/locale/en-US';
3
+ 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';
4
+ import isSameMonth$1 from 'date-fns/isSameMonth';
4
5
 
5
6
  /*! *****************************************************************************
6
7
  Copyright (c) Microsoft Corporation.
@@ -470,7 +471,8 @@ function DayPickerProvider(props) {
470
471
  style: initialProps.style,
471
472
  styles: __assign(__assign({}, defaults.styles), initialProps.styles),
472
473
  toDate: toDate,
473
- today: (_d = initialProps.today) !== null && _d !== void 0 ? _d : defaults.today
474
+ today: (_d = initialProps.today) !== null && _d !== void 0 ? _d : defaults.today,
475
+ weekStartsOn: initialProps.weekStartsOn
474
476
  };
475
477
  return (React.createElement(DayPickerContext.Provider, { value: value }, props.children));
476
478
  }
@@ -553,63 +555,6 @@ function MonthsDropdown(props) {
553
555
  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 }))); })));
554
556
  }
555
557
 
556
- /**
557
- * Render the "previous month" button in the navigation.
558
- */
559
- function IconLeft(props) {
560
- return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
561
- 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" })));
562
- }
563
-
564
- /**
565
- * Render the "next month" button in the navigation.
566
- */
567
- function IconRight(props) {
568
- return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
569
- 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" })));
570
- }
571
-
572
- /**
573
- * Render a button HTML element applying the reset class name.
574
- */
575
- var Button = forwardRef(function (props, ref) {
576
- var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
577
- var classNamesArr = [classNames.button_reset, classNames.button];
578
- if (props.className) {
579
- classNamesArr.push(props.className);
580
- }
581
- var className = classNamesArr.join(' ');
582
- var style = __assign(__assign({}, styles.button_reset), styles.button);
583
- if (props.style) {
584
- Object.assign(style, props.style);
585
- }
586
- return (React.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
587
- });
588
-
589
- /** A component rendering the navigation buttons or the drop-downs. */
590
- function Navigation(props) {
591
- var _a, _b;
592
- 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;
593
- if (!props.nextMonth && !props.previousMonth) {
594
- return React.createElement(React.Fragment, null);
595
- }
596
- var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
597
- var previousClassName = [
598
- classNames.nav_button,
599
- classNames.nav_button_previous
600
- ].join(' ');
601
- var nextLabel = labelNext(props.nextMonth, { locale: locale });
602
- var nextClassName = [
603
- classNames.nav_button,
604
- classNames.nav_button_next
605
- ].join(' ');
606
- var IconRightComponent = (_a = components === null || components === void 0 ? void 0 : components.IconRight) !== null && _a !== void 0 ? _a : IconRight;
607
- var IconLeftComponent = (_b = components === null || components === void 0 ? void 0 : components.IconLeft) !== null && _b !== void 0 ? _b : IconLeft;
608
- return (React.createElement("div", { className: classNames.nav, style: styles.nav },
609
- !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 })))),
610
- !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 }))))));
611
- }
612
-
613
558
  /**
614
559
  * Render a dropdown to change the year. Take in account the `nav.fromDate` and
615
560
  * `toDate` from context.
@@ -809,14 +754,99 @@ function useNavigation() {
809
754
  }
810
755
 
811
756
  /**
812
- * Render the caption of a month, which includes title and navigation buttons.
813
- * The caption has a different layout when setting the [[DayPickerProps.captionLayout]] prop.
757
+ * Render a caption with the dropdowns to navigate between months and years.
814
758
  */
815
- function Caption(props) {
759
+ function CaptionDropdowns(props) {
760
+ var _a;
761
+ var _b = useDayPicker(), classNames = _b.classNames, styles = _b.styles, onMonthChange = _b.onMonthChange, components = _b.components;
762
+ var goToMonth = useNavigation().goToMonth;
763
+ var handleMonthChange = function (newMonth) {
764
+ goToMonth(newMonth);
765
+ onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newMonth);
766
+ };
767
+ var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
768
+ var captionLabel = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
769
+ return (React.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
770
+ React.createElement("div", { className: classNames.vhidden }, captionLabel),
771
+ React.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
772
+ React.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
773
+ }
774
+
775
+ /**
776
+ * Render the "previous month" button in the navigation.
777
+ */
778
+ function IconLeft(props) {
779
+ return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
780
+ 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" })));
781
+ }
782
+
783
+ /**
784
+ * Render the "next month" button in the navigation.
785
+ */
786
+ function IconRight(props) {
787
+ return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
788
+ 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" })));
789
+ }
790
+
791
+ /**
792
+ * Render a button HTML element applying the reset class name.
793
+ */
794
+ var Button = forwardRef(function (props, ref) {
795
+ var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
796
+ var classNamesArr = [classNames.button_reset, classNames.button];
797
+ if (props.className) {
798
+ classNamesArr.push(props.className);
799
+ }
800
+ var className = classNamesArr.join(' ');
801
+ var style = __assign(__assign({}, styles.button_reset), styles.button);
802
+ if (props.style) {
803
+ Object.assign(style, props.style);
804
+ }
805
+ return (React.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
806
+ });
807
+
808
+ /** A component rendering the navigation buttons or the drop-downs. */
809
+ function Navigation(props) {
810
+ var _a, _b;
811
+ 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;
812
+ if (!props.nextMonth && !props.previousMonth) {
813
+ return React.createElement(React.Fragment, null);
814
+ }
815
+ var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
816
+ var previousClassName = [
817
+ classNames.nav_button,
818
+ classNames.nav_button_previous
819
+ ].join(' ');
820
+ var nextLabel = labelNext(props.nextMonth, { locale: locale });
821
+ var nextClassName = [
822
+ classNames.nav_button,
823
+ classNames.nav_button_next
824
+ ].join(' ');
825
+ var IconRightComponent = (_a = components === null || components === void 0 ? void 0 : components.IconRight) !== null && _a !== void 0 ? _a : IconRight;
826
+ var IconLeftComponent = (_b = components === null || components === void 0 ? void 0 : components.IconLeft) !== null && _b !== void 0 ? _b : IconLeft;
827
+ return (React.createElement("div", { className: classNames.nav, style: styles.nav },
828
+ !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 })))),
829
+ !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 }))))));
830
+ }
831
+
832
+ /**
833
+ * Render a caption with a button-based navigation.
834
+ */
835
+ function CaptionNavigation(props) {
816
836
  var _a;
817
837
  var _b;
818
- 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;
838
+ var _c = useDayPicker(), numberOfMonths = _c.numberOfMonths, onMonthChange = _c.onMonthChange, dir = _c.dir, components = _c.components;
819
839
  var _d = useNavigation(), previousMonth = _d.previousMonth, nextMonth = _d.nextMonth, goToMonth = _d.goToMonth, displayMonths = _d.displayMonths;
840
+ var displayIndex = displayMonths.findIndex(function (month) {
841
+ return isSameMonth$1(props.displayMonth, month);
842
+ });
843
+ var isFirst = displayIndex === 0;
844
+ var isLast = displayIndex === displayMonths.length - 1;
845
+ if (dir === 'rtl') {
846
+ _a = [isFirst, isLast], isLast = _a[0], isFirst = _a[1];
847
+ }
848
+ var hideNext = numberOfMonths > 1 && (isFirst || !isLast);
849
+ var hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
820
850
  var handlePreviousClick = function () {
821
851
  if (!previousMonth)
822
852
  return;
@@ -829,38 +859,32 @@ function Caption(props) {
829
859
  goToMonth(nextMonth);
830
860
  onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextMonth);
831
861
  };
832
- var handleMonthChange = function (newMonth) {
833
- goToMonth(newMonth);
834
- onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newMonth);
835
- };
836
- var displayIndex = displayMonths.findIndex(function (month) {
837
- return isSameMonth(props.displayMonth, month);
838
- });
839
- var isFirst = displayIndex === 0;
840
- var isLast = displayIndex === displayMonths.length - 1;
841
- if (dir === 'rtl') {
842
- _a = [isFirst, isLast], isLast = _a[0], isFirst = _a[1];
843
- }
844
- var hideNext = numberOfMonths > 1 && (isFirst || !isLast);
845
- var hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
846
862
  var CaptionLabelComponent = (_b = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _b !== void 0 ? _b : CaptionLabel;
847
863
  var captionLabel = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
848
- var captionContent;
864
+ return (React.createElement(React.Fragment, null,
865
+ captionLabel,
866
+ React.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })));
867
+ }
868
+
869
+ /**
870
+ * Render the caption of a month. The caption has a different layout when
871
+ * setting the [[DayPickerProps.captionLayout]] prop.
872
+ */
873
+ function Caption(props) {
874
+ var _a;
875
+ var _b = useDayPicker(), classNames = _b.classNames, disableNavigation = _b.disableNavigation, styles = _b.styles, captionLayout = _b.captionLayout, components = _b.components;
876
+ var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
877
+ var caption;
849
878
  if (disableNavigation) {
850
- captionContent = captionLabel;
879
+ caption = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
851
880
  }
852
881
  else if (captionLayout === 'dropdown') {
853
- captionContent = (React.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
854
- React.createElement("div", { className: classNames.vhidden }, captionLabel),
855
- React.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
856
- React.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
882
+ caption = (React.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
857
883
  }
858
884
  else {
859
- captionContent = (React.createElement(React.Fragment, null,
860
- captionLabel,
861
- React.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })));
885
+ caption = (React.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id }));
862
886
  }
863
- return (React.createElement("div", { className: classNames.caption, style: styles.caption }, captionContent));
887
+ return (React.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
864
888
  }
865
889
 
866
890
  /** Render the Footer component (empty as default).*/
@@ -877,8 +901,10 @@ function Footer() {
877
901
  * Generate a series of 7 days, starting from the week, to use for formatting
878
902
  * the weekday names (Monday, Tuesday, etc.).
879
903
  */
880
- function getWeekdays(locale) {
881
- var start = startOfWeek(new Date(), { locale: locale });
904
+ function getWeekdays(locale,
905
+ /** The index of the first day of the week (0 - Sunday) */
906
+ weekStartsOn) {
907
+ var start = startOfWeek(new Date(), { locale: locale, weekStartsOn: weekStartsOn });
882
908
  var days = [];
883
909
  for (var i = 0; i < 7; i++) {
884
910
  var day = addDays(start, i);
@@ -891,8 +917,8 @@ function getWeekdays(locale) {
891
917
  * Render the Head component - i.e. the table head with the weekday names.
892
918
  */
893
919
  function Head() {
894
- var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, formatWeekdayName = _a.formatters.formatWeekdayName, labelWeekday = _a.labels.labelWeekday;
895
- var weekdays = getWeekdays(locale);
920
+ 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;
921
+ var weekdays = getWeekdays(locale, weekStartsOn);
896
922
  return (React.createElement("thead", { style: styles.head, className: classNames.head },
897
923
  React.createElement("tr", { style: styles.head_row, className: classNames.head_row },
898
924
  showWeekNumber && (React.createElement("th", { scope: "col", style: styles.head_cell, className: classNames.head_cell })),
@@ -1234,7 +1260,6 @@ function isDateInterval(matcher) {
1234
1260
  }
1235
1261
  /** Returns true if `value` is a [[DateRange]] type. */
1236
1262
  function isDateRange(value) {
1237
- // TODO: Check if dates?!
1238
1263
  return Boolean(value && typeof value === 'object' && 'from' in value);
1239
1264
  }
1240
1265
  /** Returns true if `value` is of type [[DateAfter]]. */
@@ -1930,10 +1955,11 @@ month, options) {
1930
1955
  /** Render the table with the calendar. */
1931
1956
  function Table(props) {
1932
1957
  var _a, _b, _c;
1933
- var _d = useDayPicker(), locale = _d.locale, classNames = _d.classNames, styles = _d.styles, hideHead = _d.hideHead, fixedWeeks = _d.fixedWeeks, components = _d.components;
1958
+ var _d = useDayPicker(), locale = _d.locale, classNames = _d.classNames, styles = _d.styles, hideHead = _d.hideHead, fixedWeeks = _d.fixedWeeks, components = _d.components, weekStartsOn = _d.weekStartsOn;
1934
1959
  var weeks = getMonthWeeks(props.displayMonth, {
1935
1960
  useFixedWeeks: Boolean(fixedWeeks),
1936
- locale: locale
1961
+ locale: locale,
1962
+ weekStartsOn: weekStartsOn
1937
1963
  });
1938
1964
  var HeadComponent = (_a = components === null || components === void 0 ? void 0 : components.Head) !== null && _a !== void 0 ? _a : Head;
1939
1965
  var RowComponent = (_b = components === null || components === void 0 ? void 0 : components.Row) !== null && _b !== void 0 ? _b : Row;
@@ -2134,5 +2160,5 @@ function isDayPickerDefault(props) {
2134
2160
  return props.mode === undefined || props.mode === 'default';
2135
2161
  }
2136
2162
 
2137
- 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 };
2163
+ 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 };
2138
2164
  //# sourceMappingURL=index.esm.js.map