@zendeskgarden/react-datepickers 9.0.0-next.0 → 9.0.0-next.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/dist/esm/elements/DatePicker/DatePicker.js +169 -0
- package/dist/esm/elements/DatePicker/components/Calendar.js +125 -0
- package/dist/esm/elements/DatePicker/components/Input.js +75 -0
- package/dist/esm/elements/DatePicker/components/MonthSelector.js +61 -0
- package/dist/esm/elements/DatePicker/utils/date-picker-reducer.js +187 -0
- package/dist/esm/elements/DatePicker/utils/useDatePickerContext.js +14 -0
- package/dist/esm/elements/DatePickerRange/DatePickerRange.js +101 -0
- package/dist/esm/elements/DatePickerRange/components/Calendar.js +42 -0
- package/dist/esm/elements/DatePickerRange/components/End.js +79 -0
- package/dist/esm/elements/DatePickerRange/components/Month.js +270 -0
- package/dist/esm/elements/DatePickerRange/components/Start.js +79 -0
- package/dist/esm/elements/DatePickerRange/utils/date-picker-range-reducer.js +319 -0
- package/dist/esm/elements/DatePickerRange/utils/useDatePickerRangeContext.js +14 -0
- package/dist/esm/index.js +8 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js +25 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js +25 -0
- package/dist/esm/styled/StyledCalendar.js +21 -0
- package/dist/esm/styled/StyledCalendarItem.js +34 -0
- package/dist/esm/styled/StyledDatePicker.js +32 -0
- package/dist/esm/styled/StyledDay.js +54 -0
- package/dist/esm/styled/StyledDayLabel.js +21 -0
- package/dist/esm/styled/StyledHeader.js +21 -0
- package/dist/esm/styled/StyledHeaderLabel.js +21 -0
- package/dist/esm/styled/StyledHeaderPaddle.js +38 -0
- package/dist/esm/styled/StyledHighlight.js +50 -0
- package/dist/esm/styled/StyledMenu.js +22 -0
- package/dist/esm/styled/StyledMenuWrapper.js +27 -0
- package/dist/esm/styled/StyledRangeCalendar.js +22 -0
- package/dist/esm/types/index.js +12 -0
- package/dist/esm/utils/calendar-utils.js +88 -0
- package/dist/index.cjs.js +195 -238
- package/dist/typings/elements/{Datepicker/Datepicker.d.ts → DatePicker/DatePicker.d.ts} +2 -2
- package/dist/typings/elements/DatePicker/components/Input.d.ts +16 -0
- package/dist/typings/elements/{Datepicker/utils/datepicker-reducer.d.ts → DatePicker/utils/date-picker-reducer.d.ts} +6 -6
- package/dist/typings/elements/DatePicker/utils/useDatePickerContext.d.ts +18 -0
- package/dist/typings/elements/{DatepickerRange/DatepickerRange.d.ts → DatePickerRange/DatePickerRange.d.ts} +3 -3
- package/dist/typings/elements/{DatepickerRange/utils/datepicker-range-reducer.d.ts → DatePickerRange/utils/date-picker-range-reducer.d.ts} +6 -6
- package/dist/typings/elements/{DatepickerRange/utils/useDatepickerRangeContext.d.ts → DatePickerRange/utils/useDatePickerRangeContext.d.ts} +7 -7
- package/dist/typings/index.d.ts +3 -5
- package/dist/typings/styled/{StyledDatepicker.d.ts → StyledDatePicker.d.ts} +3 -3
- package/dist/typings/styled/StyledMenuWrapper.d.ts +2 -2
- package/dist/typings/styled/index.d.ts +1 -1
- package/dist/typings/types/index.d.ts +5 -14
- package/dist/typings/utils/calendar-utils.d.ts +2 -2
- package/package.json +8 -7
- package/dist/index.esm.js +0 -1714
- package/dist/typings/elements/Datepicker/utils/garden-placements.d.ts +0 -21
- package/dist/typings/elements/Datepicker/utils/useDatepickerContext.d.ts +0 -18
- /package/dist/typings/elements/{Datepicker → DatePicker}/components/Calendar.d.ts +0 -0
- /package/dist/typings/elements/{Datepicker → DatePicker}/components/MonthSelector.d.ts +0 -0
- /package/dist/typings/elements/{DatepickerRange → DatePickerRange}/components/Calendar.d.ts +0 -0
- /package/dist/typings/elements/{DatepickerRange → DatePickerRange}/components/End.d.ts +0 -0
- /package/dist/typings/elements/{DatepickerRange → DatePickerRange}/components/Month.d.ts +0 -0
- /package/dist/typings/elements/{DatepickerRange → DatePickerRange}/components/Start.d.ts +0 -0
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
-
import {
|
|
8
|
+
import { IDatePickerProps } from '../../types';
|
|
9
9
|
/**
|
|
10
10
|
* @extends HTMLAttributes<HTMLDivElement>
|
|
11
11
|
*/
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const DatePicker: React.ForwardRefExoticComponent<IDatePickerProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { Dispatch, ReactElement, RefAttributes } from 'react';
|
|
8
|
+
import { DatePickerAction, IDatePickerState } from '../utils/date-picker-reducer';
|
|
9
|
+
interface IInputProps {
|
|
10
|
+
dispatch: Dispatch<DatePickerAction>;
|
|
11
|
+
element: ReactElement & RefAttributes<HTMLInputElement>;
|
|
12
|
+
refKey: string;
|
|
13
|
+
state: IDatePickerState;
|
|
14
|
+
}
|
|
15
|
+
export declare const Input: import("react").ForwardRefExoticComponent<IInputProps & RefAttributes<HTMLInputElement>>;
|
|
16
|
+
export {};
|
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import {
|
|
8
|
-
export interface
|
|
7
|
+
import { IDatePickerProps } from '../../../types';
|
|
8
|
+
export interface IDatePickerState {
|
|
9
9
|
isOpen: boolean;
|
|
10
10
|
previewDate: Date;
|
|
11
11
|
inputValue: string;
|
|
12
12
|
}
|
|
13
|
-
export type
|
|
13
|
+
export type DatePickerAction = {
|
|
14
14
|
type: 'OPEN';
|
|
15
15
|
} | {
|
|
16
16
|
type: 'CLOSE';
|
|
@@ -36,8 +36,8 @@ export declare const datepickerReducer: ({ value, formatDate, locale, customPars
|
|
|
36
36
|
locale: any;
|
|
37
37
|
customParseDate?: ((inputValue: string) => Date) | undefined;
|
|
38
38
|
onChange?: ((date: Date) => void) | undefined;
|
|
39
|
-
}) => (state:
|
|
39
|
+
}) => (state: IDatePickerState, action: DatePickerAction) => IDatePickerState;
|
|
40
40
|
/**
|
|
41
|
-
* Retrieve initial state for the
|
|
41
|
+
* Retrieve initial state for the DatePicker reducer
|
|
42
42
|
*/
|
|
43
|
-
export declare function retrieveInitialState(initialProps:
|
|
43
|
+
export declare function retrieveInitialState(initialProps: IDatePickerProps): IDatePickerState;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
/// <reference types="react" />
|
|
8
|
+
import { IDatePickerState, DatePickerAction } from './date-picker-reducer';
|
|
9
|
+
export interface IDatePickerContext {
|
|
10
|
+
state: IDatePickerState;
|
|
11
|
+
dispatch: React.Dispatch<DatePickerAction>;
|
|
12
|
+
}
|
|
13
|
+
export declare const DatePickerContext: import("react").Context<IDatePickerContext | undefined>;
|
|
14
|
+
/**
|
|
15
|
+
* Retrieve Dropdown component context
|
|
16
|
+
*/
|
|
17
|
+
declare const useDatePickerContext: () => IDatePickerContext;
|
|
18
|
+
export default useDatePickerContext;
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import React, { PropsWithChildren } from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
|
-
import {
|
|
9
|
+
import { IDatePickerRangeProps } from '../../types';
|
|
10
10
|
import { Start } from './components/Start';
|
|
11
11
|
import { End } from './components/End';
|
|
12
12
|
import { Calendar } from './components/Calendar';
|
|
13
|
-
export declare const
|
|
14
|
-
(props: PropsWithChildren<
|
|
13
|
+
export declare const DatePickerRange: {
|
|
14
|
+
(props: PropsWithChildren<IDatePickerRangeProps>): React.JSX.Element;
|
|
15
15
|
propTypes: {
|
|
16
16
|
locale: PropTypes.Requireable<string>;
|
|
17
17
|
weekStartsOn: PropTypes.Requireable<number>;
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import {
|
|
8
|
-
export interface
|
|
7
|
+
import { IDatePickerRangeProps } from '../../../types';
|
|
8
|
+
export interface IDatePickerRangeState {
|
|
9
9
|
previewDate: Date;
|
|
10
10
|
hoverDate?: Date;
|
|
11
11
|
isStartFocused: boolean;
|
|
@@ -27,7 +27,7 @@ export declare function formatValue({ value, locale, formatDate }: {
|
|
|
27
27
|
export declare function parseInputValue({ inputValue }: {
|
|
28
28
|
inputValue?: string;
|
|
29
29
|
}): Date;
|
|
30
|
-
export type
|
|
30
|
+
export type DatePickerRangeAction = {
|
|
31
31
|
type: 'HOVER_DATE';
|
|
32
32
|
value?: Date;
|
|
33
33
|
} | {
|
|
@@ -64,8 +64,8 @@ export declare const datepickerRangeReducer: ({ startValue, endValue, locale, fo
|
|
|
64
64
|
locale?: string | undefined;
|
|
65
65
|
formatDate?: any;
|
|
66
66
|
customParseDate?: ((inputValue?: string) => Date) | undefined;
|
|
67
|
-
}) => (state:
|
|
67
|
+
}) => (state: IDatePickerRangeState, action: DatePickerRangeAction) => IDatePickerRangeState;
|
|
68
68
|
/**
|
|
69
|
-
* Retrieve initial state for the
|
|
69
|
+
* Retrieve initial state for the DatePicker reducer
|
|
70
70
|
*/
|
|
71
|
-
export declare function retrieveInitialState(initialProps:
|
|
71
|
+
export declare function retrieveInitialState(initialProps: IDatePickerRangeProps): IDatePickerRangeState;
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import { MutableRefObject } from 'react';
|
|
8
8
|
import { DateFnsIndex } from '../../../utils/calendar-utils';
|
|
9
|
-
import {
|
|
10
|
-
export interface
|
|
11
|
-
state:
|
|
12
|
-
dispatch: React.Dispatch<
|
|
9
|
+
import { IDatePickerRangeState, DatePickerRangeAction } from './date-picker-range-reducer';
|
|
10
|
+
export interface IDatePickerRangeContext {
|
|
11
|
+
state: IDatePickerRangeState;
|
|
12
|
+
dispatch: React.Dispatch<DatePickerRangeAction>;
|
|
13
13
|
locale?: string;
|
|
14
14
|
weekStartsOn?: DateFnsIndex;
|
|
15
15
|
isCompact?: boolean;
|
|
@@ -25,9 +25,9 @@ export interface IDatepickerRangeContext {
|
|
|
25
25
|
endInputRef: MutableRefObject<HTMLInputElement | undefined>;
|
|
26
26
|
customParseDate?: (inputValue?: string) => Date;
|
|
27
27
|
}
|
|
28
|
-
export declare const
|
|
28
|
+
export declare const DatePickerRangeContext: import("react").Context<IDatePickerRangeContext | undefined>;
|
|
29
29
|
/**
|
|
30
30
|
* Retrieve Dropdown component context
|
|
31
31
|
*/
|
|
32
|
-
declare const
|
|
33
|
-
export default
|
|
32
|
+
declare const useDatePickerContext: () => IDatePickerRangeContext;
|
|
33
|
+
export default useDatePickerContext;
|
package/dist/typings/index.d.ts
CHANGED
|
@@ -4,8 +4,6 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
export {
|
|
8
|
-
export {
|
|
9
|
-
export type {
|
|
10
|
-
/** @deprecated type can be dereferenced via IDatePickerProps['placement'] */
|
|
11
|
-
GardenPlacement as GARDEN_PLACEMENT } from './types';
|
|
7
|
+
export { DatePicker } from './elements/DatePicker/DatePicker';
|
|
8
|
+
export { DatePickerRange } from './elements/DatePickerRange/DatePickerRange';
|
|
9
|
+
export type { IDatePickerProps, IDatePickerRangeProps } from './types';
|
|
@@ -5,10 +5,10 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import { DefaultTheme } from 'styled-components';
|
|
8
|
-
interface
|
|
8
|
+
interface IStyledDatePickerProps {
|
|
9
9
|
isCompact: boolean;
|
|
10
10
|
}
|
|
11
|
-
export declare const
|
|
11
|
+
export declare const StyledDatePicker: import("styled-components").StyledComponent<"div", DefaultTheme, {
|
|
12
12
|
'data-garden-id': string;
|
|
13
|
-
} &
|
|
13
|
+
} & IStyledDatePickerProps, "data-garden-id">;
|
|
14
14
|
export {};
|
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import {
|
|
7
|
+
import { Placement } from '@floating-ui/react-dom';
|
|
8
8
|
interface IStyledMenuWrapperProps {
|
|
9
9
|
isHidden?: boolean;
|
|
10
10
|
isAnimated?: boolean;
|
|
11
11
|
zIndex?: number;
|
|
12
|
-
placement
|
|
12
|
+
placement: Placement;
|
|
13
13
|
}
|
|
14
14
|
export declare const StyledMenuWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IStyledMenuWrapperProps, never>;
|
|
15
15
|
export {};
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
export { StyledMenu } from './StyledMenu';
|
|
8
8
|
export { StyledMenuWrapper } from './StyledMenuWrapper';
|
|
9
|
-
export {
|
|
9
|
+
export { StyledDatePicker } from './StyledDatePicker';
|
|
10
10
|
export { StyledRangeCalendar } from './StyledRangeCalendar';
|
|
11
11
|
export { StyledHeader } from './StyledHeader';
|
|
12
12
|
export { StyledHeaderPaddle } from './StyledHeaderPaddle';
|
|
@@ -4,14 +4,11 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import { HTMLAttributes } from 'react';
|
|
8
|
-
import { Modifiers } from 'popper.js';
|
|
7
|
+
import { HTMLAttributes, ReactElement } from 'react';
|
|
9
8
|
export declare const WEEK_STARTS_ON: readonly [0, 1, 2, 3, 4, 5, 6];
|
|
10
9
|
export declare const PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "end", "end-top", "end-bottom", "start", "start-top", "start-bottom"];
|
|
11
|
-
export declare const POPPER_PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
|
|
12
10
|
export type GardenPlacement = (typeof PLACEMENT)[number];
|
|
13
|
-
export
|
|
14
|
-
export interface IDatepickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
11
|
+
export interface IDatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
15
12
|
/**
|
|
16
13
|
* Sets the selected date
|
|
17
14
|
*/
|
|
@@ -65,24 +62,18 @@ export interface IDatepickerProps extends Omit<HTMLAttributes<HTMLDivElement>, '
|
|
|
65
62
|
* Adjusts the position of the calendar
|
|
66
63
|
**/
|
|
67
64
|
placement?: GardenPlacement;
|
|
68
|
-
/**
|
|
69
|
-
* Passes configuration options to the [Popper instance](https://popper.js.org/docs/v2/modifiers/)
|
|
70
|
-
*/
|
|
71
|
-
popperModifiers?: Modifiers;
|
|
72
65
|
/**
|
|
73
66
|
* Animates the calendar
|
|
74
67
|
*/
|
|
75
68
|
isAnimated?: boolean;
|
|
76
|
-
/**
|
|
77
|
-
* Allows the calendar to reposition during browser resize events
|
|
78
|
-
*/
|
|
79
|
-
eventsEnabled?: boolean;
|
|
80
69
|
/**
|
|
81
70
|
* Sets the `z-index` of the calendar
|
|
82
71
|
*/
|
|
83
72
|
zIndex?: number;
|
|
73
|
+
/** @ignore ReactNode override */
|
|
74
|
+
children: ReactElement;
|
|
84
75
|
}
|
|
85
|
-
export interface
|
|
76
|
+
export interface IDatePickerRangeProps extends Pick<IDatePickerProps, 'locale' | 'weekStartsOn' | 'minValue' | 'maxValue' | 'formatDate' | 'isCompact'> {
|
|
86
77
|
/**
|
|
87
78
|
* Sets the start date
|
|
88
79
|
*/
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import {
|
|
7
|
+
import { IDatePickerProps } from '../types';
|
|
8
8
|
/**
|
|
9
9
|
* The following mappings use the Date offests:
|
|
10
10
|
* 0 - Sunday
|
|
@@ -12,7 +12,7 @@ import { IDatepickerProps } from '../types';
|
|
|
12
12
|
* 6 - Saturday
|
|
13
13
|
*/
|
|
14
14
|
/** This type matches definition required by date-fns utilities */
|
|
15
|
-
export type DateFnsIndex =
|
|
15
|
+
export type DateFnsIndex = IDatePickerProps['weekStartsOn'];
|
|
16
16
|
/**
|
|
17
17
|
* Return start day of week based on locale
|
|
18
18
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-datepickers",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.10",
|
|
4
4
|
"description": "Components relating to datepickers in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"url": "https://github.com/zendeskgarden/react-components/issues"
|
|
11
11
|
},
|
|
12
12
|
"main": "dist/index.cjs.js",
|
|
13
|
-
"module": "dist/index.
|
|
13
|
+
"module": "dist/esm/index.js",
|
|
14
14
|
"files": [
|
|
15
15
|
"dist"
|
|
16
16
|
],
|
|
@@ -21,19 +21,20 @@
|
|
|
21
21
|
"sideEffects": false,
|
|
22
22
|
"types": "dist/typings/index.d.ts",
|
|
23
23
|
"dependencies": {
|
|
24
|
+
"@floating-ui/react-dom": "^2.0.0",
|
|
24
25
|
"@zendeskgarden/container-utilities": "^2.0.0",
|
|
25
26
|
"date-fns": "^3.0.0",
|
|
26
27
|
"prop-types": "^15.5.7",
|
|
27
|
-
"react-
|
|
28
|
+
"react-merge-refs": "^2.0.0"
|
|
28
29
|
},
|
|
29
30
|
"peerDependencies": {
|
|
30
|
-
"@zendeskgarden/react-theming": "
|
|
31
|
+
"@zendeskgarden/react-theming": ">=9.0.0-next",
|
|
31
32
|
"react": ">=16.8.0",
|
|
32
33
|
"react-dom": ">=16.8.0",
|
|
33
|
-
"styled-components": "^
|
|
34
|
+
"styled-components": "^5.3.1"
|
|
34
35
|
},
|
|
35
36
|
"devDependencies": {
|
|
36
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
37
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.10",
|
|
37
38
|
"@zendeskgarden/svg-icons": "7.0.0"
|
|
38
39
|
},
|
|
39
40
|
"keywords": [
|
|
@@ -46,5 +47,5 @@
|
|
|
46
47
|
"access": "public"
|
|
47
48
|
},
|
|
48
49
|
"zendeskgarden:src": "src/index.ts",
|
|
49
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "818e6100aa6676af7e972198b82516d330307d60"
|
|
50
51
|
}
|