react-day-picker 8.0.0-beta.31 → 8.0.0-beta.32

package/CHANGELOG.md

@@ -16,7 +16,13 @@ with the previous versions.
 
 See the preview website at https://react-day-picker-next.netlify.app.
 
-### v8.0.0-beta.30
+### v8.0.0-beta.32
+
+- Fixed previous/next month navigation with RTL direction (68ad0adf7fb6935eb6d9809a6e72646e6194d51e)
+- Updated `useInput` API (#1293)
+- Removed `defaultSelected` prop (cd4f57906d98eb15b0b5a498112e74c2f6770c45)
+
+### v8.0.0-beta.31
 
 - Switched to rollup as module bundler
 - Added `custom` selection mode

package/README.md

@@ -1,4 +1,4 @@
-# React DayPicker
+# React DayPicker (beta)
 
 DayPicker is a date picker component for [React](https://reactjs.org).
 

package/build/DayPicker.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DayPickerProps } from './types';
+import { DayPickerCustomProps, DayPickerMultipleProps, DayPickerProps, DayPickerRangeProps, DayPickerSingleProps } from './types';
 /**
  * DayPicker render a date picker component to let users pick dates from a
  * calendar. See http://react-day-picker.js.org for updated documentation and
@@ -85,4 +85,4 @@ import { DayPickerProps } from './types';
  * <DayPicker locale={es} />
  * ```
  */
-export declare function DayPicker(props: DayPickerProps): JSX.Element;
+export declare function DayPicker(props: DayPickerProps | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps | DayPickerCustomProps): JSX.Element;

package/build/DayPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DayPicker.js","sources":["../src/DayPicker.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { DayPickerProps } from './types';\n\nimport { Root } from './components/Root';\nimport { ContextProvider } from './contexts/ContextProvider';\n\n/**\n * DayPicker render a date picker component to let users pick dates from a\n * calendar. See http://react-day-picker.js.org for updated documentation and\n * examples.\n *\n * ### Customization\n *\n * DayPicker offers different customization props. For example,\n *\n * - show multiple months using `numberOfMonths`\n * - display a dropdown to navigate the months via `captionLayout`\n * - display the week numbers with `showWeekNumbers`\n * - disable or hide days with `disabled` or `hidden`\n *\n * ### Controlling the months\n *\n * Change the initially displayed month using the `defaultMonth` prop. The\n * displayed months are controlled by DayPicker and stored in its internal\n * state. To control the months yourself, use `month` instead of `defaultMonth`\n * and use the `onMonthChange` event to set it.\n *\n * To limit the months the user can navigate to, use\n * `fromDate`/`fromMonth`/`fromYear` or `toDate`/`toMonth`/`toYear`.\n *\n * ### Selection modes\n *\n * DayPicker supports different selection mode that can be toggled using the\n * `mode` prop:\n *\n * - `mode=\"single\"`: only one day can be selected. Use `required` to make the\n *   selection required. Use the `onSelect` event handler to get the selected\n *   days.\n * - `mode=\"multiple\"`: users can select one or more days. Limit the amount of\n *   days that can be selected with the `min` or the `max` props.\n * - `mode=\"range\"`: users can select a range of days. Limit the amount of days\n *   in the range with the `min` or the `max` props.\n *\n * These selection modes should cover the most common use cases. In case you\n * need a more refined way of selecting days, use `mode=\"custom\"`. Use the\n * `selected` props and add the day event handlers to add/remove days from the\n * selection.\n *\n * ### Modifiers\n *\n * A _modifier_ represents different styles or states for the days displayed in\n * the calendar (like \"selected\" or \"disabled\"). Define custom modifiers using\n * the `modifiers` prop.\n *\n * ### Formatters and custom component\n *\n * You can customize how the content is displayed in the date picker by using\n * either the formatters or replacing the internal components.\n *\n * For the most common cases you want to use the `formatters` prop to change how\n * the content is formatted in the calendar. Use the `components` prop to\n * replace the internal components, like the navigation icons.\n *\n * ### Styling\n *\n * DayPicker comes with a default, basic style in `react-day-picker/style` –\n * use it as template for your own style.\n *\n * If you are using CSS modules, pass the imported styles object the\n * `classNames` props.\n *\n * You can also style the elements via inline-styles using the `styles` prop.\n *\n * ### Form fields\n *\n * If you need to bind the date picker to a form field, you can use the\n * `useInput` hooks for a basic behavior. See the `useInput` source as an\n * example to bind the date picker with form fields.\n *\n * ### Localization\n *\n * To localize DayPicker, import the locale from `date-fns` package and use the\n * `locale` prop.\n *\n * For example, to use Spanish locale:\n *\n * ```\n * import es from 'date-fns/locale/es';\n * <DayPicker locale={es} />\n * ```\n */\nexport function DayPicker(props: DayPickerProps): JSX.Element {\n  return (\n    <ContextProvider {...props}>\n      <Root />\n    </ContextProvider>\n  );\n}\n"],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqFgB,SAAS,CAAC,KAAqB;IAC7C,QACE,oBAAC,eAAe,eAAK,KAAK;QACxB,oBAAC,IAAI,OAAG,CACQ,EAClB;AACJ;;;;"}
+{"version":3,"file":"DayPicker.js","sources":["../src/DayPicker.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DayPickerCustomProps,\n  DayPickerMultipleProps,\n  DayPickerProps,\n  DayPickerRangeProps,\n  DayPickerSingleProps\n} from './types';\n\nimport { Root } from './components/Root';\nimport { ContextProvider } from './contexts/ContextProvider';\n\n/**\n * DayPicker render a date picker component to let users pick dates from a\n * calendar. See http://react-day-picker.js.org for updated documentation and\n * examples.\n *\n * ### Customization\n *\n * DayPicker offers different customization props. For example,\n *\n * - show multiple months using `numberOfMonths`\n * - display a dropdown to navigate the months via `captionLayout`\n * - display the week numbers with `showWeekNumbers`\n * - disable or hide days with `disabled` or `hidden`\n *\n * ### Controlling the months\n *\n * Change the initially displayed month using the `defaultMonth` prop. The\n * displayed months are controlled by DayPicker and stored in its internal\n * state. To control the months yourself, use `month` instead of `defaultMonth`\n * and use the `onMonthChange` event to set it.\n *\n * To limit the months the user can navigate to, use\n * `fromDate`/`fromMonth`/`fromYear` or `toDate`/`toMonth`/`toYear`.\n *\n * ### Selection modes\n *\n * DayPicker supports different selection mode that can be toggled using the\n * `mode` prop:\n *\n * - `mode=\"single\"`: only one day can be selected. Use `required` to make the\n *   selection required. Use the `onSelect` event handler to get the selected\n *   days.\n * - `mode=\"multiple\"`: users can select one or more days. Limit the amount of\n *   days that can be selected with the `min` or the `max` props.\n * - `mode=\"range\"`: users can select a range of days. Limit the amount of days\n *   in the range with the `min` or the `max` props.\n *\n * These selection modes should cover the most common use cases. In case you\n * need a more refined way of selecting days, use `mode=\"custom\"`. Use the\n * `selected` props and add the day event handlers to add/remove days from the\n * selection.\n *\n * ### Modifiers\n *\n * A _modifier_ represents different styles or states for the days displayed in\n * the calendar (like \"selected\" or \"disabled\"). Define custom modifiers using\n * the `modifiers` prop.\n *\n * ### Formatters and custom component\n *\n * You can customize how the content is displayed in the date picker by using\n * either the formatters or replacing the internal components.\n *\n * For the most common cases you want to use the `formatters` prop to change how\n * the content is formatted in the calendar. Use the `components` prop to\n * replace the internal components, like the navigation icons.\n *\n * ### Styling\n *\n * DayPicker comes with a default, basic style in `react-day-picker/style` –\n * use it as template for your own style.\n *\n * If you are using CSS modules, pass the imported styles object the\n * `classNames` props.\n *\n * You can also style the elements via inline-styles using the `styles` prop.\n *\n * ### Form fields\n *\n * If you need to bind the date picker to a form field, you can use the\n * `useInput` hooks for a basic behavior. See the `useInput` source as an\n * example to bind the date picker with form fields.\n *\n * ### Localization\n *\n * To localize DayPicker, import the locale from `date-fns` package and use the\n * `locale` prop.\n *\n * For example, to use Spanish locale:\n *\n * ```\n * import es from 'date-fns/locale/es';\n * <DayPicker locale={es} />\n * ```\n */\nexport function DayPicker(\n  props:\n    | DayPickerProps\n    | DayPickerSingleProps\n    | DayPickerMultipleProps\n    | DayPickerRangeProps\n    | DayPickerCustomProps\n): JSX.Element {\n  return (\n    <ContextProvider {...props}>\n      <Root />\n    </ContextProvider>\n  );\n}\n"],"names":[],"mappings":";;;;;AAaA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqFgB,SAAS,CACvB,KAKwB;IAExB,QACE,oBAAC,eAAe,eAAK,KAAK;QACxB,oBAAC,IAAI,OAAG,CACQ,EAClB;AACJ;;;;"}

package/build/components/Caption/Caption.js

@@ -1,11 +1,11 @@
-import * as React from 'react';
+import React__default from 'react';
 import { isSameMonth } from 'date-fns';
-import { MonthsDropdown } from '../MonthsDropdown/MonthsDropdown.js';
-import { Navigation } from '../Navigation/Navigation.js';
-import { YearsDropdown } from '../YearsDropdown/YearsDropdown.js';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
 import '../../contexts/Navigation/NavigationContext.js';
 import { useNavigation } from '../../contexts/Navigation/useNavigation.js';
+import { MonthsDropdown } from '../MonthsDropdown/MonthsDropdown.js';
+import { Navigation } from '../Navigation/Navigation.js';
+import { YearsDropdown } from '../YearsDropdown/YearsDropdown.js';
 
 /**
  * Render the caption of a month, which includes title and navigation buttons.
@@ -41,16 +41,16 @@ function Caption(props) {
     if (dir === 'rtl') {
         _a = [isFirst, isLast], isLast = _a[0], isFirst = _a[1];
     }
-    var captionLabel = React.createElement(CaptionLabel, { displayMonth: displayMonth });
+    var captionLabel = React__default.createElement(CaptionLabel, { displayMonth: displayMonth });
     var hideNext = numberOfMonths > 1 && (isFirst || !isLast);
     var hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
-    return (React.createElement("div", { className: classNames.caption, style: styles.caption },
+    return (React__default.createElement("div", { className: classNames.caption, style: styles.caption },
         disableNavigation && captionLabel,
-        !disableNavigation && (React.createElement(React.Fragment, null, captionLayout === 'dropdown' ? (React.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
-            React.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: displayMonth }),
-            React.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: displayMonth }))) : (React.createElement(React.Fragment, null,
-            React.createElement(CaptionLabel, { displayMonth: displayMonth }),
-            React.createElement(Navigation, { displayMonth: displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })))))));
+        !disableNavigation && (React__default.createElement(React__default.Fragment, null, captionLayout === 'dropdown' ? (React__default.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
+            React__default.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: displayMonth }),
+            React__default.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: displayMonth }))) : (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(CaptionLabel, { displayMonth: displayMonth }),
+            React__default.createElement(Navigation, { displayMonth: displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })))))));
 }
 
 export { Caption };

package/build/components/Caption/Caption.js.map

@@ -1 +1 @@
-{"version":3,"file":"Caption.js","sources":["../../../src/components/Caption/Caption.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { isSameMonth } from 'date-fns';\n\nimport { MonthChangeEventHandler } from '../../types';\n\nimport { MonthsDropdown } from '../MonthsDropdown';\nimport { Navigation } from '../Navigation';\nimport { YearsDropdown } from '../YearsDropdown';\nimport { useDayPicker } from '../../contexts/DayPicker';\nimport { useNavigation } from '../../contexts/Navigation';\n\n/** Represent the props of the [[Caption]] component. */\nexport interface CaptionProps {\n  /** The month where the caption is displayed. */\n  displayMonth: Date;\n}\n\n/**\n * Render the caption of a month, which includes title and navigation buttons.\n * The caption has a different layout when setting the `numberOfMonths` prop.\n */\nexport function Caption(props: CaptionProps): JSX.Element {\n  const { displayMonth } = props;\n  const context = useDayPicker();\n  const {\n    classNames,\n    numberOfMonths,\n    disableNavigation,\n    styles,\n    captionLayout,\n    onMonthChange,\n    dir,\n    components: { CaptionLabel }\n  } = context;\n\n  const { previousMonth, nextMonth, goToMonth, displayMonths } =\n    useNavigation();\n\n  const handlePreviousClick: React.MouseEventHandler = (e) => {\n    if (!previousMonth) return;\n    goToMonth(previousMonth);\n    onMonthChange?.(previousMonth);\n  };\n\n  const handleNextClick: React.MouseEventHandler = (e) => {\n    if (!nextMonth) return;\n    goToMonth(nextMonth);\n    onMonthChange?.(nextMonth);\n  };\n\n  const handleMonthChange: MonthChangeEventHandler = (newMonth) => {\n    goToMonth(newMonth);\n    onMonthChange?.(newMonth);\n  };\n\n  const displayIndex = displayMonths.findIndex((month) =>\n    isSameMonth(displayMonth, month)\n  );\n  let isFirst = displayIndex === 0;\n  let isLast = displayIndex === displayMonths.length - 1;\n  if (dir === 'rtl') {\n    [isLast, isFirst] = [isFirst, isLast];\n  }\n\n  const captionLabel = <CaptionLabel displayMonth={displayMonth} />;\n  const hideNext = numberOfMonths > 1 && (isFirst || !isLast);\n  const hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);\n\n  return (\n    <div className={classNames.caption} style={styles.caption}>\n      {disableNavigation && captionLabel}\n      {!disableNavigation && (\n        <>\n          {captionLayout === 'dropdown' ? (\n            <div\n              className={classNames.caption_dropdowns}\n              style={styles.caption_dropdowns}\n            >\n              <MonthsDropdown\n                onChange={handleMonthChange}\n                displayMonth={displayMonth}\n              />\n              <YearsDropdown\n                onChange={handleMonthChange}\n                displayMonth={displayMonth}\n              />\n            </div>\n          ) : (\n            <>\n              <CaptionLabel displayMonth={displayMonth} />\n              <Navigation\n                displayMonth={displayMonth}\n                hideNext={hideNext}\n                hidePrevious={hidePrevious}\n                nextMonth={nextMonth}\n                previousMonth={previousMonth}\n                onPreviousClick={handlePreviousClick}\n                onNextClick={handleNextClick}\n              />\n            </>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAkBA;;;;SAIgB,OAAO,CAAC,KAAmB;;IACjC,IAAA,YAAY,GAAK,KAAK,aAAV,CAAW;IAC/B,IAAM,OAAO,GAAG,YAAY,EAAE,CAAC;IAE7B,IAAA,UAAU,GAQR,OAAO,WARC,EACV,cAAc,GAOZ,OAAO,eAPK,EACd,iBAAiB,GAMf,OAAO,kBANQ,EACjB,MAAM,GAKJ,OAAO,OALH,EACN,aAAa,GAIX,OAAO,cAJI,EACb,aAAa,GAGX,OAAO,cAHI,EACb,GAAG,GAED,OAAO,IAFN,EACW,YAAY,GACxB,OAAO,wBADiB,CAChB;IAEN,IAAA,KACJ,aAAa,EAAE,EADT,aAAa,mBAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,aAAa,mBACzC,CAAC;IAElB,IAAM,mBAAmB,GAA4B,UAAC,CAAC;QACrD,IAAI,CAAC,aAAa;YAAE,OAAO;QAC3B,SAAS,CAAC,aAAa,CAAC,CAAC;QACzB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,aAAa,CAAC,CAAC;KAChC,CAAC;IAEF,IAAM,eAAe,GAA4B,UAAC,CAAC;QACjD,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,SAAS,CAAC,SAAS,CAAC,CAAC;QACrB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,SAAS,CAAC,CAAC;KAC5B,CAAC;IAEF,IAAM,iBAAiB,GAA4B,UAAC,QAAQ;QAC1D,SAAS,CAAC,QAAQ,CAAC,CAAC;QACpB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,QAAQ,CAAC,CAAC;KAC3B,CAAC;IAEF,IAAM,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,UAAC,KAAK;QACjD,OAAA,WAAW,CAAC,YAAY,EAAE,KAAK,CAAC;KAAA,CACjC,CAAC;IACF,IAAI,OAAO,GAAG,YAAY,KAAK,CAAC,CAAC;IACjC,IAAI,MAAM,GAAG,YAAY,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,IAAI,GAAG,KAAK,KAAK,EAAE;QACjB,KAAoB,CAAC,OAAO,EAAE,MAAM,CAAC,EAApC,MAAM,QAAA,EAAE,OAAO,QAAA,CAAsB;KACvC;IAED,IAAM,YAAY,GAAG,oBAAC,YAAY,IAAC,YAAY,EAAE,YAAY,GAAI,CAAC;IAClE,IAAM,QAAQ,GAAG,cAAc,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5D,IAAM,YAAY,GAAG,cAAc,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC,OAAO,CAAC,CAAC;IAEhE,QACE,6BAAK,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,OAAO;QACtD,iBAAiB,IAAI,YAAY;QACjC,CAAC,iBAAiB,KACjB,0CACG,aAAa,KAAK,UAAU,IAC3B,6BACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EACvC,KAAK,EAAE,MAAM,CAAC,iBAAiB;YAE/B,oBAAC,cAAc,IACb,QAAQ,EAAE,iBAAiB,EAC3B,YAAY,EAAE,YAAY,GAC1B;YACF,oBAAC,aAAa,IACZ,QAAQ,EAAE,iBAAiB,EAC3B,YAAY,EAAE,YAAY,GAC1B,CACE,KAEN;YACE,oBAAC,YAAY,IAAC,YAAY,EAAE,YAAY,GAAI;YAC5C,oBAAC,UAAU,IACT,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,mBAAmB,EACpC,WAAW,EAAE,eAAe,GAC5B,CACD,CACJ,CACA,CACJ,CACG,EACN;AACJ;;;;"}
+{"version":3,"file":"Caption.js","sources":["../../../src/components/Caption/Caption.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isSameMonth } from 'date-fns';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\nimport { useNavigation } from '../../contexts/Navigation';\nimport { MonthChangeEventHandler } from '../../types';\nimport { MonthsDropdown } from '../MonthsDropdown';\nimport { Navigation } from '../Navigation';\nimport { YearsDropdown } from '../YearsDropdown';\n\n/** Represent the props of the [[Caption]] component. */\nexport interface CaptionProps {\n  /** The month where the caption is displayed. */\n  displayMonth: Date;\n}\n\n/**\n * Render the caption of a month, which includes title and navigation buttons.\n * The caption has a different layout when setting the `numberOfMonths` prop.\n */\nexport function Caption(props: CaptionProps): JSX.Element {\n  const { displayMonth } = props;\n  const context = useDayPicker();\n  const {\n    classNames,\n    numberOfMonths,\n    disableNavigation,\n    styles,\n    captionLayout,\n    onMonthChange,\n    dir,\n    components: { CaptionLabel }\n  } = context;\n\n  const { previousMonth, nextMonth, goToMonth, displayMonths } =\n    useNavigation();\n\n  const handlePreviousClick: React.MouseEventHandler = (e) => {\n    if (!previousMonth) return;\n    goToMonth(previousMonth);\n    onMonthChange?.(previousMonth);\n  };\n\n  const handleNextClick: React.MouseEventHandler = (e) => {\n    if (!nextMonth) return;\n    goToMonth(nextMonth);\n    onMonthChange?.(nextMonth);\n  };\n\n  const handleMonthChange: MonthChangeEventHandler = (newMonth) => {\n    goToMonth(newMonth);\n    onMonthChange?.(newMonth);\n  };\n\n  const displayIndex = displayMonths.findIndex((month) =>\n    isSameMonth(displayMonth, month)\n  );\n  let isFirst = displayIndex === 0;\n  let isLast = displayIndex === displayMonths.length - 1;\n  if (dir === 'rtl') {\n    [isLast, isFirst] = [isFirst, isLast];\n  }\n\n  const captionLabel = <CaptionLabel displayMonth={displayMonth} />;\n  const hideNext = numberOfMonths > 1 && (isFirst || !isLast);\n  const hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);\n\n  return (\n    <div className={classNames.caption} style={styles.caption}>\n      {disableNavigation && captionLabel}\n      {!disableNavigation && (\n        <>\n          {captionLayout === 'dropdown' ? (\n            <div\n              className={classNames.caption_dropdowns}\n              style={styles.caption_dropdowns}\n            >\n              <MonthsDropdown\n                onChange={handleMonthChange}\n                displayMonth={displayMonth}\n              />\n              <YearsDropdown\n                onChange={handleMonthChange}\n                displayMonth={displayMonth}\n              />\n            </div>\n          ) : (\n            <>\n              <CaptionLabel displayMonth={displayMonth} />\n              <Navigation\n                displayMonth={displayMonth}\n                hideNext={hideNext}\n                hidePrevious={hidePrevious}\n                nextMonth={nextMonth}\n                previousMonth={previousMonth}\n                onPreviousClick={handlePreviousClick}\n                onNextClick={handleNextClick}\n              />\n            </>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["React"],"mappings":"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"}

package/build/components/Day/hooks/useDay.js

@@ -80,7 +80,7 @@ buttonRef) {
     var DayContent = context.components.DayContent;
     var children = (React__default.createElement(DayContent, { date: date, displayMonth: displayMonth, modifiers: modifiers }));
     var className = classNames.join(' ');
-    if (!context.mode) {
+    if (!context.mode && !context.onDayClick) {
         return __assign(__assign({}, returnValue), { nonInteractiveProps: {
                 style: style,
                 className: className,

package/build/components/Day/hooks/useDay.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDay.js","sources":["../../../../src/components/Day/hooks/useDay.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isSameMonth } from 'date-fns';\n\nimport {\n  DateRange,\n  isDayPickerMultiple,\n  isDayPickerRange,\n  isDayPickerSingle,\n  ModifierStatus,\n  StyledComponentProps\n} from '../../../types';\n\nimport { useDayPicker } from '../../../contexts/DayPicker';\nimport {\n  SelectMultipleContextValue,\n  useSelectMultiple\n} from '../../../contexts/SelectMultiple';\nimport {\n  SelectRangeContextValue,\n  useSelectRange\n} from '../../../contexts/SelectRange';\nimport {\n  SelectSingleContextValue,\n  useSelectSingle\n} from '../../../contexts/SelectSingle';\nimport { useModifiers } from '../../../hooks';\n\nimport { useDayFocus } from './useDayFocus';\n\nexport type UseDay = {\n  /** Whether the date is outside the display month/ */\n  isOutside: boolean;\n  /** The modifiers for the given date. */\n  modifiers: ModifierStatus;\n  /** The days in DayPicker currently selected. */\n  selected: Date | Date[] | DateRange | undefined;\n  /**\n   * The props for rendering the day as interactive element.\n   *\n   * When `undefined`, DayPicker should render a non interactive element with non-interactive\n   * props.\n   */\n  buttonProps?: Omit<React.HTMLProps<HTMLButtonElement>, 'ref'>;\n  /**\n   * The props for rendering the day as not interactive element.\n   *\n   * When both this value and `buttonProps` are `undefined`, DayPicker should not render anything.\n   */\n  nonInteractiveProps?: StyledComponentProps;\n  single: SelectSingleContextValue;\n  multiple: SelectMultipleContextValue;\n  range: SelectRangeContextValue;\n};\n\n/**\n * This hook returns details about the content to render in the day cell.\n *\n *\n * When a day cell is rendered in the table, DayPicker can either:\n *\n * - render nothing: when the day is outside the month or has matched the\n *   \"hidden\" modifier.\n * - render a button. When a selection mode is set, DayPicker renders a button\n *   to allow the focus and the selection. In case of `custom` selection\n *   mode, DayPicker expects a `onDayClick` prop to render a button.\n * - render a non-interactive element: when no selection mode is set, the day\n *   cell shouldn’t respond to any interaction. DayPicker should render a `div`\n *   or a `span`.\n *\n * ### Usage\n *\n * Use this hook to customize the behavior of the [[Day]] component. Create a\n * new `Day` component using this hook and pass it to the `components` prop.\n * The source of [[Day]] can be a good starting point.\n *\n * */\nexport function useDay(\n  /** The day rendered in the month. */\n  date: Date,\n  /** The month where the date is displayed. DayPicker renders days outside the display month when `showOutsideDays` is true. */\n  displayMonth: Date,\n  /** A ref to the button element. */\n  buttonRef: React.RefObject<HTMLButtonElement>\n): UseDay {\n  const context = useDayPicker();\n  const single = useSelectSingle();\n  const multiple = useSelectMultiple();\n  const range = useSelectRange();\n  const { focus, blur, focusOnKeyDown, isFocused } = useDayFocus(\n    date,\n    buttonRef\n  );\n\n  const { modifiers, modifierClassNames, modifierStyle } = useModifiers(date);\n  const isOutside = !isSameMonth(date, displayMonth);\n\n  const returnValue = {\n    isOutside,\n    modifiers,\n    selected: isDayPickerSingle(context)\n      ? single.selected\n      : isDayPickerMultiple(context)\n      ? multiple.selected\n      : isDayPickerRange(context)\n      ? range.selected\n      : undefined,\n    single,\n    multiple,\n    range\n  };\n  if (isOutside && !context.showOutsideDays) {\n    return returnValue;\n  }\n  if (modifiers.hidden) {\n    return returnValue;\n  }\n\n  const classNames = [context.classNames.day].concat(modifierClassNames);\n  let style: React.CSSProperties = { ...context.styles.day, ...modifierStyle };\n\n  if (isOutside) {\n    classNames.push(context.classNames.day_outside);\n    style = { ...context.styles, ...context.styles.day_outside };\n  }\n\n  const { DayContent } = context.components;\n  const children = (\n    <DayContent date={date} displayMonth={displayMonth} modifiers={modifiers} />\n  );\n\n  let className = classNames.join(' ');\n\n  if (!context.mode) {\n    return {\n      ...returnValue,\n      nonInteractiveProps: {\n        style,\n        className,\n        children\n      }\n    };\n  }\n\n  // #region Event handlers\n  const handleClick: React.MouseEventHandler = (e) => {\n    if (isDayPickerSingle(context)) {\n      single.handleDayClick?.(date, modifiers, e);\n    } else if (isDayPickerMultiple(context)) {\n      multiple.handleDayClick?.(date, modifiers, e);\n    } else if (isDayPickerRange(context)) {\n      range.handleDayClick?.(date, modifiers, e);\n    }\n    context.onDayClick?.(date, modifiers, e);\n  };\n\n  const handleFocus: React.FocusEventHandler = (e) => {\n    focus(date);\n    context.onDayFocus?.(date, modifiers, e);\n  };\n\n  const handleBlur: React.FocusEventHandler = (e) => {\n    blur();\n    context.onDayBlur?.(date, modifiers, e);\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler = (e) => {\n    focusOnKeyDown(e);\n    context.onDayKeyDown?.(date, modifiers, e);\n  };\n\n  const handleKeyUp: React.KeyboardEventHandler = (e) => {\n    context.onDayKeyUp?.(date, modifiers, e);\n  };\n  const handleMouseEnter: React.MouseEventHandler = (e) => {\n    context.onDayMouseEnter?.(date, modifiers, e);\n  };\n  const handleMouseLeave: React.MouseEventHandler = (e) => {\n    context.onDayMouseLeave?.(date, modifiers, e);\n  };\n  const handleTouchCancel: React.TouchEventHandler = (e) => {\n    context.onDayTouchCancel?.(date, modifiers, e);\n  };\n  const handleTouchEnd: React.TouchEventHandler = (e) => {\n    context.onDayTouchEnd?.(date, modifiers, e);\n  };\n  const handleTouchMove: React.TouchEventHandler = (e) => {\n    context.onDayTouchMove?.(date, modifiers, e);\n  };\n  const handleTouchStart: React.TouchEventHandler = (e) => {\n    context.onDayTouchStart?.(date, modifiers, e);\n  };\n\n  if (isOutside) {\n    classNames.push(context.classNames.day_outside);\n    style = { ...context.styles, ...context.styles.day_outside };\n  }\n\n  className = classNames.join(' ');\n\n  const { selected, disabled } = modifiers;\n\n  const tabIndex = disabled || isFocused ? -1 : 0;\n\n  return {\n    ...returnValue,\n    buttonProps: {\n      children,\n      'aria-pressed': selected,\n      style: style,\n      disabled: disabled,\n      className: className,\n      tabIndex: tabIndex,\n      onClick: handleClick,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n      onKeyUp: handleKeyUp,\n      onMouseEnter: handleMouseEnter,\n      onMouseLeave: handleMouseLeave,\n      onTouchCancel: handleTouchCancel,\n      onTouchEnd: handleTouchEnd,\n      onTouchMove: handleTouchMove,\n      onTouchStart: handleTouchStart\n    }\n  };\n}\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"useDay.js","sources":["../../../../src/components/Day/hooks/useDay.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isSameMonth } from 'date-fns';\n\nimport {\n  DateRange,\n  isDayPickerMultiple,\n  isDayPickerRange,\n  isDayPickerSingle,\n  ModifierStatus,\n  StyledComponentProps\n} from '../../../types';\n\nimport { useDayPicker } from '../../../contexts/DayPicker';\nimport {\n  SelectMultipleContextValue,\n  useSelectMultiple\n} from '../../../contexts/SelectMultiple';\nimport {\n  SelectRangeContextValue,\n  useSelectRange\n} from '../../../contexts/SelectRange';\nimport {\n  SelectSingleContextValue,\n  useSelectSingle\n} from '../../../contexts/SelectSingle';\nimport { useModifiers } from '../../../hooks';\n\nimport { useDayFocus } from './useDayFocus';\n\nexport type UseDay = {\n  /** Whether the date is outside the display month/ */\n  isOutside: boolean;\n  /** The modifiers for the given date. */\n  modifiers: ModifierStatus;\n  /** The days in DayPicker currently selected. */\n  selected: Date | Date[] | DateRange | undefined;\n  /**\n   * The props for rendering the day as interactive element.\n   *\n   * When `undefined`, DayPicker should render a non interactive element with non-interactive\n   * props.\n   */\n  buttonProps?: Omit<React.HTMLProps<HTMLButtonElement>, 'ref'>;\n  /**\n   * The props for rendering the day as not interactive element.\n   *\n   * When both this value and `buttonProps` are `undefined`, DayPicker should not render anything.\n   */\n  nonInteractiveProps?: StyledComponentProps;\n  single: SelectSingleContextValue;\n  multiple: SelectMultipleContextValue;\n  range: SelectRangeContextValue;\n};\n\n/**\n * This hook returns details about the content to render in the day cell.\n *\n *\n * When a day cell is rendered in the table, DayPicker can either:\n *\n * - render nothing: when the day is outside the month or has matched the\n *   \"hidden\" modifier.\n * - render a button. When a selection mode is set, DayPicker renders a button\n *   to allow the focus and the selection. In case of `custom` selection\n *   mode, DayPicker expects a `onDayClick` prop to render a button.\n * - render a non-interactive element: when no selection mode is set, the day\n *   cell shouldn’t respond to any interaction. DayPicker should render a `div`\n *   or a `span`.\n *\n * ### Usage\n *\n * Use this hook to customize the behavior of the [[Day]] component. Create a\n * new `Day` component using this hook and pass it to the `components` prop.\n * The source of [[Day]] can be a good starting point.\n *\n * */\nexport function useDay(\n  /** The day rendered in the month. */\n  date: Date,\n  /** The month where the date is displayed. DayPicker renders days outside the display month when `showOutsideDays` is true. */\n  displayMonth: Date,\n  /** A ref to the button element. */\n  buttonRef: React.RefObject<HTMLButtonElement>\n): UseDay {\n  const context = useDayPicker();\n  const single = useSelectSingle();\n  const multiple = useSelectMultiple();\n  const range = useSelectRange();\n  const { focus, blur, focusOnKeyDown, isFocused } = useDayFocus(\n    date,\n    buttonRef\n  );\n\n  const { modifiers, modifierClassNames, modifierStyle } = useModifiers(date);\n  const isOutside = !isSameMonth(date, displayMonth);\n\n  const returnValue = {\n    isOutside,\n    modifiers,\n    selected: isDayPickerSingle(context)\n      ? single.selected\n      : isDayPickerMultiple(context)\n      ? multiple.selected\n      : isDayPickerRange(context)\n      ? range.selected\n      : undefined,\n    single,\n    multiple,\n    range\n  };\n  if (isOutside && !context.showOutsideDays) {\n    return returnValue;\n  }\n  if (modifiers.hidden) {\n    return returnValue;\n  }\n\n  const classNames = [context.classNames.day].concat(modifierClassNames);\n  let style: React.CSSProperties = { ...context.styles.day, ...modifierStyle };\n\n  if (isOutside) {\n    classNames.push(context.classNames.day_outside);\n    style = { ...context.styles, ...context.styles.day_outside };\n  }\n\n  const { DayContent } = context.components;\n  const children = (\n    <DayContent date={date} displayMonth={displayMonth} modifiers={modifiers} />\n  );\n\n  let className = classNames.join(' ');\n\n  if (!context.mode && !context.onDayClick) {\n    return {\n      ...returnValue,\n      nonInteractiveProps: {\n        style,\n        className,\n        children\n      }\n    };\n  }\n\n  // #region Event handlers\n  const handleClick: React.MouseEventHandler = (e) => {\n    if (isDayPickerSingle(context)) {\n      single.handleDayClick?.(date, modifiers, e);\n    } else if (isDayPickerMultiple(context)) {\n      multiple.handleDayClick?.(date, modifiers, e);\n    } else if (isDayPickerRange(context)) {\n      range.handleDayClick?.(date, modifiers, e);\n    }\n    context.onDayClick?.(date, modifiers, e);\n  };\n\n  const handleFocus: React.FocusEventHandler = (e) => {\n    focus(date);\n    context.onDayFocus?.(date, modifiers, e);\n  };\n\n  const handleBlur: React.FocusEventHandler = (e) => {\n    blur();\n    context.onDayBlur?.(date, modifiers, e);\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler = (e) => {\n    focusOnKeyDown(e);\n    context.onDayKeyDown?.(date, modifiers, e);\n  };\n\n  const handleKeyUp: React.KeyboardEventHandler = (e) => {\n    context.onDayKeyUp?.(date, modifiers, e);\n  };\n  const handleMouseEnter: React.MouseEventHandler = (e) => {\n    context.onDayMouseEnter?.(date, modifiers, e);\n  };\n  const handleMouseLeave: React.MouseEventHandler = (e) => {\n    context.onDayMouseLeave?.(date, modifiers, e);\n  };\n  const handleTouchCancel: React.TouchEventHandler = (e) => {\n    context.onDayTouchCancel?.(date, modifiers, e);\n  };\n  const handleTouchEnd: React.TouchEventHandler = (e) => {\n    context.onDayTouchEnd?.(date, modifiers, e);\n  };\n  const handleTouchMove: React.TouchEventHandler = (e) => {\n    context.onDayTouchMove?.(date, modifiers, e);\n  };\n  const handleTouchStart: React.TouchEventHandler = (e) => {\n    context.onDayTouchStart?.(date, modifiers, e);\n  };\n\n  if (isOutside) {\n    classNames.push(context.classNames.day_outside);\n    style = { ...context.styles, ...context.styles.day_outside };\n  }\n\n  className = classNames.join(' ');\n\n  const { selected, disabled } = modifiers;\n\n  const tabIndex = disabled || isFocused ? -1 : 0;\n\n  return {\n    ...returnValue,\n    buttonProps: {\n      children,\n      'aria-pressed': selected,\n      style: style,\n      disabled: disabled,\n      className: className,\n      tabIndex: tabIndex,\n      onClick: handleClick,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n      onKeyUp: handleKeyUp,\n      onMouseEnter: handleMouseEnter,\n      onMouseLeave: handleMouseLeave,\n      onTouchCancel: handleTouchCancel,\n      onTouchEnd: handleTouchEnd,\n      onTouchMove: handleTouchMove,\n      onTouchStart: handleTouchStart\n    }\n  };\n}\n"],"names":["React"],"mappings":"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"}

package/build/components/Day/hooks/useDayFocus.js

@@ -1,13 +1,20 @@
 import * as React from 'react';
 import { isSameDay } from 'date-fns';
-import '../../../contexts/Focus/FocusContext.js';
-import '../../../contexts/DayPicker/DayPickerContext.js';
+import 'date-fns/locale/en-US';
+import { useDayPicker } from '../../../contexts/DayPicker/useDayPicker.js';
 import '../../../contexts/Navigation/NavigationContext.js';
+import '../../Button/Button.js';
+import '../../../contexts/SelectMultiple/SelectMultipleContext.js';
+import '../../../contexts/SelectRange/SelectRangeContext.js';
+import '../../../contexts/SelectSingle/SelectSingleContext.js';
+import '../../../contexts/Focus/FocusContext.js';
 import { useFocus } from '../../../contexts/Focus/useFocus.js';
+import '../../../contexts/DayPicker/DayPickerContext.js';
 
 /** Handle the focus for the day element. */
 function useDayFocus(date, buttonRef) {
     var _a = useFocus(), focusedDay = _a[0], _b = _a[1], focusDayAfter = _b.focusDayAfter, focusDayBefore = _b.focusDayBefore, focusWeekAfterDay = _b.focusWeekAfterDay, focusWeekBeforeDay = _b.focusWeekBeforeDay, blur = _b.blur, focus = _b.focus;
+    var dir = useDayPicker().dir;
     // Focus the HTML element if this is the focused day.
     React.useEffect(function () {
         var _a;
@@ -22,12 +29,12 @@ function useDayFocus(date, buttonRef) {
             case 'ArrowLeft':
                 e.preventDefault();
                 e.stopPropagation();
-                focusDayBefore();
+                dir === 'rtl' ? focusDayAfter() : focusDayBefore();
                 break;
             case 'ArrowRight':
                 e.preventDefault();
                 e.stopPropagation();
-                focusDayAfter();
+                dir === 'rtl' ? focusDayBefore() : focusDayAfter();
                 break;
             case 'ArrowDown':
                 e.preventDefault();

package/build/components/Day/hooks/useDayFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDayFocus.js","sources":["../../../../src/components/Day/hooks/useDayFocus.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { isSameDay } from 'date-fns';\n\nimport { useFocus } from '../../../contexts/Focus';\n\n/** Handle the focus for the day element. */\nexport function useDayFocus(\n  date: Date,\n  buttonRef: React.RefObject<HTMLButtonElement>\n): {\n  focus: (date: Date) => void;\n  blur: () => void;\n  focusOnKeyDown: React.KeyboardEventHandler;\n  isFocused: boolean;\n} {\n  const [\n    focusedDay,\n    {\n      focusDayAfter,\n      focusDayBefore,\n      focusWeekAfterDay,\n      focusWeekBeforeDay,\n      blur,\n      focus\n    }\n  ] = useFocus();\n\n  // Focus the HTML element if this is the focused day.\n  React.useEffect(() => {\n    if (!focusedDay) return;\n    if (isSameDay(focusedDay, date)) {\n      buttonRef.current?.focus();\n    }\n  }, [focusedDay, date, buttonRef]);\n\n  const focusOnKeyDown: React.KeyboardEventHandler = (e) => {\n    switch (e.key) {\n      case 'ArrowLeft':\n        e.preventDefault();\n        e.stopPropagation();\n        focusDayBefore();\n        break;\n      case 'ArrowRight':\n        e.preventDefault();\n        e.stopPropagation();\n        focusDayAfter();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        e.stopPropagation();\n        focusWeekAfterDay();\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        e.stopPropagation();\n        focusWeekBeforeDay();\n        break;\n    }\n  };\n\n  const isFocused = Boolean(focusedDay && !isSameDay(focusedDay, date));\n\n  return { focus, blur, focusOnKeyDown, isFocused };\n}\n"],"names":[],"mappings":";;;;;;;AAMA;SACgB,WAAW,CACzB,IAAU,EACV,SAA6C;IAOvC,IAAA,KAUF,QAAQ,EAAE,EATZ,UAAU,QAAA,EACV,UAOC,EANC,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,iBAAiB,uBAAA,EACjB,kBAAkB,wBAAA,EAClB,IAAI,UAAA,EACJ,KAAK,WAEK,CAAC;;IAGf,KAAK,CAAC,SAAS,CAAC;;QACd,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,IAAI,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,EAAE;YAC/B,MAAA,SAAS,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC5B;KACF,EAAE,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAElC,IAAM,cAAc,GAA+B,UAAC,CAAC;QACnD,QAAQ,CAAC,CAAC,GAAG;YACX,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,cAAc,EAAE,CAAC;gBACjB,MAAM;YACR,KAAK,YAAY;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,aAAa,EAAE,CAAC;gBAChB,MAAM;YACR,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,iBAAiB,EAAE,CAAC;gBACpB,MAAM;YACR,KAAK,SAAS;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,kBAAkB,EAAE,CAAC;gBACrB,MAAM;SACT;KACF,CAAC;IAEF,IAAM,SAAS,GAAG,OAAO,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;IAEtE,OAAO,EAAE,KAAK,OAAA,EAAE,IAAI,MAAA,EAAE,cAAc,gBAAA,EAAE,SAAS,WAAA,EAAE,CAAC;AACpD;;;;"}
+{"version":3,"file":"useDayFocus.js","sources":["../../../../src/components/Day/hooks/useDayFocus.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { isSameDay } from 'date-fns';\n\nimport { useDayPicker } from '../../../contexts';\nimport { useFocus } from '../../../contexts/Focus';\n\n/** Handle the focus for the day element. */\nexport function useDayFocus(\n  date: Date,\n  buttonRef: React.RefObject<HTMLButtonElement>\n): {\n  focus: (date: Date) => void;\n  blur: () => void;\n  focusOnKeyDown: React.KeyboardEventHandler;\n  isFocused: boolean;\n} {\n  const [\n    focusedDay,\n    {\n      focusDayAfter,\n      focusDayBefore,\n      focusWeekAfterDay,\n      focusWeekBeforeDay,\n      blur,\n      focus\n    }\n  ] = useFocus();\n  const { dir } = useDayPicker();\n\n  // Focus the HTML element if this is the focused day.\n  React.useEffect(() => {\n    if (!focusedDay) return;\n    if (isSameDay(focusedDay, date)) {\n      buttonRef.current?.focus();\n    }\n  }, [focusedDay, date, buttonRef]);\n\n  const focusOnKeyDown: React.KeyboardEventHandler = (e) => {\n    switch (e.key) {\n      case 'ArrowLeft':\n        e.preventDefault();\n        e.stopPropagation();\n        dir === 'rtl' ? focusDayAfter() : focusDayBefore();\n        break;\n      case 'ArrowRight':\n        e.preventDefault();\n        e.stopPropagation();\n        dir === 'rtl' ? focusDayBefore() : focusDayAfter();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        e.stopPropagation();\n        focusWeekAfterDay();\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        e.stopPropagation();\n        focusWeekBeforeDay();\n        break;\n    }\n  };\n\n  const isFocused = Boolean(focusedDay && !isSameDay(focusedDay, date));\n\n  return { focus, blur, focusOnKeyDown, isFocused };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAOA;SACgB,WAAW,CACzB,IAAU,EACV,SAA6C;IAOvC,IAAA,KAUF,QAAQ,EAAE,EATZ,UAAU,QAAA,EACV,UAOC,EANC,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,iBAAiB,uBAAA,EACjB,kBAAkB,wBAAA,EAClB,IAAI,UAAA,EACJ,KAAK,WAEK,CAAC;IACP,IAAA,GAAG,GAAK,YAAY,EAAE,IAAnB,CAAoB;;IAG/B,KAAK,CAAC,SAAS,CAAC;;QACd,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,IAAI,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,EAAE;YAC/B,MAAA,SAAS,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC5B;KACF,EAAE,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAElC,IAAM,cAAc,GAA+B,UAAC,CAAC;QACnD,QAAQ,CAAC,CAAC,GAAG;YACX,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,GAAG,KAAK,KAAK,GAAG,aAAa,EAAE,GAAG,cAAc,EAAE,CAAC;gBACnD,MAAM;YACR,KAAK,YAAY;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,GAAG,KAAK,KAAK,GAAG,cAAc,EAAE,GAAG,aAAa,EAAE,CAAC;gBACnD,MAAM;YACR,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,iBAAiB,EAAE,CAAC;gBACpB,MAAM;YACR,KAAK,SAAS;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,kBAAkB,EAAE,CAAC;gBACrB,MAAM;SACT;KACF,CAAC;IAEF,IAAM,SAAS,GAAG,OAAO,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;IAEtE,OAAO,EAAE,KAAK,OAAA,EAAE,IAAI,MAAA,EAAE,cAAc,gBAAA,EAAE,SAAS,WAAA,EAAE,CAAC;AACpD;;;;"}

package/build/components/{IconPrevious/IconPrevious.d.ts → IconLeft/IconLeft.d.ts}

@@ -3,4 +3,4 @@ import { StyledComponentProps } from '../../types';
 /**
  * Render the "previous month" button in the navigation.
  */
-export declare function IconPrevious(props: StyledComponentProps): JSX.Element;
+export declare function IconLeft(props: StyledComponentProps): JSX.Element;

package/build/components/IconLeft/IconLeft.js

@@ -0,0 +1,13 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import React__default from 'react';
+
+/**
+ * Render the "previous month" button in the navigation.
+ */
+function IconLeft(props) {
+    return (React__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120", "data-testid": "iconLeft" }, props),
+        React__default.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" })));
+}
+
+export { IconLeft };
+//# sourceMappingURL=IconLeft.js.map

package/build/components/IconLeft/IconLeft.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconLeft.js","sources":["../../../src/components/IconLeft/IconLeft.tsx"],"sourcesContent":["import React from 'react';\n\nimport { StyledComponentProps } from '../../types';\n\n/**\n * Render the \"previous month\" button in the navigation.\n */\nexport function IconLeft(props: StyledComponentProps): JSX.Element {\n  return (\n    <svg\n      width=\"16px\"\n      height=\"16px\"\n      viewBox=\"0 0 120 120\"\n      data-testid=\"iconLeft\"\n      {...props}\n    >\n      <path\n        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\"\n        fill=\"currentColor\"\n        fillRule=\"nonzero\"\n      ></path>\n    </svg>\n  );\n}\n"],"names":["React"],"mappings":";;;AAIA;;;SAGgB,QAAQ,CAAC,KAA2B;IAClD,QACEA,+CACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,aAAa,iBACT,UAAU,IAClB,KAAK;QAETA,uCACE,CAAC,EAAC,ihBAAihB,EACnhB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,GACZ,CACJ,EACN;AACJ;;;;"}

package/build/components/IconLeft/index.d.ts

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

package/build/components/{IconNext/IconNext.d.ts → IconRight/IconRight.d.ts}

@@ -3,4 +3,4 @@ import { StyledComponentProps } from '../../types';
 /**
  * Render the "next month" button in the navigation.
  */
-export declare function IconNext(props: StyledComponentProps): JSX.Element;
+export declare function IconRight(props: StyledComponentProps): JSX.Element;

package/build/components/IconRight/IconRight.js

@@ -0,0 +1,13 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import React__default from 'react';
+
+/**
+ * Render the "next month" button in the navigation.
+ */
+function IconRight(props) {
+    return (React__default.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props, { "data-testid": "iconRight" }),
+        React__default.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" })));
+}
+
+export { IconRight };
+//# sourceMappingURL=IconRight.js.map

package/build/components/IconRight/IconRight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconRight.js","sources":["../../../src/components/IconRight/IconRight.tsx"],"sourcesContent":["import React from 'react';\n\nimport { StyledComponentProps } from '../../types';\n\n/**\n * Render the \"next month\" button in the navigation.\n */\nexport function IconRight(props: StyledComponentProps): JSX.Element {\n  return (\n    <svg\n      width=\"16px\"\n      height=\"16px\"\n      viewBox=\"0 0 120 120\"\n      {...props}\n      data-testid=\"iconRight\"\n    >\n      <path\n        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\"\n        fill=\"currentColor\"\n      ></path>\n    </svg>\n  );\n}\n"],"names":["React"],"mappings":";;;AAIA;;;SAGgB,SAAS,CAAC,KAA2B;IACnD,QACEA,+CACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,aAAa,IACjB,KAAK,mBACG,WAAW;QAEvBA,uCACE,CAAC,EAAC,ohBAAohB,EACthB,IAAI,EAAC,cAAc,GACb,CACJ,EACN;AACJ;;;;"}

package/build/components/IconRight/index.d.ts

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

package/build/components/Navigation/Navigation.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { Button } from '../Button/Button.js';
 import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
+import { Button } from '../Button/Button.js';
 
 /** A component rendering the navigation buttons or the drop-downs. */
 function Navigation(props) {
     var _a;
-    var _b = useDayPicker(), dir = _b.dir, locale = _b.locale, classNames = _b.classNames, styles = _b.styles, _c = _b.labels, labelPrevious = _c.labelPrevious, labelNext = _c.labelNext, _d = _b.components, IconNext = _d.IconNext, IconPrevious = _d.IconPrevious;
+    var _b = useDayPicker(), dir = _b.dir, locale = _b.locale, classNames = _b.classNames, styles = _b.styles, _c = _b.labels, labelPrevious = _c.labelPrevious, labelNext = _c.labelNext, _d = _b.components, IconRight = _d.IconRight, IconLeft = _d.IconLeft;
     var onPreviousClick = props.onPreviousClick, onNextClick = props.onNextClick;
     if (dir === 'rtl') {
         _a = [onPreviousClick, onNextClick], onNextClick = _a[0], onPreviousClick = _a[1];
@@ -21,16 +21,12 @@ function Navigation(props) {
         classNames.nav_button,
         classNames.nav_button_next
     ].join(' ');
-    var previousButton = (React.createElement(Button, { key: "prev", "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !previousMonth, onClick: onPreviousClick },
-        React.createElement(IconPrevious, { className: classNames.nav_icon, style: styles.nav_icon })));
-    var nextButton = (React.createElement(Button, { key: "next", "aria-label": nextLabel, className: nextClassName, disabled: !nextMonth, onClick: onNextClick, style: styles.nav_button_next },
-        React.createElement(IconNext, { className: classNames.nav_icon, style: styles.nav_icon })));
     if (!nextMonth && !previousMonth) {
         return React.createElement(React.Fragment, null);
     }
     return (React.createElement("div", { className: classNames.nav, style: styles.nav },
-        !props.hidePrevious && (dir === 'rtl' ? nextButton : previousButton),
-        !props.hideNext && (dir === 'rtl' ? previousButton : nextButton)));
+        !props.hidePrevious && (React.createElement(Button, { "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_next, disabled: !previousMonth, onClick: dir === 'rtl' ? onNextClick : onPreviousClick }, dir === 'rtl' ? (React.createElement(IconRight, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconLeft, { className: classNames.nav_icon, style: styles.nav_icon })))),
+        !props.hideNext && (React.createElement(Button, { "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !nextMonth, onClick: dir === 'rtl' ? onPreviousClick : onNextClick }, dir === 'rtl' ? (React.createElement(IconLeft, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconRight, { className: classNames.nav_icon, style: styles.nav_icon }))))));
 }
 
 export { Navigation };

package/build/components/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from '../Button';\nimport { useDayPicker } from '../../contexts/DayPicker';\n\n/** The props for the [[Navigation]] component. */\nexport interface NavigationProps {\n  /** The month where the caption is displayed. */\n  displayMonth: Date;\n  /** The previous month. */\n  previousMonth?: Date;\n  /** The next month. */\n  nextMonth?: Date;\n  /** Hide the previous button. */\n  hidePrevious: boolean;\n  /** Hide the next button. */\n  hideNext: boolean;\n  /** Event handler when the next button is clicked. */\n  onNextClick: React.MouseEventHandler<HTMLButtonElement>;\n  /** Event handler when the previous button is clicked. */\n  onPreviousClick: React.MouseEventHandler<HTMLButtonElement>;\n}\n\n/** A component rendering the navigation buttons or the drop-downs. */\nexport function Navigation(props: NavigationProps): JSX.Element {\n  const {\n    dir,\n    locale,\n    classNames,\n    styles,\n    labels: { labelPrevious, labelNext },\n    components: { IconNext, IconPrevious }\n  } = useDayPicker();\n  let { onPreviousClick, onNextClick } = props;\n  if (dir === 'rtl') {\n    [onNextClick, onPreviousClick] = [onPreviousClick, onNextClick];\n  }\n\n  const { previousMonth, nextMonth } = props;\n\n  const previousLabel = labelPrevious(previousMonth, { locale });\n  const previousClassName = [\n    classNames.nav_button,\n    classNames.nav_button_previous\n  ].join(' ');\n\n  const nextLabel = labelNext(nextMonth, { locale });\n  const nextClassName = [\n    classNames.nav_button,\n    classNames.nav_button_next\n  ].join(' ');\n\n  const previousButton = (\n    <Button\n      key=\"prev\"\n      aria-label={previousLabel}\n      className={previousClassName}\n      style={styles.nav_button_previous}\n      disabled={!previousMonth}\n      onClick={onPreviousClick}\n    >\n      <IconPrevious className={classNames.nav_icon} style={styles.nav_icon} />\n    </Button>\n  );\n\n  const nextButton = (\n    <Button\n      key=\"next\"\n      aria-label={nextLabel}\n      className={nextClassName}\n      disabled={!nextMonth}\n      onClick={onNextClick}\n      style={styles.nav_button_next}\n    >\n      <IconNext className={classNames.nav_icon} style={styles.nav_icon} />\n    </Button>\n  );\n  if (!nextMonth && !previousMonth) {\n    return <></>;\n  }\n  return (\n    <div className={classNames.nav} style={styles.nav}>\n      {!props.hidePrevious && (dir === 'rtl' ? nextButton : previousButton)}\n      {!props.hideNext && (dir === 'rtl' ? previousButton : nextButton)}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAuBA;SACgB,UAAU,CAAC,KAAsB;;IACzC,IAAA,KAOF,YAAY,EAAE,EANhB,GAAG,SAAA,EACH,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,cAAoC,EAA1B,aAAa,mBAAA,EAAE,SAAS,eAAA,EAClC,kBAAsC,EAAxB,QAAQ,cAAA,EAAE,YAAY,kBACpB,CAAC;IACb,IAAA,eAAe,GAAkB,KAAK,gBAAvB,EAAE,WAAW,GAAK,KAAK,YAAV,CAAW;IAC7C,IAAI,GAAG,KAAK,KAAK,EAAE;QACjB,KAAiC,CAAC,eAAe,EAAE,WAAW,CAAC,EAA9D,WAAW,QAAA,EAAE,eAAe,QAAA,CAAmC;KACjE;IAEO,IAAA,aAAa,GAAgB,KAAK,cAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;IAE3C,IAAM,aAAa,GAAG,aAAa,CAAC,aAAa,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAAC;IAC/D,IAAM,iBAAiB,GAAG;QACxB,UAAU,CAAC,UAAU;QACrB,UAAU,CAAC,mBAAmB;KAC/B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,IAAM,SAAS,GAAG,SAAS,CAAC,SAAS,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAAC;IACnD,IAAM,aAAa,GAAG;QACpB,UAAU,CAAC,UAAU;QACrB,UAAU,CAAC,eAAe;KAC3B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,IAAM,cAAc,IAClB,oBAAC,MAAM,IACL,GAAG,EAAC,MAAM,gBACE,aAAa,EACzB,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,MAAM,CAAC,mBAAmB,EACjC,QAAQ,EAAE,CAAC,aAAa,EACxB,OAAO,EAAE,eAAe;QAExB,oBAAC,YAAY,IAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,QAAQ,GAAI,CACjE,CACV,CAAC;IAEF,IAAM,UAAU,IACd,oBAAC,MAAM,IACL,GAAG,EAAC,MAAM,gBACE,SAAS,EACrB,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,CAAC,SAAS,EACpB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,MAAM,CAAC,eAAe;QAE7B,oBAAC,QAAQ,IAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,QAAQ,GAAI,CAC7D,CACV,CAAC;IACF,IAAI,CAAC,SAAS,IAAI,CAAC,aAAa,EAAE;QAChC,OAAO,yCAAK,CAAC;KACd;IACD,QACE,6BAAK,SAAS,EAAE,UAAU,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG;QAC9C,CAAC,KAAK,CAAC,YAAY,KAAK,GAAG,KAAK,KAAK,GAAG,UAAU,GAAG,cAAc,CAAC;QACpE,CAAC,KAAK,CAAC,QAAQ,KAAK,GAAG,KAAK,KAAK,GAAG,cAAc,GAAG,UAAU,CAAC,CAC7D,EACN;AACJ;;;;"}
+{"version":3,"file":"Navigation.js","sources":["../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\nimport { Button } from '../Button';\n\n/** The props for the [[Navigation]] component. */\nexport interface NavigationProps {\n  /** The month where the caption is displayed. */\n  displayMonth: Date;\n  /** The previous month. */\n  previousMonth?: Date;\n  /** The next month. */\n  nextMonth?: Date;\n  /** Hide the previous button. */\n  hidePrevious: boolean;\n  /** Hide the next button. */\n  hideNext: boolean;\n  /** Event handler when the next button is clicked. */\n  onNextClick: React.MouseEventHandler<HTMLButtonElement>;\n  /** Event handler when the previous button is clicked. */\n  onPreviousClick: React.MouseEventHandler<HTMLButtonElement>;\n}\n\n/** A component rendering the navigation buttons or the drop-downs. */\nexport function Navigation(props: NavigationProps): JSX.Element {\n  const {\n    dir,\n    locale,\n    classNames,\n    styles,\n    labels: { labelPrevious, labelNext },\n    components: { IconRight, IconLeft }\n  } = useDayPicker();\n  let { onPreviousClick, onNextClick } = props;\n  if (dir === 'rtl') {\n    [onNextClick, onPreviousClick] = [onPreviousClick, onNextClick];\n  }\n\n  const { previousMonth, nextMonth } = props;\n\n  const previousLabel = labelPrevious(previousMonth, { locale });\n  const previousClassName = [\n    classNames.nav_button,\n    classNames.nav_button_previous\n  ].join(' ');\n\n  const nextLabel = labelNext(nextMonth, { locale });\n  const nextClassName = [\n    classNames.nav_button,\n    classNames.nav_button_next\n  ].join(' ');\n\n  if (!nextMonth && !previousMonth) {\n    return <></>;\n  }\n\n  return (\n    <div className={classNames.nav} style={styles.nav}>\n      {!props.hidePrevious && (\n        <Button\n          aria-label={previousLabel}\n          className={previousClassName}\n          style={styles.nav_button_next}\n          disabled={!previousMonth}\n          onClick={dir === 'rtl' ? onNextClick : onPreviousClick}\n        >\n          {dir === 'rtl' ? (\n            <IconRight\n              className={classNames.nav_icon}\n              style={styles.nav_icon}\n            />\n          ) : (\n            <IconLeft className={classNames.nav_icon} style={styles.nav_icon} />\n          )}\n        </Button>\n      )}\n      {!props.hideNext && (\n        <Button\n          aria-label={nextLabel}\n          className={nextClassName}\n          style={styles.nav_button_next}\n          disabled={!nextMonth}\n          onClick={dir === 'rtl' ? onPreviousClick : onNextClick}\n        >\n          {dir === 'rtl' ? (\n            <IconLeft className={classNames.nav_icon} style={styles.nav_icon} />\n          ) : (\n            <IconRight\n              className={classNames.nav_icon}\n              style={styles.nav_icon}\n            />\n          )}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAuBA;SACgB,UAAU,CAAC,KAAsB;;IACzC,IAAA,KAOF,YAAY,EAAE,EANhB,GAAG,SAAA,EACH,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,cAAoC,EAA1B,aAAa,mBAAA,EAAE,SAAS,eAAA,EAClC,kBAAmC,EAArB,SAAS,eAAA,EAAE,QAAQ,cACjB,CAAC;IACb,IAAA,eAAe,GAAkB,KAAK,gBAAvB,EAAE,WAAW,GAAK,KAAK,YAAV,CAAW;IAC7C,IAAI,GAAG,KAAK,KAAK,EAAE;QACjB,KAAiC,CAAC,eAAe,EAAE,WAAW,CAAC,EAA9D,WAAW,QAAA,EAAE,eAAe,QAAA,CAAmC;KACjE;IAEO,IAAA,aAAa,GAAgB,KAAK,cAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;IAE3C,IAAM,aAAa,GAAG,aAAa,CAAC,aAAa,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAAC;IAC/D,IAAM,iBAAiB,GAAG;QACxB,UAAU,CAAC,UAAU;QACrB,UAAU,CAAC,mBAAmB;KAC/B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,IAAM,SAAS,GAAG,SAAS,CAAC,SAAS,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAAC;IACnD,IAAM,aAAa,GAAG;QACpB,UAAU,CAAC,UAAU;QACrB,UAAU,CAAC,eAAe;KAC3B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,IAAI,CAAC,SAAS,IAAI,CAAC,aAAa,EAAE;QAChC,OAAO,yCAAK,CAAC;KACd;IAED,QACE,6BAAK,SAAS,EAAE,UAAU,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG;QAC9C,CAAC,KAAK,CAAC,YAAY,KAClB,oBAAC,MAAM,kBACO,aAAa,EACzB,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,MAAM,CAAC,eAAe,EAC7B,QAAQ,EAAE,CAAC,aAAa,EACxB,OAAO,EAAE,GAAG,KAAK,KAAK,GAAG,WAAW,GAAG,eAAe,IAErD,GAAG,KAAK,KAAK,IACZ,oBAAC,SAAS,IACR,SAAS,EAAE,UAAU,CAAC,QAAQ,EAC9B,KAAK,EAAE,MAAM,CAAC,QAAQ,GACtB,KAEF,oBAAC,QAAQ,IAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,QAAQ,GAAI,CACrE,CACM,CACV;QACA,CAAC,KAAK,CAAC,QAAQ,KACd,oBAAC,MAAM,kBACO,SAAS,EACrB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,MAAM,CAAC,eAAe,EAC7B,QAAQ,EAAE,CAAC,SAAS,EACpB,OAAO,EAAE,GAAG,KAAK,KAAK,GAAG,eAAe,GAAG,WAAW,IAErD,GAAG,KAAK,KAAK,IACZ,oBAAC,QAAQ,IAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,QAAQ,GAAI,KAEpE,oBAAC,SAAS,IACR,SAAS,EAAE,UAAU,CAAC,QAAQ,EAC9B,KAAK,EAAE,MAAM,CAAC,QAAQ,GACtB,CACH,CACM,CACV,CACG,EACN;AACJ;;;;"}

package/build/components/index.d.ts

@@ -7,8 +7,8 @@ export * from './Dropdown';
 export * from './Footer';
 export * from './Head';
 export * from './IconDropdown';
-export * from './IconNext';
-export * from './IconPrevious';
+export * from './IconRight';
+export * from './IconLeft';
 export * from './MonthsDropdown';
 export * from './Navigation';
 export * from './Root';

package/build/contexts/DayPicker/DayPickerProvider.js

@@ -11,20 +11,20 @@ import '../SelectRange/SelectRangeContext.js';
 import '../SelectSingle/SelectSingleContext.js';
 import { parseFromToProps } from './utils/parseFromToProps.js';
 import { parseModifierProps } from './utils/parseModifierProps.js';
-import '../Focus/FocusContext.js';
-import '../Navigation/NavigationContext.js';
 import { DayContent } from '../../components/DayContent/DayContent.js';
 import { Dropdown } from '../../components/Dropdown/Dropdown.js';
 import { Footer } from '../../components/Footer/Footer.js';
 import { Head } from '../../components/Head/Head.js';
 import { IconDropdown } from '../../components/IconDropdown/IconDropdown.js';
-import { IconNext } from '../../components/IconNext/IconNext.js';
-import { IconPrevious } from '../../components/IconPrevious/IconPrevious.js';
+import { IconLeft } from '../../components/IconLeft/IconLeft.js';
+import { IconRight } from '../../components/IconRight/IconRight.js';
 import { Row } from '../../components/Row/Row.js';
 import { WeekNumber } from '../../components/WeekNumber/WeekNumber.js';
 import { defaultClassNames } from './defaultClassNames.js';
 import * as index from './formatters/index.js';
 import * as index$1 from './labels/index.js';
+import '../Focus/FocusContext.js';
+import '../Navigation/NavigationContext.js';
 
 /**
  * The provider for the [[DayPickerContext]].
@@ -51,7 +51,7 @@ function DayPickerProvider(props) {
         modifiers.disabled.push({ after: toDate });
     }
     initialProps.toYear; initialProps.fromYear; initialProps.toMonth; initialProps.fromMonth; var contextProps = __rest(initialProps, ["toYear", "fromYear", "toMonth", "fromMonth"]);
-    var context = __assign(__assign({}, contextProps), { captionLayout: captionLayout, fromDate: fromDate, toDate: toDate, today: today, locale: locale, modifierClassNames: (_e = initialProps.modifierClassNames) !== null && _e !== void 0 ? _e : {}, modifierPrefix: 'rdp-day_', modifiers: modifiers, numberOfMonths: numberOfMonths, styles: (_f = initialProps.styles) !== null && _f !== void 0 ? _f : {}, classNames: __assign(__assign({}, defaultClassNames), initialProps.classNames), formatters: __assign(__assign({}, index), initialProps.formatters), labels: __assign(__assign({}, index$1), initialProps.labels), components: __assign({ Caption: Caption, CaptionLabel: CaptionLabel, Day: Day, DayContent: DayContent, Dropdown: Dropdown, Footer: Footer, Head: Head, IconDropdown: IconDropdown, IconNext: IconNext, IconPrevious: IconPrevious, Row: Row, WeekNumber: WeekNumber }, initialProps.components) });
+    var context = __assign(__assign({}, contextProps), { captionLayout: captionLayout, fromDate: fromDate, toDate: toDate, today: today, locale: locale, modifierClassNames: (_e = initialProps.modifierClassNames) !== null && _e !== void 0 ? _e : {}, modifierPrefix: 'rdp-day_', modifiers: modifiers, numberOfMonths: numberOfMonths, styles: (_f = initialProps.styles) !== null && _f !== void 0 ? _f : {}, classNames: __assign(__assign({}, defaultClassNames), initialProps.classNames), formatters: __assign(__assign({}, index), initialProps.formatters), labels: __assign(__assign({}, index$1), initialProps.labels), components: __assign({ Caption: Caption, CaptionLabel: CaptionLabel, Day: Day, DayContent: DayContent, Dropdown: Dropdown, Footer: Footer, Head: Head, IconDropdown: IconDropdown, IconRight: IconRight, IconLeft: IconLeft, Row: Row, WeekNumber: WeekNumber }, initialProps.components) });
     return (React.createElement(DayPickerContext.Provider, { value: context }, children));
 }
 

package/build/contexts/DayPicker/DayPickerProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"DayPickerProvider.js","sources":["../../../src/contexts/DayPicker/DayPickerProvider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport enUS from 'date-fns/locale/en-US';\n\nimport { DayPickerProps } from '../../types';\n\nimport { Caption } from '../../components/Caption';\nimport { CaptionLabel } from '../../components/CaptionLabel';\nimport { Day } from '../../components/Day';\nimport { DayContent } from '../../components/DayContent';\nimport { Dropdown } from '../../components/Dropdown';\nimport { Footer } from '../../components/Footer';\nimport { Head } from '../../components/Head';\nimport { IconDropdown } from '../../components/IconDropdown';\nimport { IconNext } from '../../components/IconNext';\nimport { IconPrevious } from '../../components/IconPrevious';\nimport { Row } from '../../components/Row';\nimport { WeekNumber } from '../../components/WeekNumber';\n\nimport { DayPickerContext, DayPickerContextValue } from './DayPickerContext';\nimport { defaultClassNames } from './defaultClassNames';\nimport * as formatters from './formatters';\nimport * as labels from './labels';\nimport { parseFromToProps, parseModifierProps } from './utils';\n\n/** Represent the props for the [[DayPickerProvider]]. */\nexport interface DayPickerProviderProps {\n  /** The props passed to the DayPicker component. */\n  initialProps: DayPickerProps;\n  children?: React.ReactNode;\n}\n/**\n * The provider for the [[DayPickerContext]].\n */\nexport function DayPickerProvider(props: DayPickerProviderProps): JSX.Element {\n  const { children, initialProps } = props;\n\n  const locale = initialProps.locale ?? enUS;\n  const numberOfMonths = initialProps.numberOfMonths ?? 1;\n  const today = initialProps.today ?? new Date();\n\n  // Limit navigation\n  const { fromDate, toDate } = parseFromToProps(initialProps);\n\n  // Default caption layout. If calendar navigation is unlimited, it must be\n  // always `buttons` – as we cannot display infinite options in the dropdown.\n  let captionLayout = initialProps.captionLayout ?? 'buttons';\n  if (!fromDate && !toDate) captionLayout = 'buttons';\n\n  const modifiers = parseModifierProps(initialProps);\n\n  // Disable days before/after from/toDate\n  if (fromDate) {\n    modifiers.disabled.push({ before: fromDate });\n  }\n  if (toDate) {\n    modifiers.disabled.push({ after: toDate });\n  }\n\n  const { toYear, fromYear, toMonth, fromMonth, ...contextProps } =\n    initialProps;\n\n  const context: DayPickerContextValue = {\n    ...contextProps,\n\n    captionLayout,\n\n    fromDate,\n    toDate,\n    today,\n\n    locale,\n\n    modifierClassNames: initialProps.modifierClassNames ?? {},\n    modifierPrefix: 'rdp-day_',\n    modifiers: modifiers,\n    numberOfMonths,\n\n    styles: initialProps.styles ?? {},\n    classNames: {\n      ...defaultClassNames,\n      ...initialProps.classNames\n    },\n    formatters: {\n      ...formatters,\n      ...initialProps.formatters\n    },\n    labels: {\n      ...labels,\n      ...initialProps.labels\n    },\n    components: {\n      Caption: Caption,\n      CaptionLabel: CaptionLabel,\n      Day: Day,\n      DayContent: DayContent,\n      Dropdown: Dropdown,\n      Footer: Footer,\n      Head: Head,\n      IconDropdown: IconDropdown,\n      IconNext: IconNext,\n      IconPrevious: IconPrevious,\n      Row: Row,\n      WeekNumber: WeekNumber,\n      ...initialProps.components\n    }\n  };\n\n  return (\n    <DayPickerContext.Provider value={context}>\n      {children}\n    </DayPickerContext.Provider>\n  );\n}\n"],"names":["formatters","labels"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA;;;SAGgB,iBAAiB,CAAC,KAA6B;;IACrD,IAAA,QAAQ,GAAmB,KAAK,SAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;IAEzC,IAAM,MAAM,GAAG,MAAA,YAAY,CAAC,MAAM,mCAAI,IAAI,CAAC;IAC3C,IAAM,cAAc,GAAG,MAAA,YAAY,CAAC,cAAc,mCAAI,CAAC,CAAC;IACxD,IAAM,KAAK,GAAG,MAAA,YAAY,CAAC,KAAK,mCAAI,IAAI,IAAI,EAAE,CAAC;;IAGzC,IAAA,KAAuB,gBAAgB,CAAC,YAAY,CAAC,EAAnD,QAAQ,cAAA,EAAE,MAAM,YAAmC,CAAC;;;IAI5D,IAAI,aAAa,GAAG,MAAA,YAAY,CAAC,aAAa,mCAAI,SAAS,CAAC;IAC5D,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM;QAAE,aAAa,GAAG,SAAS,CAAC;IAEpD,IAAM,SAAS,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;;IAGnD,IAAI,QAAQ,EAAE;QACZ,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;KAC/C;IACD,IAAI,MAAM,EAAE;QACV,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;KAC5C;IAGC,YAAY,OADA,EACZ,YAAY,SADU,EACtB,YAAY,QADmB,EAC/B,YAAY,UAD8B,MAAK,YAAY,UAC3D,YAAY,EADR,8CAAyD,EAChD;IAEf,IAAM,OAAO,yBACR,YAAY,KAEf,aAAa,eAAA,EAEb,QAAQ,UAAA,EACR,MAAM,QAAA,EACN,KAAK,OAAA,EAEL,MAAM,QAAA,EAEN,kBAAkB,EAAE,MAAA,YAAY,CAAC,kBAAkB,mCAAI,EAAE,EACzD,cAAc,EAAE,UAAU,EAC1B,SAAS,EAAE,SAAS,EACpB,cAAc,gBAAA,EAEd,MAAM,EAAE,MAAA,YAAY,CAAC,MAAM,mCAAI,EAAE,EACjC,UAAU,wBACL,iBAAiB,GACjB,YAAY,CAAC,UAAU,GAE5B,UAAU,wBACLA,KAAU,GACV,YAAY,CAAC,UAAU,GAE5B,MAAM,wBACDC,OAAM,GACN,YAAY,CAAC,MAAM,GAExB,UAAU,aACR,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,IACnB,YAAY,CAAC,UAAU,IAE7B,CAAC;IAEF,QACE,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,IACtC,QAAQ,CACiB,EAC5B;AACJ;;;;"}
+{"version":3,"file":"DayPickerProvider.js","sources":["../../../src/contexts/DayPicker/DayPickerProvider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport enUS from 'date-fns/locale/en-US';\n\nimport { Caption } from '../../components/Caption';\nimport { CaptionLabel } from '../../components/CaptionLabel';\nimport { Day } from '../../components/Day';\nimport { DayContent } from '../../components/DayContent';\nimport { Dropdown } from '../../components/Dropdown';\nimport { Footer } from '../../components/Footer';\nimport { Head } from '../../components/Head';\nimport { IconDropdown } from '../../components/IconDropdown';\nimport { IconLeft } from '../../components/IconLeft';\nimport { IconRight } from '../../components/IconRight';\nimport { Row } from '../../components/Row';\nimport { WeekNumber } from '../../components/WeekNumber';\nimport { DayPickerProps } from '../../types';\nimport { DayPickerContext, DayPickerContextValue } from './DayPickerContext';\nimport { defaultClassNames } from './defaultClassNames';\nimport * as formatters from './formatters';\nimport * as labels from './labels';\nimport { parseFromToProps, parseModifierProps } from './utils';\n\n/** Represent the props for the [[DayPickerProvider]]. */\nexport interface DayPickerProviderProps {\n  /** The props passed to the DayPicker component. */\n  initialProps: DayPickerProps;\n  children?: React.ReactNode;\n}\n/**\n * The provider for the [[DayPickerContext]].\n */\nexport function DayPickerProvider(props: DayPickerProviderProps): JSX.Element {\n  const { children, initialProps } = props;\n\n  const locale = initialProps.locale ?? enUS;\n  const numberOfMonths = initialProps.numberOfMonths ?? 1;\n  const today = initialProps.today ?? new Date();\n\n  // Limit navigation\n  const { fromDate, toDate } = parseFromToProps(initialProps);\n\n  // Default caption layout. If calendar navigation is unlimited, it must be\n  // always `buttons` – as we cannot display infinite options in the dropdown.\n  let captionLayout = initialProps.captionLayout ?? 'buttons';\n  if (!fromDate && !toDate) captionLayout = 'buttons';\n\n  const modifiers = parseModifierProps(initialProps);\n\n  // Disable days before/after from/toDate\n  if (fromDate) {\n    modifiers.disabled.push({ before: fromDate });\n  }\n  if (toDate) {\n    modifiers.disabled.push({ after: toDate });\n  }\n\n  const { toYear, fromYear, toMonth, fromMonth, ...contextProps } =\n    initialProps;\n\n  const context: DayPickerContextValue = {\n    ...contextProps,\n\n    captionLayout,\n\n    fromDate,\n    toDate,\n    today,\n\n    locale,\n\n    modifierClassNames: initialProps.modifierClassNames ?? {},\n    modifierPrefix: 'rdp-day_',\n    modifiers: modifiers,\n    numberOfMonths,\n\n    styles: initialProps.styles ?? {},\n    classNames: {\n      ...defaultClassNames,\n      ...initialProps.classNames\n    },\n    formatters: {\n      ...formatters,\n      ...initialProps.formatters\n    },\n    labels: {\n      ...labels,\n      ...initialProps.labels\n    },\n    components: {\n      Caption: Caption,\n      CaptionLabel: CaptionLabel,\n      Day: Day,\n      DayContent: DayContent,\n      Dropdown: Dropdown,\n      Footer: Footer,\n      Head: Head,\n      IconDropdown: IconDropdown,\n      IconRight: IconRight,\n      IconLeft: IconLeft,\n      Row: Row,\n      WeekNumber: WeekNumber,\n      ...initialProps.components\n    }\n  };\n\n  return (\n    <DayPickerContext.Provider value={context}>\n      {children}\n    </DayPickerContext.Provider>\n  );\n}\n"],"names":["formatters","labels"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;;;SAGgB,iBAAiB,CAAC,KAA6B;;IACrD,IAAA,QAAQ,GAAmB,KAAK,SAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;IAEzC,IAAM,MAAM,GAAG,MAAA,YAAY,CAAC,MAAM,mCAAI,IAAI,CAAC;IAC3C,IAAM,cAAc,GAAG,MAAA,YAAY,CAAC,cAAc,mCAAI,CAAC,CAAC;IACxD,IAAM,KAAK,GAAG,MAAA,YAAY,CAAC,KAAK,mCAAI,IAAI,IAAI,EAAE,CAAC;;IAGzC,IAAA,KAAuB,gBAAgB,CAAC,YAAY,CAAC,EAAnD,QAAQ,cAAA,EAAE,MAAM,YAAmC,CAAC;;;IAI5D,IAAI,aAAa,GAAG,MAAA,YAAY,CAAC,aAAa,mCAAI,SAAS,CAAC;IAC5D,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM;QAAE,aAAa,GAAG,SAAS,CAAC;IAEpD,IAAM,SAAS,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;;IAGnD,IAAI,QAAQ,EAAE;QACZ,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;KAC/C;IACD,IAAI,MAAM,EAAE;QACV,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;KAC5C;IAGC,YAAY,OADA,EACZ,YAAY,SADU,EACtB,YAAY,QADmB,EAC/B,YAAY,UAD8B,MAAK,YAAY,UAC3D,YAAY,EADR,8CAAyD,EAChD;IAEf,IAAM,OAAO,yBACR,YAAY,KAEf,aAAa,eAAA,EAEb,QAAQ,UAAA,EACR,MAAM,QAAA,EACN,KAAK,OAAA,EAEL,MAAM,QAAA,EAEN,kBAAkB,EAAE,MAAA,YAAY,CAAC,kBAAkB,mCAAI,EAAE,EACzD,cAAc,EAAE,UAAU,EAC1B,SAAS,EAAE,SAAS,EACpB,cAAc,gBAAA,EAEd,MAAM,EAAE,MAAA,YAAY,CAAC,MAAM,mCAAI,EAAE,EACjC,UAAU,wBACL,iBAAiB,GACjB,YAAY,CAAC,UAAU,GAE5B,UAAU,wBACLA,KAAU,GACV,YAAY,CAAC,UAAU,GAE5B,MAAM,wBACDC,OAAM,GACN,YAAY,CAAC,MAAM,GAExB,UAAU,aACR,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,IACnB,YAAY,CAAC,UAAU,IAE7B,CAAC;IAEF,QACE,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,IACtC,QAAQ,CACiB,EAC5B;AACJ;;;;"}

package/build/contexts/SelectMultiple/SelectMultipleProvider.js

@@ -1,62 +1,9 @@
-import { __spreadArray } from '../../_virtual/_tslib.js';
 import * as React from 'react';
-import { isSameDay } from 'date-fns';
-import { useControlledValue } from '../../hooks/useControlledValue/useControlledValue.js';
+import 'date-fns';
 import { isDayPickerMultiple } from '../../types/isDayPickerMultiple.js';
 import { SelectMultipleContext } from './SelectMultipleContext.js';
+import { SelectMultipleProviderInternal } from './SelectMultipleProviderInternal.js';
 
-function SelectMultipleProviderInternal(_a) {
-    var initialProps = _a.initialProps, children = _a.children;
-    var _b = useControlledValue(initialProps.defaultSelected, initialProps.selected), selectedDays = _b[0], setSelectedDays = _b[1];
-    var handleDayClick = function (day, modifiers, e) {
-        var _a, _b;
-        (_a = initialProps.onDayClick) === null || _a === void 0 ? void 0 : _a.call(initialProps, day, modifiers, e);
-        var isMinSelected = Boolean(initialProps.min &&
-            modifiers.selected &&
-            selectedDays &&
-            selectedDays.length === initialProps.min);
-        if (isMinSelected) {
-            return;
-        }
-        var isMaxSelected = Boolean(initialProps.max &&
-            !modifiers.selected &&
-            selectedDays &&
-            selectedDays.length === initialProps.max);
-        if (isMaxSelected) {
-            return;
-        }
-        var days = selectedDays ? __spreadArray([], selectedDays, true) : [];
-        if (modifiers.selected) {
-            var index = days.findIndex(function (selectedDay) {
-                return isSameDay(day, selectedDay);
-            });
-            days.splice(index, 1);
-        }
-        else {
-            days.push(day);
-        }
-        setSelectedDays(days);
-        (_b = initialProps.onSelect) === null || _b === void 0 ? void 0 : _b.call(initialProps, days, day, modifiers, e);
-    };
-    var modifiers = {
-        selected: [],
-        disabled: []
-    };
-    if (selectedDays) {
-        modifiers.selected = selectedDays;
-        modifiers.disabled = [
-            function disableDay(day) {
-                var isMaxSelected = initialProps.max && selectedDays.length > initialProps.max - 1;
-                var isSelected = selectedDays.some(function (selectedDay) {
-                    return isSameDay(selectedDay, day);
-                });
-                return Boolean(isMaxSelected && !isSelected);
-            }
-        ];
-    }
-    var contextValue = { selected: selectedDays, handleDayClick: handleDayClick, modifiers: modifiers };
-    return (React.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
-}
 /** Provides the values for the [[SelectMultipleContext]]. */
 function SelectMultipleProvider(props) {
     if (!isDayPickerMultiple(props.initialProps)) {

package/build/contexts/SelectMultiple/SelectMultipleProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMultipleProvider.js","sources":["../../../src/contexts/SelectMultiple/SelectMultipleProvider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { isSameDay } from 'date-fns';\n\nimport { useControlledValue } from '../../hooks/useControlledValue';\nimport {\n  DayClickEventHandler,\n  DayPickerBase,\n  DayPickerMultiple,\n  DayPickerProps,\n  isDayPickerMultiple\n} from '../../types';\nimport {\n  SelectMultipleContext,\n  SelectMultipleContextValue,\n  SelectMultipleModifiers\n} from './SelectMultipleContext';\n\nfunction SelectMultipleProviderInternal({\n  initialProps,\n  children\n}: {\n  initialProps: DayPickerBase & DayPickerMultiple;\n  children: React.ReactNode;\n}): JSX.Element {\n  const [selectedDays, setSelectedDays] = useControlledValue(\n    initialProps.defaultSelected,\n    initialProps.selected\n  );\n\n  const handleDayClick: DayClickEventHandler = (day, modifiers, e) => {\n    initialProps.onDayClick?.(day, modifiers, e);\n\n    const isMinSelected = Boolean(\n      initialProps.min &&\n        modifiers.selected &&\n        selectedDays &&\n        selectedDays.length === initialProps.min\n    );\n    if (isMinSelected) {\n      return;\n    }\n    const isMaxSelected = Boolean(\n      initialProps.max &&\n        !modifiers.selected &&\n        selectedDays &&\n        selectedDays.length === initialProps.max\n    );\n    if (isMaxSelected) {\n      return;\n    }\n\n    const days = selectedDays ? [...selectedDays] : [];\n    if (modifiers.selected) {\n      const index = days.findIndex((selectedDay) =>\n        isSameDay(day, selectedDay)\n      );\n      days.splice(index, 1);\n    } else {\n      days.push(day);\n    }\n    setSelectedDays(days);\n    initialProps.onSelect?.(days, day, modifiers, e);\n  };\n\n  const modifiers: SelectMultipleModifiers = {\n    selected: [],\n    disabled: []\n  };\n\n  if (selectedDays) {\n    modifiers.selected = selectedDays;\n    modifiers.disabled = [\n      function disableDay(day: Date) {\n        const isMaxSelected =\n          initialProps.max && selectedDays.length > initialProps.max - 1;\n        const isSelected = selectedDays.some((selectedDay) =>\n          isSameDay(selectedDay, day)\n        );\n        return Boolean(isMaxSelected && !isSelected);\n      }\n    ];\n  }\n\n  const contextValue = { selected: selectedDays, handleDayClick, modifiers };\n\n  return (\n    <SelectMultipleContext.Provider value={contextValue}>\n      {children}\n    </SelectMultipleContext.Provider>\n  );\n}\n\ntype SelectMultipleProviderProps = {\n  initialProps: DayPickerProps;\n  children: React.ReactNode;\n};\n\n/** Provides the values for the [[SelectMultipleContext]]. */\nexport function SelectMultipleProvider(\n  props: SelectMultipleProviderProps\n): JSX.Element {\n  if (!isDayPickerMultiple(props.initialProps)) {\n    const emptyContextValue: SelectMultipleContextValue = {\n      selected: undefined,\n      modifiers: {\n        selected: [],\n        disabled: []\n      }\n    };\n    return (\n      <SelectMultipleContext.Provider value={emptyContextValue}>\n        {props.children}\n      </SelectMultipleContext.Provider>\n    );\n  }\n  return (\n    <SelectMultipleProviderInternal\n      initialProps={props.initialProps}\n      children={props.children}\n    />\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectMultipleProvider.js","sources":["../../../src/contexts/SelectMultiple/SelectMultipleProvider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { DayPickerProps, isDayPickerMultiple } from '../../types';\nimport {\n  SelectMultipleContext,\n  SelectMultipleContextValue\n} from './SelectMultipleContext';\nimport { SelectMultipleProviderInternal } from './SelectMultipleProviderInternal';\n\ntype SelectMultipleProviderProps = {\n  initialProps: DayPickerProps;\n  children: React.ReactNode;\n};\n\n/** Provides the values for the [[SelectMultipleContext]]. */\nexport function SelectMultipleProvider(\n  props: SelectMultipleProviderProps\n): JSX.Element {\n  if (!isDayPickerMultiple(props.initialProps)) {\n    const emptyContextValue: SelectMultipleContextValue = {\n      selected: undefined,\n      modifiers: {\n        selected: [],\n        disabled: []\n      }\n    };\n    return (\n      <SelectMultipleContext.Provider value={emptyContextValue}>\n        {props.children}\n      </SelectMultipleContext.Provider>\n    );\n  }\n  return (\n    <SelectMultipleProviderInternal\n      initialProps={props.initialProps}\n      children={props.children}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;AAcA;SACgB,sBAAsB,CACpC,KAAkC;IAElC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE;QAC5C,IAAM,iBAAiB,GAA+B;YACpD,QAAQ,EAAE,SAAS;YACnB,SAAS,EAAE;gBACT,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,EAAE;aACb;SACF,CAAC;QACF,QACE,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,iBAAiB,IACrD,KAAK,CAAC,QAAQ,CACgB,EACjC;KACH;IACD,QACE,oBAAC,8BAA8B,IAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GACxB,EACF;AACJ;;;;"}

package/build/contexts/SelectMultiple/SelectMultipleProviderInternal.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { DayPickerMultipleProps } from '../../types';
+declare type SelectMultipleProviderInternalProps = {
+    initialProps: DayPickerMultipleProps;
+    children: React.ReactNode;
+};
+export declare function SelectMultipleProviderInternal({ initialProps, children }: SelectMultipleProviderInternalProps): JSX.Element;
+export {};