react-day-picker 8.0.7 → 8.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DayPicker.d.ts +2 -5
- package/dist/components/Button/Button.d.ts +2 -2
- package/dist/components/Caption/Caption.d.ts +2 -2
- package/dist/components/CaptionLabel/CaptionLabel.d.ts +1 -1
- package/dist/components/Day/Day.d.ts +1 -1
- package/dist/components/DayContent/DayContent.d.ts +1 -1
- package/dist/components/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/Month/Month.d.ts +1 -1
- package/dist/components/MonthsDropdown/MonthsDropdown.d.ts +1 -1
- package/dist/components/Navigation/Navigation.d.ts +1 -1
- package/dist/components/Row/Row.d.ts +1 -1
- package/dist/components/Table/Table.d.ts +1 -1
- package/dist/components/WeekNumber/WeekNumber.d.ts +1 -1
- package/dist/components/YearsDropdown/YearsDropdown.d.ts +1 -1
- package/dist/contexts/DayPicker/DayPickerContext.d.ts +5 -6
- package/dist/contexts/DayPicker/useDayPicker.d.ts +3 -3
- package/dist/contexts/Focus/FocusContext.d.ts +3 -3
- package/dist/contexts/Focus/useFocusContext.d.ts +6 -1
- package/dist/contexts/Focus/utils/getNextFocus.d.ts +9 -0
- package/dist/contexts/Modifiers/ModifiersContext.d.ts +2 -2
- package/dist/contexts/Modifiers/useModifiers.d.ts +4 -1
- package/dist/contexts/Modifiers/utils/getInternalModifiers.d.ts +1 -1
- package/dist/contexts/Navigation/NavigationContext.d.ts +9 -10
- package/dist/contexts/Navigation/useNavigation.d.ts +6 -1
- package/dist/contexts/RootProvider.d.ts +1 -1
- package/dist/contexts/SelectMultiple/SelectMultipleContext.d.ts +3 -3
- package/dist/contexts/SelectMultiple/useSelectMultiple.d.ts +5 -1
- package/dist/contexts/SelectRange/SelectRangeContext.d.ts +3 -3
- package/dist/contexts/SelectRange/useSelectRange.d.ts +5 -1
- package/dist/contexts/SelectSingle/SelectSingleContext.d.ts +3 -3
- package/dist/contexts/SelectSingle/useSelectSingle.d.ts +5 -1
- package/dist/hooks/useActiveModifiers/useActiveModifiers.d.ts +9 -3
- package/dist/hooks/useDayEventHandlers/useDayEventHandlers.d.ts +2 -2
- package/dist/hooks/useDayRender/useDayRender.d.ts +9 -16
- package/dist/hooks/useId/index.d.ts +1 -0
- package/dist/hooks/useId/useId.d.ts +19 -0
- package/dist/hooks/useInput/useInput.d.ts +5 -5
- package/dist/hooks/useSelectedDays/useSelectedDays.d.ts +4 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +417 -391
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +351 -304
- package/dist/index.js.map +1 -1
- package/dist/react-day-picker.min.js +1 -1
- package/dist/style.css +13 -19
- package/dist/style.module.css +13 -19
- package/dist/types/DayPickerBase.d.ts +30 -14
- package/dist/types/DayPickerDefault.d.ts +4 -4
- package/dist/types/DayPickerMultiple.d.ts +2 -2
- package/dist/types/DayPickerRange.d.ts +2 -2
- package/dist/types/DayPickerSingle.d.ts +2 -2
- package/dist/types/Labels.d.ts +1 -1
- package/dist/types/Matchers.d.ts +10 -10
- package/dist/types/Modifiers.d.ts +3 -5
- package/package.json +20 -24
- package/src/DayPicker.tsx +13 -10
- package/src/components/Button/Button.tsx +1 -1
- package/src/components/Caption/Caption.tsx +2 -2
- package/src/components/CaptionDropdowns/CaptionDropdowns.tsx +1 -2
- package/src/components/CaptionLabel/CaptionLabel.tsx +1 -1
- package/src/components/CaptionNavigation/CaptionNavigation.tsx +1 -3
- package/src/components/Day/Day.tsx +1 -1
- package/src/components/DayContent/DayContent.tsx +1 -1
- package/src/components/Dropdown/Dropdown.tsx +1 -1
- package/src/components/Month/Month.tsx +2 -3
- package/src/components/MonthsDropdown/MonthsDropdown.tsx +1 -1
- package/src/components/Navigation/Navigation.test.tsx +6 -6
- package/src/components/Navigation/Navigation.tsx +3 -3
- package/src/components/Root/Root.test.tsx +1 -1
- package/src/components/Root/Root.tsx +1 -1
- package/src/components/Row/Row.tsx +1 -1
- package/src/components/Table/Table.tsx +1 -1
- package/src/components/WeekNumber/WeekNumber.test.tsx +2 -4
- package/src/components/WeekNumber/WeekNumber.tsx +1 -1
- package/src/components/YearsDropdown/YearsDropdown.tsx +1 -1
- package/src/contexts/DayPicker/DayPickerContext.tsx +21 -10
- package/src/contexts/DayPicker/useDayPicker.test.ts +13 -1
- package/src/contexts/DayPicker/useDayPicker.ts +3 -3
- package/src/contexts/Focus/FocusContext.tsx +33 -85
- package/src/contexts/Focus/useFocusContext.ts +6 -1
- package/src/contexts/Focus/utils/getNextFocus.test.tsx +239 -0
- package/src/contexts/Focus/utils/getNextFocus.tsx +67 -0
- package/src/contexts/Modifiers/ModifiersContext.tsx +2 -2
- package/src/contexts/Modifiers/useModifiers.ts +4 -1
- package/src/contexts/Modifiers/utils/getInternalModifiers.ts +1 -1
- package/src/contexts/Navigation/NavigationContext.tsx +9 -10
- package/src/contexts/Navigation/useNavigation.test.ts +5 -1
- package/src/contexts/Navigation/useNavigation.ts +6 -1
- package/src/contexts/Navigation/useNavigationState.test.ts +6 -2
- package/src/contexts/Navigation/useNavigationState.ts +3 -1
- package/src/contexts/RootProvider.tsx +1 -1
- package/src/contexts/SelectMultiple/SelectMultipleContext.tsx +3 -3
- package/src/contexts/SelectMultiple/useSelectMultiple.ts +5 -1
- package/src/contexts/SelectRange/SelectRangeContext.tsx +3 -3
- package/src/contexts/SelectRange/useSelectRange.ts +5 -1
- package/src/contexts/SelectSingle/SelectSingleContext.tsx +3 -3
- package/src/contexts/SelectSingle/useSelectSingle.ts +5 -1
- package/src/hooks/useActiveModifiers/useActiveModifiers.tsx +7 -2
- package/src/hooks/useDayEventHandlers/useDayEventHandlers.tsx +2 -2
- package/src/hooks/useDayRender/useDayRender.test.tsx +1 -1
- package/src/hooks/useDayRender/useDayRender.tsx +6 -16
- package/src/hooks/useId/index.ts +1 -0
- package/src/hooks/useId/useId.ts +168 -0
- package/src/hooks/useInput/useInput.ts +5 -5
- package/src/hooks/useSelectedDays/useSelectedDays.ts +4 -2
- package/src/index.ts +1 -0
- package/src/style.css +13 -19
- package/src/types/DayPickerBase.ts +30 -14
- package/src/types/DayPickerDefault.ts +4 -4
- package/src/types/DayPickerMultiple.ts +2 -2
- package/src/types/DayPickerRange.ts +2 -2
- package/src/types/DayPickerSingle.ts +2 -2
- package/src/types/Labels.ts +1 -1
- package/src/types/Matchers.ts +10 -10
- package/src/types/Modifiers.ts +3 -5
package/dist/DayPicker.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { DaySelectionMode } from './types/DayPickerBase';
|
|
2
1
|
import { DayPickerDefaultProps } from './types/DayPickerDefault';
|
|
3
2
|
import { DayPickerMultipleProps } from './types/DayPickerMultiple';
|
|
4
3
|
import { DayPickerRangeProps } from './types/DayPickerRange';
|
|
5
4
|
import { DayPickerSingleProps } from './types/DayPickerSingle';
|
|
5
|
+
export declare type DayPickerProps = DayPickerDefaultProps | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps;
|
|
6
6
|
/**
|
|
7
7
|
* DayPicker render a date picker component to let users pick dates from a
|
|
8
8
|
* calendar. See http://react-day-picker.js.org for updated documentation and
|
|
@@ -90,7 +90,4 @@ import { DayPickerSingleProps } from './types/DayPickerSingle';
|
|
|
90
90
|
* <DayPicker locale={es} />
|
|
91
91
|
* ```
|
|
92
92
|
*/
|
|
93
|
-
export declare
|
|
94
|
-
mode?: DaySelectionMode;
|
|
95
|
-
} & (DayPickerDefaultProps | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps);
|
|
96
|
-
export declare function DayPicker(props: DayPickerProps): JSX.Element;
|
|
93
|
+
export declare function DayPicker(props: DayPickerDefaultProps | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps): JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
/** The props for the
|
|
2
|
+
/** The props for the {@link Button} component. */
|
|
3
3
|
export declare type ButtonProps = React.HTMLProps<HTMLButtonElement>;
|
|
4
4
|
/**
|
|
5
5
|
* Render a button HTML element applying the reset class name.
|
|
6
6
|
*/
|
|
7
|
-
export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "multiple" | "default" | "className" | "style" | "disabled" | "hidden" | "selected" | "dir" | "onSelect" | "required" | "min" | "max" | "cite" | "data" | "form" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "children" | "value" | "id" | "aria-label" | "onChange" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "
|
|
7
|
+
export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "multiple" | "default" | "className" | "style" | "disabled" | "hidden" | "selected" | "dir" | "onSelect" | "required" | "min" | "max" | "start" | "color" | "content" | "size" | "wrap" | "open" | "cite" | "data" | "form" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "children" | "value" | "id" | "aria-label" | "onChange" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "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" | "maxLength" | "media" | "mediaGroup" | "method" | "minLength" | "muted" | "name" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "width" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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-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" | "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" | "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>>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** Represent the props of the
|
|
1
|
+
/** Represent the props of the {@link Caption} component. */
|
|
2
2
|
export interface CaptionProps {
|
|
3
3
|
/** The ID for the heading element. Must be the same as the labelled-by in Table. */
|
|
4
4
|
id?: string;
|
|
@@ -14,6 +14,6 @@ export interface CaptionProps {
|
|
|
14
14
|
export declare type CaptionLayout = 'dropdown' | 'buttons';
|
|
15
15
|
/**
|
|
16
16
|
* Render the caption of a month. The caption has a different layout when
|
|
17
|
-
* setting the
|
|
17
|
+
* setting the {@link DayPickerBase.captionLayout} prop.
|
|
18
18
|
*/
|
|
19
19
|
export declare function Caption(props: CaptionProps): JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ActiveModifiers } from '../../types/Modifiers';
|
|
2
|
-
/** Represent the props for the
|
|
2
|
+
/** Represent the props for the {@link DayContent} component. */
|
|
3
3
|
export interface DayContentProps {
|
|
4
4
|
/** The date representing the day. */
|
|
5
5
|
date: Date;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { MonthChangeEventHandler } from '../../types/EventHandlers';
|
|
2
|
-
/** The props for the
|
|
2
|
+
/** The props for the {@link MonthsDropdown} component. */
|
|
3
3
|
export interface MonthsDropdownProps {
|
|
4
4
|
/** The month where the dropdown is displayed. */
|
|
5
5
|
displayMonth: Date;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { MonthChangeEventHandler } from '../../types/EventHandlers';
|
|
2
2
|
/**
|
|
3
|
-
* The props for the
|
|
3
|
+
* The props for the {@link YearsDropdown} component.
|
|
4
4
|
*/
|
|
5
5
|
export interface YearsDropdownProps {
|
|
6
6
|
/** The month where the drop-down is displayed. */
|
|
@@ -10,7 +10,7 @@ import { Labels } from '../../types/Labels';
|
|
|
10
10
|
import { Matcher } from '../../types/Matchers';
|
|
11
11
|
import { DayModifiers, ModifiersClassNames } from '../../types/Modifiers';
|
|
12
12
|
import { ClassNames, Styles } from '../../types/Styles';
|
|
13
|
-
/** The value of the
|
|
13
|
+
/** The value of the {@link DayPickerContext}. */
|
|
14
14
|
export interface DayPickerContextValue extends DayPickerBase {
|
|
15
15
|
mode: DaySelectionMode;
|
|
16
16
|
onSelect?: DayPickerSingleProps['onSelect'] | DayPickerMultipleProps['onSelect'] | DayPickerRangeProps['onSelect'];
|
|
@@ -30,22 +30,21 @@ export interface DayPickerContextValue extends DayPickerBase {
|
|
|
30
30
|
today: Date;
|
|
31
31
|
}
|
|
32
32
|
/**
|
|
33
|
-
* The DayPicker
|
|
33
|
+
* The DayPicker context shares the props passed to DayPicker within internal
|
|
34
34
|
* and custom components. It is used to set the default values and perform
|
|
35
35
|
* one-time calculations required to render the days.
|
|
36
36
|
*
|
|
37
|
-
*
|
|
38
|
-
* using custom components.
|
|
37
|
+
* Access to this context from the {@link useDayPicker} hook.
|
|
39
38
|
*/
|
|
40
39
|
export declare const DayPickerContext: React.Context<DayPickerContextValue | undefined>;
|
|
41
|
-
/** The props for the
|
|
40
|
+
/** The props for the {@link DayPickerProvider}. */
|
|
42
41
|
export interface DayPickerProviderProps {
|
|
43
42
|
/** The initial props from the DayPicker component. */
|
|
44
43
|
initialProps: DayPickerProps;
|
|
45
44
|
children?: ReactNode;
|
|
46
45
|
}
|
|
47
46
|
/**
|
|
48
|
-
* The provider for the
|
|
47
|
+
* The provider for the {@link DayPickerContext}, assigning the defaults from the
|
|
49
48
|
* initial DayPicker props.
|
|
50
49
|
*/
|
|
51
50
|
export declare function DayPickerProvider(props: DayPickerProviderProps): JSX.Element;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { DayPickerContextValue } from './DayPickerContext';
|
|
2
2
|
/**
|
|
3
|
-
* Hook to access the
|
|
3
|
+
* Hook to access the {@link DayPickerContextValue}.
|
|
4
4
|
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
5
|
+
* Use the DayPicker context to access to the props passed to DayPicker inside
|
|
6
|
+
* internal or custom components.
|
|
7
7
|
*/
|
|
8
8
|
export declare function useDayPicker(): DayPickerContextValue;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
-
/** Represents the value of the
|
|
2
|
+
/** Represents the value of the {@link FocusContext}. */
|
|
3
3
|
export declare type FocusContextValue = {
|
|
4
4
|
/** The day currently focused. */
|
|
5
5
|
focusedDay: Date | undefined;
|
|
@@ -27,10 +27,10 @@ export declare type FocusContextValue = {
|
|
|
27
27
|
/**
|
|
28
28
|
* The Focus context shares details about the focused day for the keyboard
|
|
29
29
|
*
|
|
30
|
-
* Access this context from the
|
|
30
|
+
* Access this context from the {@link useFocusContext} hook.
|
|
31
31
|
*/
|
|
32
32
|
export declare const FocusContext: React.Context<FocusContextValue | undefined>;
|
|
33
|
-
/** The provider for the
|
|
33
|
+
/** The provider for the {@link FocusContext}. */
|
|
34
34
|
export declare function FocusProvider(props: {
|
|
35
35
|
children: ReactNode;
|
|
36
36
|
}): JSX.Element;
|
|
@@ -1,3 +1,8 @@
|
|
|
1
1
|
import { FocusContextValue } from './FocusContext';
|
|
2
|
-
/**
|
|
2
|
+
/**
|
|
3
|
+
* Hook to access the {@link FocusContextValue}. Use this hook to handle the
|
|
4
|
+
* focus state of the elements.
|
|
5
|
+
*
|
|
6
|
+
* This hook is meant to be used inside internal or custom components.
|
|
7
|
+
*/
|
|
3
8
|
export declare function useFocusContext(): FocusContextValue;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { DayPickerContextValue } from '../../../contexts/DayPicker';
|
|
2
|
+
import { Modifiers } from '../../../types/Modifiers';
|
|
3
|
+
export declare type MoveFocusBy = 'day' | 'week' | 'startOfWeek' | 'endOfWeek' | 'month' | 'year';
|
|
4
|
+
export declare type MoveFocusDirection = 'after' | 'before';
|
|
5
|
+
export declare type MoveFocusOptions = Partial<Pick<DayPickerContextValue, 'weekStartsOn' | 'fromDate' | 'toDate' | 'locale'>>;
|
|
6
|
+
/** Return the next date to be focused. */
|
|
7
|
+
export declare function getNextFocus(
|
|
8
|
+
/** The day that is focused. */
|
|
9
|
+
focusedDay: Date, moveBy: MoveFocusBy, direction: MoveFocusDirection, options: MoveFocusOptions, modifiers?: Modifiers): Date;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
2
|
import { Modifiers } from '../../types/Modifiers';
|
|
3
|
-
/** The Modifiers context store the modifiers used in DayPicker. To access the value of this context, use
|
|
3
|
+
/** The Modifiers context store the modifiers used in DayPicker. To access the value of this context, use {@link useModifiers}. */
|
|
4
4
|
export declare const ModifiersContext: React.Context<Modifiers | undefined>;
|
|
5
5
|
export declare type ModifiersProviderProps = {
|
|
6
6
|
children: ReactNode;
|
|
7
7
|
};
|
|
8
|
-
/** Provide the value for the
|
|
8
|
+
/** Provide the value for the {@link ModifiersContext}. */
|
|
9
9
|
export declare function ModifiersProvider(props: ModifiersProviderProps): JSX.Element;
|
|
@@ -2,5 +2,8 @@ import { Modifiers } from '../../types/Modifiers';
|
|
|
2
2
|
/**
|
|
3
3
|
* Return the modifiers used by DayPicker.
|
|
4
4
|
*
|
|
5
|
-
*
|
|
5
|
+
* This hook is meant to be used inside internal or custom components.
|
|
6
|
+
* Requires to be wrapped into {@link ModifiersProvider}.
|
|
7
|
+
*
|
|
8
|
+
*/
|
|
6
9
|
export declare function useModifiers(): Modifiers;
|
|
@@ -2,5 +2,5 @@ import { DayPickerContextValue } from '../../../contexts/DayPicker';
|
|
|
2
2
|
import { SelectMultipleContextValue } from '../../../contexts/SelectMultiple';
|
|
3
3
|
import { SelectRangeContextValue } from '../../../contexts/SelectRange';
|
|
4
4
|
import { InternalModifiers } from '../../../types/Modifiers';
|
|
5
|
-
/** Return the
|
|
5
|
+
/** Return the {@link InternalModifiers} from the DayPicker and select contexts. */
|
|
6
6
|
export declare function getInternalModifiers(dayPicker: DayPickerContextValue, selectMultiple: SelectMultipleContextValue, selectRange: SelectRangeContextValue): InternalModifiers;
|
|
@@ -1,28 +1,27 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
-
/** Represents the value of the
|
|
2
|
+
/** Represents the value of the {@link NavigationContext}. */
|
|
3
3
|
export interface NavigationContextValue {
|
|
4
|
-
/** The month to display in the calendar.
|
|
4
|
+
/** The month to display in the calendar. When `numberOfMonths` is greater than one, is the first of the displayed months. */
|
|
5
5
|
currentMonth: Date;
|
|
6
|
-
/** The months rendered by DayPicker. DayPicker can render
|
|
6
|
+
/** The months rendered by DayPicker. DayPicker can render multiple months via `numberOfMonths`. */
|
|
7
7
|
displayMonths: Date[];
|
|
8
8
|
/** Navigate to the specified month. */
|
|
9
9
|
goToMonth: (month: Date) => void;
|
|
10
10
|
/** Navigate to the specified date. */
|
|
11
11
|
goToDate: (date: Date, refDate?: Date) => void;
|
|
12
|
-
/** The next month to display.
|
|
12
|
+
/** The next month to display. */
|
|
13
13
|
nextMonth?: Date;
|
|
14
|
-
/** The previous month to display.
|
|
14
|
+
/** The previous month to display. */
|
|
15
15
|
previousMonth?: Date;
|
|
16
|
-
/**
|
|
16
|
+
/** Whether the given day is included in the displayed months. */
|
|
17
17
|
isDateDisplayed: (day: Date) => boolean;
|
|
18
18
|
}
|
|
19
19
|
/**
|
|
20
|
-
* The Navigation context shares details
|
|
21
|
-
*
|
|
22
|
-
* Access this context from the [[useNavigation]] hook.
|
|
20
|
+
* The Navigation context shares details and methods to navigate the months in DayPicker.
|
|
21
|
+
* Access this context from the {@link useNavigation} hook.
|
|
23
22
|
*/
|
|
24
23
|
export declare const NavigationContext: React.Context<NavigationContextValue | undefined>;
|
|
25
|
-
/** Provides the values for the
|
|
24
|
+
/** Provides the values for the {@link NavigationContext}. */
|
|
26
25
|
export declare function NavigationProvider(props: {
|
|
27
26
|
children?: ReactNode;
|
|
28
27
|
}): JSX.Element;
|
|
@@ -1,3 +1,8 @@
|
|
|
1
1
|
import { NavigationContextValue } from './NavigationContext';
|
|
2
|
-
/**
|
|
2
|
+
/**
|
|
3
|
+
* Hook to access the {@link NavigationContextValue}. Use this hook to navigate
|
|
4
|
+
* between months or years in DayPicker.
|
|
5
|
+
*
|
|
6
|
+
* This hook is meant to be used inside internal or custom components.
|
|
7
|
+
*/
|
|
3
8
|
export declare function useNavigation(): NavigationContextValue;
|
|
@@ -5,7 +5,7 @@ import { DayClickEventHandler } from '../../types/EventHandlers';
|
|
|
5
5
|
import { InternalModifier, Modifiers } from '../../types/Modifiers';
|
|
6
6
|
/** Represent the modifiers that are changed by the multiple selection. */
|
|
7
7
|
export declare type SelectMultipleModifiers = Pick<Modifiers, InternalModifier.Disabled>;
|
|
8
|
-
/** Represents the value of a
|
|
8
|
+
/** Represents the value of a {@link SelectMultipleContext}. */
|
|
9
9
|
export interface SelectMultipleContextValue {
|
|
10
10
|
/** The days that have been selected. */
|
|
11
11
|
selected: Date[] | undefined;
|
|
@@ -18,14 +18,14 @@ export interface SelectMultipleContextValue {
|
|
|
18
18
|
* The SelectMultiple context shares details about the selected days when in
|
|
19
19
|
* multiple selection mode.
|
|
20
20
|
*
|
|
21
|
-
* Access this context from the
|
|
21
|
+
* Access this context from the {@link useSelectMultiple} hook.
|
|
22
22
|
*/
|
|
23
23
|
export declare const SelectMultipleContext: React.Context<SelectMultipleContextValue | undefined>;
|
|
24
24
|
export declare type SelectMultipleProviderProps = {
|
|
25
25
|
initialProps: DayPickerBase;
|
|
26
26
|
children: ReactNode;
|
|
27
27
|
};
|
|
28
|
-
/** Provides the values for the
|
|
28
|
+
/** Provides the values for the {@link SelectMultipleContext}. */
|
|
29
29
|
export declare function SelectMultipleProvider(props: SelectMultipleProviderProps): JSX.Element;
|
|
30
30
|
declare type SelectMultipleProviderInternalProps = {
|
|
31
31
|
initialProps: DayPickerMultipleProps;
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
import { SelectMultipleContextValue } from './SelectMultipleContext';
|
|
2
|
-
/**
|
|
2
|
+
/**
|
|
3
|
+
* Hook to access the {@link SelectMultipleContextValue}.
|
|
4
|
+
*
|
|
5
|
+
* This hook is meant to be used inside internal or custom components.
|
|
6
|
+
*/
|
|
3
7
|
export declare function useSelectMultiple(): SelectMultipleContextValue;
|
|
@@ -6,7 +6,7 @@ import { DateRange } from '../../types/Matchers';
|
|
|
6
6
|
import { InternalModifier, Modifiers } from '../../types/Modifiers';
|
|
7
7
|
/** Represent the modifiers that are changed by the range selection. */
|
|
8
8
|
export declare type SelectRangeModifiers = Pick<Modifiers, InternalModifier.Disabled | InternalModifier.RangeEnd | InternalModifier.RangeMiddle | InternalModifier.RangeStart>;
|
|
9
|
-
/** Represents the value of a
|
|
9
|
+
/** Represents the value of a {@link SelectRangeContext}. */
|
|
10
10
|
export interface SelectRangeContextValue {
|
|
11
11
|
/** The range of days that has been selected. */
|
|
12
12
|
selected: DateRange | undefined;
|
|
@@ -19,14 +19,14 @@ export interface SelectRangeContextValue {
|
|
|
19
19
|
* The SelectRange context shares details about the selected days when in
|
|
20
20
|
* range selection mode.
|
|
21
21
|
*
|
|
22
|
-
* Access this context from the
|
|
22
|
+
* Access this context from the {@link useSelectRange} hook.
|
|
23
23
|
*/
|
|
24
24
|
export declare const SelectRangeContext: React.Context<SelectRangeContextValue | undefined>;
|
|
25
25
|
declare type SelectRangeProviderProps = {
|
|
26
26
|
initialProps: DayPickerBase;
|
|
27
27
|
children: ReactNode;
|
|
28
28
|
};
|
|
29
|
-
/** Provides the values for the
|
|
29
|
+
/** Provides the values for the {@link SelectRangeProvider}. */
|
|
30
30
|
export declare function SelectRangeProvider(props: SelectRangeProviderProps): JSX.Element;
|
|
31
31
|
declare type SelectRangeProviderInternalProps = {
|
|
32
32
|
initialProps: DayPickerRangeProps;
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
import { SelectRangeContextValue } from './SelectRangeContext';
|
|
2
|
-
/**
|
|
2
|
+
/**
|
|
3
|
+
* Hook to access the {@link SelectRangeContextValue}.
|
|
4
|
+
*
|
|
5
|
+
* This hook is meant to be used inside internal or custom components.
|
|
6
|
+
*/
|
|
3
7
|
export declare function useSelectRange(): SelectRangeContextValue;
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { DayPickerBase } from '../../types/DayPickerBase';
|
|
3
3
|
import { DayPickerSingleProps } from '../../types/DayPickerSingle';
|
|
4
4
|
import { DayClickEventHandler } from '../../types/EventHandlers';
|
|
5
|
-
/** Represents the value of a
|
|
5
|
+
/** Represents the value of a {@link SelectSingleContext}. */
|
|
6
6
|
export interface SelectSingleContextValue {
|
|
7
7
|
/** The day that has been selected. */
|
|
8
8
|
selected: Date | undefined;
|
|
@@ -13,14 +13,14 @@ export interface SelectSingleContextValue {
|
|
|
13
13
|
* The SelectSingle context shares details about the selected days when in
|
|
14
14
|
* single selection mode.
|
|
15
15
|
*
|
|
16
|
-
* Access this context from the
|
|
16
|
+
* Access this context from the {@link useSelectSingle} hook.
|
|
17
17
|
*/
|
|
18
18
|
export declare const SelectSingleContext: React.Context<SelectSingleContextValue | undefined>;
|
|
19
19
|
declare type SelectSingleProviderProps = {
|
|
20
20
|
initialProps: DayPickerBase;
|
|
21
21
|
children: React.ReactNode;
|
|
22
22
|
};
|
|
23
|
-
/** Provides the values for the
|
|
23
|
+
/** Provides the values for the {@link SelectSingleProvider}. */
|
|
24
24
|
export declare function SelectSingleProvider(props: SelectSingleProviderProps): JSX.Element;
|
|
25
25
|
declare type SelectSingleProviderInternal = {
|
|
26
26
|
initialProps: DayPickerSingleProps;
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
import { SelectSingleContextValue } from './SelectSingleContext';
|
|
2
|
-
/**
|
|
2
|
+
/**
|
|
3
|
+
* Hook to access the {@link SelectSingleContextValue}.
|
|
4
|
+
*
|
|
5
|
+
* This hook is meant to be used inside internal or custom components.
|
|
6
|
+
*/
|
|
3
7
|
export declare function useSelectSingle(): SelectSingleContextValue;
|
|
@@ -2,8 +2,14 @@ import { ActiveModifiers } from '../../types/Modifiers';
|
|
|
2
2
|
/**
|
|
3
3
|
* Return the active modifiers for the specified day.
|
|
4
4
|
*
|
|
5
|
+
* This hook is meant to be used inside internal or custom components.
|
|
6
|
+
*
|
|
5
7
|
* @param day
|
|
6
|
-
* @param displayMonth
|
|
7
|
-
|
|
8
|
+
* @param displayMonth
|
|
9
|
+
*/
|
|
10
|
+
export declare function useActiveModifiers(day: Date,
|
|
11
|
+
/**
|
|
12
|
+
* The month where the date is displayed. If not the same as `date`, the day
|
|
13
|
+
* is an "outside day".
|
|
8
14
|
*/
|
|
9
|
-
|
|
15
|
+
displayMonth?: Date): ActiveModifiers;
|
|
@@ -18,9 +18,9 @@ export declare type DayEventHandlers = Pick<HTMLProps<HTMLButtonElement>, EventN
|
|
|
18
18
|
*
|
|
19
19
|
* ### Usage
|
|
20
20
|
*
|
|
21
|
-
* Use this hook to customize the behavior of the
|
|
21
|
+
* Use this hook to customize the behavior of the {@link Day} component. Create a
|
|
22
22
|
* new `Day` component using this hook and pass it to the `components` prop.
|
|
23
|
-
* The source of
|
|
23
|
+
* The source of {@link Day} can be a good starting point.
|
|
24
24
|
*
|
|
25
25
|
*/
|
|
26
26
|
export declare function useDayEventHandlers(date: Date, activeModifiers: ActiveModifiers): DayEventHandlers;
|
|
@@ -12,28 +12,21 @@ export declare type DayRender = {
|
|
|
12
12
|
/** The modifiers active for the given day. */
|
|
13
13
|
activeModifiers: ActiveModifiers;
|
|
14
14
|
/** The props to apply to the button element (when `isButton` is true). */
|
|
15
|
-
buttonProps: StyledComponent & Pick<ButtonProps, '
|
|
15
|
+
buttonProps: StyledComponent & Pick<ButtonProps, 'disabled' | 'aria-pressed' | 'tabIndex'> & DayEventHandlers;
|
|
16
16
|
/** The props to apply to the div element (when `isButton` is false). */
|
|
17
17
|
divProps: StyledComponent;
|
|
18
18
|
selectedDays: SelectedDays;
|
|
19
19
|
};
|
|
20
20
|
/**
|
|
21
|
-
* Return props and data used to render the
|
|
21
|
+
* Return props and data used to render the {@link Day} component.
|
|
22
22
|
*
|
|
23
23
|
* Use this hook when creating a component to replace the built-in `Day`
|
|
24
24
|
* component.
|
|
25
|
-
*
|
|
26
|
-
* Each Day in DayPicker should render one of the following, according to the return
|
|
27
|
-
* value:
|
|
28
|
-
*
|
|
29
|
-
* - an empty `React.Fragment`, to render if `isHidden` is true
|
|
30
|
-
* - a `button` element, when the day is interactive, e.g. is selectable
|
|
31
|
-
* - a `div` element, whe the day is not interactive
|
|
32
|
-
*
|
|
33
|
-
* @param day The date to render
|
|
34
|
-
* @param displayMonth The month where the date is displayed (if not the same as
|
|
35
|
-
* `date`, it means it is an "outside" day)
|
|
36
|
-
* @param buttonRef A ref to the button element that will be target of focus
|
|
37
|
-
* when rendered (if required).
|
|
38
25
|
*/
|
|
39
|
-
export declare function useDayRender(
|
|
26
|
+
export declare function useDayRender(
|
|
27
|
+
/** The date to render. */
|
|
28
|
+
day: Date,
|
|
29
|
+
/** The month where the date is displayed (if not the same as `date`, it means it is an "outside" day). */
|
|
30
|
+
displayMonth: Date,
|
|
31
|
+
/** A ref to the button element that will be target of focus when rendered (if required). */
|
|
32
|
+
buttonRef: React.RefObject<HTMLButtonElement>): DayRender;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './useId';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* useId
|
|
3
|
+
*
|
|
4
|
+
* Autogenerate IDs to facilitate WAI-ARIA and server rendering.
|
|
5
|
+
*
|
|
6
|
+
* Note: The returned ID will initially be `null` and will update after a
|
|
7
|
+
* component mounts. Users may need to supply their own ID if they need
|
|
8
|
+
* consistent values for SSR.
|
|
9
|
+
*
|
|
10
|
+
* @see Docs https://reach.tech/auto-id
|
|
11
|
+
*/
|
|
12
|
+
declare function useId(idFromProps: string): string;
|
|
13
|
+
declare function useId(idFromProps: number): number;
|
|
14
|
+
declare function useId(idFromProps: string | number): string | number;
|
|
15
|
+
declare function useId(idFromProps: string | undefined | null): string | undefined;
|
|
16
|
+
declare function useId(idFromProps: number | undefined | null): number | undefined;
|
|
17
|
+
declare function useId(idFromProps: string | number | undefined | null): string | number | undefined;
|
|
18
|
+
declare function useId(): string | undefined;
|
|
19
|
+
export { useId };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DayPickerBase } from '../../types/DayPickerBase';
|
|
3
3
|
import { DayPickerSingleProps } from '../../types/DayPickerSingle';
|
|
4
|
-
/** The props to attach to the input field when using
|
|
4
|
+
/** The props to attach to the input field when using {@link useInput}. */
|
|
5
5
|
export declare type InputHTMLAttributes = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'placeholder'>;
|
|
6
|
-
/** The props to attach to the DayPicker component when using
|
|
6
|
+
/** The props to attach to the DayPicker component when using {@link useInput}. */
|
|
7
7
|
export declare type InputDayPickerProps = Pick<DayPickerSingleProps, 'fromDate' | 'toDate' | 'locale' | 'month' | 'onDayClick' | 'onMonthChange' | 'selected' | 'today'>;
|
|
8
8
|
export interface UseInputOptions extends Pick<DayPickerBase, 'locale' | 'fromDate' | 'toDate' | 'fromMonth' | 'toMonth' | 'fromYear' | 'toYear' | 'today'> {
|
|
9
9
|
/** The initially selected date */
|
|
@@ -13,8 +13,8 @@ export interface UseInputOptions extends Pick<DayPickerBase, 'locale' | 'fromDat
|
|
|
13
13
|
/** Make the selection required. */
|
|
14
14
|
required?: boolean;
|
|
15
15
|
}
|
|
16
|
-
/** Represent the value returned by
|
|
17
|
-
export interface
|
|
16
|
+
/** Represent the value returned by {@link useInput}. */
|
|
17
|
+
export interface UseInputValue {
|
|
18
18
|
/** The props to pass to a DayPicker component. */
|
|
19
19
|
dayPickerProps: InputDayPickerProps;
|
|
20
20
|
/** The props to pass to an input field. */
|
|
@@ -25,4 +25,4 @@ export interface UseInput {
|
|
|
25
25
|
setSelected: (day: Date | undefined) => void;
|
|
26
26
|
}
|
|
27
27
|
/** Return props and setters for binding an input field to DayPicker. */
|
|
28
|
-
export declare function useInput(options?: UseInputOptions):
|
|
28
|
+
export declare function useInput(options?: UseInputOptions): UseInputValue;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { DateRange } from '../../types/Matchers';
|
|
2
2
|
export declare type SelectedDays = Date | Date[] | DateRange | undefined;
|
|
3
3
|
/**
|
|
4
|
-
* Return the current selected days when DayPicker is in selection mode.
|
|
4
|
+
* Return the current selected days when DayPicker is in selection mode. Days
|
|
5
|
+
* selected by the custom selection mode are not returned.
|
|
6
|
+
*
|
|
7
|
+
* This hook is meant to be used inside internal or custom components.
|
|
5
8
|
*
|
|
6
|
-
* Days selected by the custom selection mode are not returned.
|
|
7
9
|
*/
|
|
8
10
|
export declare function useSelectedDays(): SelectedDays;
|
package/dist/index.d.ts
CHANGED