react-day-picker 8.0.0-beta.26 → 8.0.0-beta.30

package/CHANGELOG.md

@@ -16,73 +16,14 @@ with the previous versions.
 
 See the preview website at https://react-day-picker-next.netlify.app.
 
-### [v8.0.0-beta.26](https://github.com/gpbl/react-day-picker/tree/v8.0.0-beta.26)
-
-- Outside days are clickable
-- ARIA improvements
-- Updated class name `.rdp-hidden` to `.rdp-vhidden`
-- Added types for `style.css`
-
-### [v8.0.0-beta.25](https://github.com/gpbl/react-day-picker/tree/v8.0.0-beta.25)
-
-- Added a global `ContextProvider`
-- ARIA improvements
-- Fix `className` and `style` not being applied to root
-
-### [v8.0.0-beta.24](https://github.com/gpbl/react-day-picker/tree/v8.0.0-beta.24)
-
-- Reintroduced CommonJS
-- Added `required` prop for single select mode
-- Fixed `useInput` bugs
-
-### [v8.0.0-beta.18](https://github.com/gpbl/react-day-picker/tree/v8.0.0-beta.18)
-
-- Removed `onSelectMultiple`, `onSelectRange` (use `onSelect`)
-- Added `min`, `max` props to limit selections
-- Set the selection mode disabled as default
-- Bug fixes
-
-### [v8.0.0-beta.17](https://github.com/gpbl/react-day-picker/tree/v8.0.0-beta.17)
-
-- Simplified class names system
-- Fixed class names for ranges
-- Improved ARIA for table elements
-- Skip footer if `undefined`
-- Use a button for outside days
-- Pass next month, previous month to Navigation
-- Fixed range modifier names
-- Updated the props for caption
-- Renamed “middle” → “between” when used in ranges
-
-### [v8.0.0-beta.14](https://github.com/gpbl/react-day-picker/tree/v8.0.0-beta.14)
-
-- Add “DayContent” component (12aed904)
-- Replace webpack with rollup (#1028) (13748058)
-
-### [v8.0.0-beta.13](https://github.com/gpbl/react-day-picker/tree/v8.0.0-beta.13)
-
-- Fix for today modifier not being added (6472e895)
-- Move `Components` to interface type (6cdc16fe)
-- Use a generic `StyledComponentProps` interface (0a75fb14)
-- Add more customizable components (5e7947a8, f4a16bbd)
-- Add new `footer` prop (92e61ffd)
-- Add some tests (da809623)
-- Make `Caption` easier to extend (69ba4515)
-
-### [v8.0.0-beta.6](https://github.com/gpbl/react-day-picker/tree/v8.0.0-beta.6)
-
-- Improved selection typings: added new selection props
-- Style fixes
-
-### [v8.0.0-beta.4](https://github.com/gpbl/react-day-picker/tree/v8.0.0-beta.4)
-
-- Updated API
-- New Selection behavior hook based
-- Added `captionLayout` prop: choose between drop-downs or buttons for navigation
-- Bug fixes
-- Style and layout improvements
-
-</details>
+### v8.0.0-beta.30
+
+- Switched to rollup as module bundler
+- Added `custom` selection mode
+- Added `useDay` hook
+- Fixed `classNames.nav_button_next` in Navigation.tsx (#1238)
+- Fixed week numbers breaking at end/begin of the years (#1270)
+- Fixed overwritten modifiers in range selections
 
 ## Older changelog
 

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014-2021 Giampaolo Bellavite <io@gpbl.dev>
+Copyright (c) 2014-2021 Giampaolo Bellavite <io@gpbl.dev> and contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,6 +1,6 @@
 # React DayPicker
 
-DayPicker is a reusable date picker component for [React](https://reactjs.org).
+DayPicker is a date picker component for [React](https://reactjs.org).
 
 ```bash
 $ npm install react-day-picker@next
@@ -8,9 +8,8 @@ $ npm install react-day-picker@next
 
 ### Beta version ⚠️
 
-This branch is for the next major version 8 – which is currently in development
-and not ready for production. For the stable version see the [**v7
-branch**](https://github.com/gpbl/react-day-picker/tree/v7).
+The [**master branch**](https://github.com/gpbl/react-day-picker/tree/master) is for the next major version 8 – which is currently in development
+and not ready for production. For the stable version see the [**v7 branch**](https://github.com/gpbl/react-day-picker/tree/v7).
 
 ## Main features
 
@@ -22,7 +21,7 @@ branch**](https://github.com/gpbl/react-day-picker/tree/v7).
 - 🎨 easy to style and customize
 - 🤖 native Typescript support
 - 📄 easy integration with input elements
-- 🧘‍♀️ using [date-fns](http://date-fns.org) as date libray
+- 🧘‍♀️ using [date-fns](http://date-fns.org) as date library
 
 ## Documentation
 

package/build/DayPicker.d.ts

@@ -0,0 +1,88 @@
+/// <reference types="react" />
+import { DayPickerProps } 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
+ * examples.
+ *
+ * ### Customization
+ *
+ * DayPicker offers different customization props. For example,
+ *
+ * - show multiple months using `numberOfMonths`
+ * - display a dropdown to navigate the months via `captionLayout`
+ * - display the week numbers with `showWeekNumbers`
+ * - disable or hide days with `disabled` or `hidden`
+ *
+ * ### Controlling the months
+ *
+ * Change the initially displayed month using the `defaultMonth` prop. The
+ * displayed months are controlled by DayPicker and stored in its internal
+ * state. To control the months yourself, use `month` instead of `defaultMonth`
+ * and use the `onMonthChange` event to set it.
+ *
+ * To limit the months the user can navigate to, use
+ * `fromDate`/`fromMonth`/`fromYear` or `toDate`/`toMonth`/`toYear`.
+ *
+ * ### Selection modes
+ *
+ * DayPicker supports different selection mode that can be toggled using the
+ * `mode` prop:
+ *
+ * - `mode="single"`: only one day can be selected. Use `required` to make the
+ *   selection required. Use the `onSelect` event handler to get the selected
+ *   days.
+ * - `mode="multiple"`: users can select one or more days. Limit the amount of
+ *   days that can be selected with the `min` or the `max` props.
+ * - `mode="range"`: users can select a range of days. Limit the amount of days
+ *   in the range with the `min` or the `max` props.
+ *
+ * These selection modes should cover the most common use cases. In case you
+ * need a more refined way of selecting days, use `mode="custom"`. Use the
+ * `selected` props and add the day event handlers to add/remove days from the
+ * selection.
+ *
+ * ### Modifiers
+ *
+ * A _modifier_ represents different styles or states for the days displayed in
+ * the calendar (like "selected" or "disabled"). Define custom modifiers using
+ * the `modifiers` prop.
+ *
+ * ### Formatters and custom component
+ *
+ * You can customize how the content is displayed in the date picker by using
+ * either the formatters or replacing the internal components.
+ *
+ * For the most common cases you want to use the `formatters` prop to change how
+ * the content is formatted in the calendar. Use the `components` prop to
+ * replace the internal components, like the navigation icons.
+ *
+ * ### Styling
+ *
+ * DayPicker comes with a default, basic style in `react-day-picker/style` –
+ * use it as template for your own style.
+ *
+ * If you are using CSS modules, pass the imported styles object the
+ * `classNames` props.
+ *
+ * You can also style the elements via inline-styles using the `styles` prop.
+ *
+ * ### Form fields
+ *
+ * If you need to bind the date picker to a form field, you can use the
+ * `useInput` hooks for a basic behavior. See the `useInput` source as an
+ * example to bind the date picker with form fields.
+ *
+ * ### Localization
+ *
+ * To localize DayPicker, import the locale from `date-fns` package and use the
+ * `locale` prop.
+ *
+ * For example, to use Spanish locale:
+ *
+ * ```
+ * import es from 'date-fns/locale/es';
+ * <DayPicker locale={es} />
+ * ```
+ */
+export declare function DayPicker(props: DayPickerProps): JSX.Element;

package/build/DayPicker.js

@@ -0,0 +1,97 @@
+import { __assign } from './_virtual/_tslib.js';
+import * as React from 'react';
+import { Root } from './components/Root/Root.js';
+import { ContextProvider } from './contexts/ContextProvider.js';
+
+/**
+ * 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
+ * examples.
+ *
+ * ### Customization
+ *
+ * DayPicker offers different customization props. For example,
+ *
+ * - show multiple months using `numberOfMonths`
+ * - display a dropdown to navigate the months via `captionLayout`
+ * - display the week numbers with `showWeekNumbers`
+ * - disable or hide days with `disabled` or `hidden`
+ *
+ * ### Controlling the months
+ *
+ * Change the initially displayed month using the `defaultMonth` prop. The
+ * displayed months are controlled by DayPicker and stored in its internal
+ * state. To control the months yourself, use `month` instead of `defaultMonth`
+ * and use the `onMonthChange` event to set it.
+ *
+ * To limit the months the user can navigate to, use
+ * `fromDate`/`fromMonth`/`fromYear` or `toDate`/`toMonth`/`toYear`.
+ *
+ * ### Selection modes
+ *
+ * DayPicker supports different selection mode that can be toggled using the
+ * `mode` prop:
+ *
+ * - `mode="single"`: only one day can be selected. Use `required` to make the
+ *   selection required. Use the `onSelect` event handler to get the selected
+ *   days.
+ * - `mode="multiple"`: users can select one or more days. Limit the amount of
+ *   days that can be selected with the `min` or the `max` props.
+ * - `mode="range"`: users can select a range of days. Limit the amount of days
+ *   in the range with the `min` or the `max` props.
+ *
+ * These selection modes should cover the most common use cases. In case you
+ * need a more refined way of selecting days, use `mode="custom"`. Use the
+ * `selected` props and add the day event handlers to add/remove days from the
+ * selection.
+ *
+ * ### Modifiers
+ *
+ * A _modifier_ represents different styles or states for the days displayed in
+ * the calendar (like "selected" or "disabled"). Define custom modifiers using
+ * the `modifiers` prop.
+ *
+ * ### Formatters and custom component
+ *
+ * You can customize how the content is displayed in the date picker by using
+ * either the formatters or replacing the internal components.
+ *
+ * For the most common cases you want to use the `formatters` prop to change how
+ * the content is formatted in the calendar. Use the `components` prop to
+ * replace the internal components, like the navigation icons.
+ *
+ * ### Styling
+ *
+ * DayPicker comes with a default, basic style in `react-day-picker/style` –
+ * use it as template for your own style.
+ *
+ * If you are using CSS modules, pass the imported styles object the
+ * `classNames` props.
+ *
+ * You can also style the elements via inline-styles using the `styles` prop.
+ *
+ * ### Form fields
+ *
+ * If you need to bind the date picker to a form field, you can use the
+ * `useInput` hooks for a basic behavior. See the `useInput` source as an
+ * example to bind the date picker with form fields.
+ *
+ * ### Localization
+ *
+ * To localize DayPicker, import the locale from `date-fns` package and use the
+ * `locale` prop.
+ *
+ * For example, to use Spanish locale:
+ *
+ * ```
+ * import es from 'date-fns/locale/es';
+ * <DayPicker locale={es} />
+ * ```
+ */
+function DayPicker(props) {
+    return (React.createElement(ContextProvider, __assign({}, props),
+        React.createElement(Root, null)));
+}
+
+export { DayPicker };
+//# sourceMappingURL=DayPicker.js.map

package/build/DayPicker.js.map

@@ -0,0 +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;;;;"}

package/build/_virtual/_tslib.js

@@ -0,0 +1,50 @@
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+export { __assign, __rest, __spreadArray };
+//# sourceMappingURL=_tslib.js.map

package/build/_virtual/_tslib.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_tslib.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Button/Button.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+/** The props for the [[Button]] component. */
+export declare type ButtonProps = React.HTMLProps<HTMLButtonElement>;
+/**
+ * Render a button HTML element applying the reset class name.
+ */
+export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLButtonElement>>;

package/build/components/Button/Button.js

@@ -0,0 +1,23 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import * as React from 'react';
+import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
+
+/**
+ * Render a button HTML element applying the reset class name.
+ */
+var Button = React.forwardRef(function (props, ref) {
+    var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
+    var classNamesArr = [classNames.button_reset, classNames.button];
+    if (props.className) {
+        classNamesArr.push(props.className);
+    }
+    var className = classNamesArr.join(' ');
+    var style = __assign(__assign({}, styles.button_reset), styles.button);
+    if (props.style) {
+        Object.assign(style, props.style);
+    }
+    return (React.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
+});
+
+export { Button };
+//# sourceMappingURL=Button.js.map

package/build/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\n\n/** The props for the [[Button]] component. */\nexport type ButtonProps = React.HTMLProps<HTMLButtonElement>;\n\n/**\n * Render a button HTML element applying the reset class name.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref) => {\n    const { classNames, styles } = useDayPicker();\n\n    const classNamesArr = [classNames.button_reset, classNames.button];\n    if (props.className) {\n      classNamesArr.push(props.className);\n    }\n    const className = classNamesArr.join(' ');\n\n    const style = { ...styles.button_reset, ...styles.button };\n    if (props.style) {\n      Object.assign(style, props.style);\n    }\n\n    return (\n      <button\n        {...props}\n        ref={ref}\n        type=\"button\"\n        className={className}\n        style={style}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;AAOA;;;IAGa,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,UAAC,KAAK,EAAE,GAAG;IACH,IAAA,KAAyB,YAAY,EAAE,EAArC,UAAU,gBAAA,EAAE,MAAM,YAAmB,CAAC;IAE9C,IAAM,aAAa,GAAG,CAAC,UAAU,CAAC,YAAY,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IACnE,IAAI,KAAK,CAAC,SAAS,EAAE;QACnB,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;KACrC;IACD,IAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE1C,IAAM,KAAK,yBAAQ,MAAM,CAAC,YAAY,GAAK,MAAM,CAAC,MAAM,CAAE,CAAC;IAC3D,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;KACnC;IAED,QACE,2CACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,IACZ,EACF;AACJ,CAAC;;;;"}

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

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

package/build/components/Caption/Caption.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+/** Represent the props of the [[Caption]] component. */
+export interface CaptionProps {
+    /** The month where the caption is displayed. */
+    displayMonth: Date;
+}
+/**
+ * Render the caption of a month, which includes title and navigation buttons.
+ * The caption has a different layout when setting the `numberOfMonths` prop.
+ */
+export declare function Caption(props: CaptionProps): JSX.Element;

package/build/components/Caption/Caption.js

@@ -0,0 +1,57 @@
+import * as React 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';
+
+/**
+ * Render the caption of a month, which includes title and navigation buttons.
+ * The caption has a different layout when setting the `numberOfMonths` prop.
+ */
+function Caption(props) {
+    var _a;
+    var displayMonth = props.displayMonth;
+    var context = useDayPicker();
+    var classNames = context.classNames, numberOfMonths = context.numberOfMonths, disableNavigation = context.disableNavigation, styles = context.styles, captionLayout = context.captionLayout, onMonthChange = context.onMonthChange, dir = context.dir, CaptionLabel = context.components.CaptionLabel;
+    var _b = useNavigation(), previousMonth = _b.previousMonth, nextMonth = _b.nextMonth, goToMonth = _b.goToMonth, displayMonths = _b.displayMonths;
+    var handlePreviousClick = function (e) {
+        if (!previousMonth)
+            return;
+        goToMonth(previousMonth);
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(previousMonth);
+    };
+    var handleNextClick = function (e) {
+        if (!nextMonth)
+            return;
+        goToMonth(nextMonth);
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextMonth);
+    };
+    var handleMonthChange = function (newMonth) {
+        goToMonth(newMonth);
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newMonth);
+    };
+    var displayIndex = displayMonths.findIndex(function (month) {
+        return isSameMonth(displayMonth, month);
+    });
+    var isFirst = displayIndex === 0;
+    var isLast = displayIndex === displayMonths.length - 1;
+    if (dir === 'rtl') {
+        _a = [isFirst, isLast], isLast = _a[0], isFirst = _a[1];
+    }
+    var captionLabel = React.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 },
+        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 })))))));
+}
+
+export { Caption };
+//# sourceMappingURL=Caption.js.map

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

@@ -0,0 +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;;;;"}

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

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

package/build/components/CaptionLabel/CaptionLabel.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/** The props for the [[CaptionLabel]] component. */
+export interface CaptionLabelProps {
+    /** The month where the caption is displayed. */
+    displayMonth: Date;
+}
+/** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
+export declare function CaptionLabel(props: CaptionLabelProps): JSX.Element;

package/build/components/CaptionLabel/CaptionLabel.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { useDayPicker } from '../../contexts/DayPicker/useDayPicker.js';
+
+/** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
+function CaptionLabel(props) {
+    var _a = useDayPicker(), locale = _a.locale, classNames = _a.classNames, styles = _a.styles, formatCaption = _a.formatters.formatCaption;
+    return (React.createElement("div", { key: "caption", className: classNames.caption_label, style: styles.caption_label, "aria-live": "polite", "aria-atomic": "true" }, formatCaption(props.displayMonth, { locale: locale })));
+}
+
+export { CaptionLabel };
+//# sourceMappingURL=CaptionLabel.js.map

package/build/components/CaptionLabel/CaptionLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaptionLabel.js","sources":["../../../src/components/CaptionLabel/CaptionLabel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useDayPicker } from '../../contexts/DayPicker';\n\n/** The props for the [[CaptionLabel]] component. */\nexport interface CaptionLabelProps {\n  /** The month where the caption is displayed. */\n  displayMonth: Date;\n}\n\n/** Render the caption for the displayed month. This component is used when `captionLayout=\"buttons\"`. */\nexport function CaptionLabel(props: CaptionLabelProps): JSX.Element {\n  const {\n    locale,\n    classNames,\n    styles,\n    formatters: { formatCaption }\n  } = useDayPicker();\n  return (\n    <div\n      key=\"caption\"\n      className={classNames.caption_label}\n      style={styles.caption_label}\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n    >\n      {formatCaption(props.displayMonth, { locale })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAUA;SACgB,YAAY,CAAC,KAAwB;IAC7C,IAAA,KAKF,YAAY,EAAE,EAJhB,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,MAAM,YAAA,EACQ,aAAa,8BACX,CAAC;IACnB,QACE,6BACE,GAAG,EAAC,SAAS,EACb,SAAS,EAAE,UAAU,CAAC,aAAa,EACnC,KAAK,EAAE,MAAM,CAAC,aAAa,eACjB,QAAQ,iBACN,MAAM,IAEjB,aAAa,CAAC,KAAK,CAAC,YAAY,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAC1C,EACN;AACJ;;;;"}

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

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

package/build/components/Day/Day.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+/** Represent the props used by the [[Day]] component. */
+export interface DayProps {
+    /** The month where the date is displayed. */
+    displayMonth: Date;
+    /** The date to render. */
+    date: Date;
+}
+/**
+ * The content of a day cell – as a button or span element according to its
+ * modifiers.
+ */
+export declare function Day(props: DayProps): JSX.Element;

package/build/components/Day/Day.js

@@ -0,0 +1,24 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import * as React from 'react';
+import { Button } from '../Button/Button.js';
+import { useDay } from './hooks/useDay.js';
+
+/**
+ * The content of a day cell – as a button or span element according to its
+ * modifiers.
+ */
+function Day(props) {
+    var buttonRef = React.useRef(null);
+    var day = useDay(props.date, props.displayMonth, buttonRef);
+    var buttonProps = day.buttonProps, nonInteractiveProps = day.nonInteractiveProps;
+    if (!buttonProps && !nonInteractiveProps) {
+        return React.createElement(React.Fragment, null);
+    }
+    if (nonInteractiveProps) {
+        return React.createElement("div", __assign({}, nonInteractiveProps));
+    }
+    return React.createElement(Button, __assign({ ref: buttonRef }, buttonProps));
+}
+
+export { Day };
+//# sourceMappingURL=Day.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Day.js","sources":["../../../src/components/Day/Day.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from '../Button';\n\nimport { useDay } from './hooks/useDay';\n\n/** Represent the props used by the [[Day]] component. */\nexport interface DayProps {\n  /** The month where the date is displayed. */\n  displayMonth: Date;\n  /** The date to render. */\n  date: Date;\n}\n\n/**\n * The content of a day cell – as a button or span element according to its\n * modifiers.\n */\nexport function Day(props: DayProps): JSX.Element {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  const day = useDay(props.date, props.displayMonth, buttonRef);\n  const { buttonProps, nonInteractiveProps } = day;\n\n  if (!buttonProps && !nonInteractiveProps) {\n    return <></>;\n  }\n  if (nonInteractiveProps) {\n    return <div {...nonInteractiveProps} />;\n  }\n  return <Button ref={buttonRef} {...buttonProps} />;\n}\n"],"names":[],"mappings":";;;;;AAcA;;;;SAIgB,GAAG,CAAC,KAAe;IACjC,IAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IAExD,IAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IACtD,IAAA,WAAW,GAA0B,GAAG,YAA7B,EAAE,mBAAmB,GAAK,GAAG,oBAAR,CAAS;IAEjD,IAAI,CAAC,WAAW,IAAI,CAAC,mBAAmB,EAAE;QACxC,OAAO,yCAAK,CAAC;KACd;IACD,IAAI,mBAAmB,EAAE;QACvB,OAAO,wCAAS,mBAAmB,EAAI,CAAC;KACzC;IACD,OAAO,oBAAC,MAAM,aAAC,GAAG,EAAE,SAAS,IAAM,WAAW,EAAI,CAAC;AACrD;;;;"}

package/build/components/Day/hooks/index.d.ts

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