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

package/CHANGELOG.md

@@ -16,7 +16,42 @@ 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.36
+
+- feat: added caption ARIA labels. This change introduce `@reach/auto-id` dependency (#1358) (b8bbf419)
+- feat: caption element has now an heading role (uses `h2`) (#1335) (bfb77869)
+- feat: improved focus support (#1343) (9d09587d)
+- feat: added `initialFocus` focus prop (#1351) (8f6d979d)
+- feat: table uses `grid` role (#1337) (4ae64022)
+- chore: added Month component (#1327) (fc9d9136)
+- chore: rename styles and elements (#1336, #1329, #1325)
+- fix: fixed type `useInput`'s `setSelected` (#1344) (c8f64fdf)
+- fix: missing today modifier (#1319) (c4445a4c)
+
+### v8.0.0-beta.35
+
+- feat: add extended keyboard navigation (#1300) (2a098719)
+- chore: export missing Button component (5ba65841)
+- chore: rename `handleDayClick` to `onDayClick` (3d1678b2)
+- chore: limit documented exports (c2fbd576)
+- build: fix circular dependency (5cd0c2c8)
+
+### v8.0.0-beta.33
+
+- chore: unify context files (#1303) (d66b3981)
+- chore: cleanup useInput types (7faec569)
+- chore: improve internal modifiers typings (#1299) (9ddc64d9)
+- chore: consolidate types (#1297) (e00c59e7)
+
+### v8.0.0-beta.32
+
+- fix: previous/next month navigation with RTL direction (68ad0adf)
+- chore: updated `useInput` API (#1293)
+- chore: removed `defaultSelected` prop (cd4f5790)
+
+### 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,88 +1,93 @@
-/// <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;
+/// <reference types="react" />
+import { DayPickerProps } from './types/DayPicker';
+import { DayPickerCustomProps } from './types/DayPickerCustom';
+import { DayPickerMultipleProps } from './types/DayPickerMultiple';
+import { DayPickerRangeProps } from './types/DayPickerRange';
+import { DayPickerSingleProps } from './types/DayPickerSingle';
+/**
+ * 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.
+ * - `mode="custom"`: implement your own selection mode with `onDayClick`.
+ *
+ * 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 | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps | DayPickerCustomProps): JSX.Element;

package/build/DayPicker.js

@@ -1,97 +1,95 @@
-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)));
+import { __assign } from "tslib";
+import React from 'react';
+import { Root } from './components/Root';
+import { RootProvider } from './contexts/RootProvider';
+/**
+ * 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.
+ * - `mode="custom"`: implement your own selection mode with `onDayClick`.
+ *
+ * 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 function DayPicker(props) {
+    return (React.createElement(RootProvider, __assign({}, props),
+        React.createElement(Root, null)));
 }
-
-export { DayPicker };
-//# sourceMappingURL=DayPicker.js.map
+//# sourceMappingURL=DayPicker.js.map

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","sourceRoot":"","sources":["../src/DayPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,MAAM,UAAU,SAAS,CACvB,KAKwB;IAExB,OAAO,CACL,oBAAC,YAAY,eAAK,KAAK;QACrB,oBAAC,IAAI,OAAG,CACK,CAChB,CAAC;AACJ,CAAC"}

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

@@ -1,7 +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>>;
+import 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, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "children" | "className" | "id" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "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" | "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

@@ -1,23 +1,20 @@
-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 })));
+import { __assign } from "tslib";
+import React from 'react';
+import { useDayPicker } from '../../contexts/DayPicker';
+/**
+ * Render a button HTML element applying the reset class name.
+ */
+export 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
+//# sourceMappingURL=Button.js.map

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

@@ -1 +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;;;;"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAKlD;;GAEG;AACH,MAAM,CAAC,IAAM,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,OAAO,CACL,2CACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

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

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

package/build/components/Button/index.js

@@ -0,0 +1,2 @@
+export * from './Button';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

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

@@ -1,11 +1,20 @@
-/// <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;
+/// <reference types="react" />
+/** Represent the props of the [[Caption]] component. */
+export interface CaptionProps {
+    /** The ID for the heading element. Must be the same as the labelled-by in Table. */
+    id?: string;
+    /** The month where the caption is displayed. */
+    displayMonth: Date;
+}
+/**
+ * The layout of the caption:
+ *
+ * - `dropdown`: display dropdowns for choosing the month and the year.
+ * - `buttons`: display previous month / next month buttons.
+ */
+export declare type CaptionLayout = 'dropdown' | 'buttons';
+/**
+ * Render the caption of a month, which includes title and navigation buttons.
+ * The caption has a different layout when setting the [[DayPickerProps.captionLayout]] prop.
+ */
+export declare function Caption(props: CaptionProps): JSX.Element;