@atlaskit/calendar 12.4.2 → 12.4.4
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/CHANGELOG.md +12 -0
- package/codemods/utils.tsx +64 -66
- package/dist/cjs/calendar.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/calendar.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/calendar.js +1 -1
- package/dist/esm/version.json +1 -1
- package/package.json +4 -12
- package/report.api.md +85 -181
- package/dist/types-ts4.0/calendar.d.ts +0 -13
- package/dist/types-ts4.0/entry-points/types.d.ts +0 -1
- package/dist/types-ts4.0/index.d.ts +0 -2
- package/dist/types-ts4.0/internal/components/date.d.ts +0 -19
- package/dist/types-ts4.0/internal/components/heading.d.ts +0 -14
- package/dist/types-ts4.0/internal/components/week-days.d.ts +0 -11
- package/dist/types-ts4.0/internal/components/week-header.d.ts +0 -8
- package/dist/types-ts4.0/internal/constants.d.ts +0 -5
- package/dist/types-ts4.0/internal/hooks/use-calendar-ref.d.ts +0 -5
- package/dist/types-ts4.0/internal/hooks/use-controlled-date-state.d.ts +0 -37
- package/dist/types-ts4.0/internal/hooks/use-focusing.d.ts +0 -8
- package/dist/types-ts4.0/internal/hooks/use-get-weeks.d.ts +0 -15
- package/dist/types-ts4.0/internal/hooks/use-handle-date-change.d.ts +0 -21
- package/dist/types-ts4.0/internal/hooks/use-handle-date-select.d.ts +0 -30
- package/dist/types-ts4.0/internal/hooks/use-locale.d.ts +0 -8
- package/dist/types-ts4.0/internal/hooks/use-unique-id.d.ts +0 -1
- package/dist/types-ts4.0/internal/styles/date.d.ts +0 -3
- package/dist/types-ts4.0/internal/types.d.ts +0 -26
- package/dist/types-ts4.0/internal/utils/date-to-string.d.ts +0 -6
- package/dist/types-ts4.0/internal/utils/get-base-calendar.d.ts +0 -10
- package/dist/types-ts4.0/internal/utils/get-days-in-month.d.ts +0 -1
- package/dist/types-ts4.0/internal/utils/pad.d.ts +0 -1
- package/dist/types-ts4.0/types.d.ts +0 -159
package/CHANGELOG.md
CHANGED
package/codemods/utils.tsx
CHANGED
|
@@ -141,77 +141,75 @@ export function addCommentBefore({
|
|
|
141
141
|
});
|
|
142
142
|
}
|
|
143
143
|
|
|
144
|
-
export const createRemoveFuncFor =
|
|
145
|
-
component: string,
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
return;
|
|
153
|
-
}
|
|
144
|
+
export const createRemoveFuncFor =
|
|
145
|
+
(component: string, prop: string, comment?: string) =>
|
|
146
|
+
(j: core.JSCodeshift, source: Collection<Node>) => {
|
|
147
|
+
const defaultSpecifier = getDefaultSpecifier(j, source, component);
|
|
148
|
+
|
|
149
|
+
if (!defaultSpecifier) {
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
154
152
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
153
|
+
source.findJSXElements(defaultSpecifier).forEach((element) => {
|
|
154
|
+
getJSXAttributesByName(j, element, prop).forEach((attribute) => {
|
|
155
|
+
j(attribute).remove();
|
|
156
|
+
if (comment) {
|
|
157
|
+
addCommentToStartOfFile({ j, base: source, message: comment });
|
|
158
|
+
}
|
|
159
|
+
});
|
|
161
160
|
});
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
j.jsxExpressionContainer(
|
|
192
|
-
property.value as ObjectExpression,
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
export const flattenCertainChildPropsAsProp =
|
|
164
|
+
(component: string, propName: string, childProps: string[]) =>
|
|
165
|
+
(j: core.JSCodeshift, source: Collection<Node>) => {
|
|
166
|
+
const defaultSpecifier = getDefaultSpecifier(j, source, component);
|
|
167
|
+
if (!defaultSpecifier) {
|
|
168
|
+
return;
|
|
169
|
+
}
|
|
170
|
+
source.findJSXElements(defaultSpecifier).forEach((element) => {
|
|
171
|
+
getJSXAttributesByName(j, element, propName).forEach((attribute) => {
|
|
172
|
+
j(attribute)
|
|
173
|
+
.find(j.JSXExpressionContainer)
|
|
174
|
+
.find(j.ObjectExpression)
|
|
175
|
+
.forEach((objectExpression) => {
|
|
176
|
+
objectExpression.node.properties.forEach((property) => {
|
|
177
|
+
childProps.forEach((childProp) => {
|
|
178
|
+
if (
|
|
179
|
+
property.type === 'ObjectProperty' &&
|
|
180
|
+
property.key.type === 'Identifier' &&
|
|
181
|
+
property.key.name === childProp &&
|
|
182
|
+
element.node.openingElement.attributes
|
|
183
|
+
) {
|
|
184
|
+
element.node.openingElement.attributes.push(
|
|
185
|
+
j.jsxAttribute(
|
|
186
|
+
j.jsxIdentifier(childProp),
|
|
187
|
+
j.jsxExpressionContainer(
|
|
188
|
+
property.value as ObjectExpression,
|
|
189
|
+
),
|
|
193
190
|
),
|
|
194
|
-
)
|
|
195
|
-
|
|
196
|
-
}
|
|
191
|
+
);
|
|
192
|
+
}
|
|
193
|
+
});
|
|
197
194
|
});
|
|
198
195
|
});
|
|
199
|
-
|
|
196
|
+
});
|
|
200
197
|
});
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
) =>
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
198
|
+
};
|
|
199
|
+
|
|
200
|
+
export const createTransformer =
|
|
201
|
+
(
|
|
202
|
+
component: string,
|
|
203
|
+
migrates: { (j: core.JSCodeshift, source: Collection<Node>): void }[],
|
|
204
|
+
) =>
|
|
205
|
+
(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
|
|
206
|
+
const source: Collection<Node> = j(fileInfo.source);
|
|
207
|
+
|
|
208
|
+
if (!hasImportDeclaration(j, source, component)) {
|
|
209
|
+
return fileInfo.source;
|
|
210
|
+
}
|
|
213
211
|
|
|
214
|
-
|
|
212
|
+
migrates.forEach((tf) => tf(j, source));
|
|
215
213
|
|
|
216
|
-
|
|
217
|
-
};
|
|
214
|
+
return source.toSource(options.printOptions || { quote: 'single' });
|
|
215
|
+
};
|
package/dist/cjs/calendar.js
CHANGED
|
@@ -86,7 +86,7 @@ var gridsContainerStyles = (0, _react2.css)({
|
|
|
86
86
|
var analyticsAttributes = {
|
|
87
87
|
componentName: 'calendar',
|
|
88
88
|
packageName: "@atlaskit/calendar",
|
|
89
|
-
packageVersion: "12.4.
|
|
89
|
+
packageVersion: "12.4.4"
|
|
90
90
|
};
|
|
91
91
|
var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
|
|
92
92
|
var day = _ref.day,
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/calendar.js
CHANGED
|
@@ -51,7 +51,7 @@ const gridsContainerStyles = css({
|
|
|
51
51
|
const analyticsAttributes = {
|
|
52
52
|
componentName: 'calendar',
|
|
53
53
|
packageName: "@atlaskit/calendar",
|
|
54
|
-
packageVersion: "12.4.
|
|
54
|
+
packageVersion: "12.4.4"
|
|
55
55
|
};
|
|
56
56
|
const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
|
|
57
57
|
day,
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/calendar.js
CHANGED
|
@@ -57,7 +57,7 @@ var gridsContainerStyles = css({
|
|
|
57
57
|
var analyticsAttributes = {
|
|
58
58
|
componentName: 'calendar',
|
|
59
59
|
packageName: "@atlaskit/calendar",
|
|
60
|
-
packageVersion: "12.4.
|
|
60
|
+
packageVersion: "12.4.4"
|
|
61
61
|
};
|
|
62
62
|
var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
|
|
63
63
|
var day = _ref.day,
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/calendar",
|
|
3
|
-
"version": "12.4.
|
|
3
|
+
"version": "12.4.4",
|
|
4
4
|
"description": "An interactive calendar for date selection experiences.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -12,14 +12,6 @@
|
|
|
12
12
|
"module": "dist/esm/index.js",
|
|
13
13
|
"module:es2019": "dist/es2019/index.js",
|
|
14
14
|
"types": "dist/types/index.d.ts",
|
|
15
|
-
"typesVersions": {
|
|
16
|
-
">=4.0 <4.5": {
|
|
17
|
-
"*": [
|
|
18
|
-
"dist/types-ts4.0/*",
|
|
19
|
-
"dist/types-ts4.0/index.d.ts"
|
|
20
|
-
]
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
15
|
"sideEffects": false,
|
|
24
16
|
"atlaskit:src": "src/index.tsx",
|
|
25
17
|
"atlassian": {
|
|
@@ -33,12 +25,12 @@
|
|
|
33
25
|
},
|
|
34
26
|
"dependencies": {
|
|
35
27
|
"@atlaskit/analytics-next": "^8.2.0",
|
|
36
|
-
"@atlaskit/button": "^16.
|
|
28
|
+
"@atlaskit/button": "^16.5.0",
|
|
37
29
|
"@atlaskit/ds-lib": "^2.1.0",
|
|
38
30
|
"@atlaskit/icon": "^21.11.0",
|
|
39
31
|
"@atlaskit/locale": "^2.3.0",
|
|
40
32
|
"@atlaskit/theme": "^12.2.0",
|
|
41
|
-
"@atlaskit/tokens": "^0.
|
|
33
|
+
"@atlaskit/tokens": "^0.12.0",
|
|
42
34
|
"@atlaskit/visually-hidden": "^1.1.0",
|
|
43
35
|
"@babel/runtime": "^7.0.0",
|
|
44
36
|
"@emotion/react": "^11.7.1",
|
|
@@ -50,7 +42,7 @@
|
|
|
50
42
|
},
|
|
51
43
|
"devDependencies": {
|
|
52
44
|
"@atlaskit/docs": "*",
|
|
53
|
-
"@atlaskit/select": "^
|
|
45
|
+
"@atlaskit/select": "^16.0.0",
|
|
54
46
|
"@atlaskit/ssr": "*",
|
|
55
47
|
"@atlaskit/visual-regression": "*",
|
|
56
48
|
"@atlaskit/webdriver-runner": "*",
|
package/report.api.md
CHANGED
|
@@ -1,8 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
<!-- API Report Version: 2.2 -->
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## API Report File for "@atlaskit/calendar"
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
|
|
6
|
+
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
7
|
+
|
|
8
|
+
### Table of contents
|
|
9
|
+
|
|
10
|
+
- [Main Entry Types](#main-entry-types)
|
|
11
|
+
|
|
12
|
+
### Main Entry Types
|
|
13
|
+
|
|
14
|
+
<!--SECTION START: Main Entry Types-->
|
|
6
15
|
|
|
7
16
|
```ts
|
|
8
17
|
/// <reference types="react" />
|
|
@@ -15,223 +24,118 @@ import { ThemeModes } from '@atlaskit/theme/types';
|
|
|
15
24
|
import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
16
25
|
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
17
26
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
| 'calendarRef'
|
|
62
|
-
| 'createAnalyticsEvent'
|
|
63
|
-
> &
|
|
64
|
-
RefAttributes<HTMLDivElement>
|
|
65
|
-
>>;
|
|
27
|
+
// @public (undocumented)
|
|
28
|
+
type ArrowKeys = 'down' | 'left' | 'right' | 'up';
|
|
29
|
+
|
|
30
|
+
// @public
|
|
31
|
+
const Calendar: MemoExoticComponent<
|
|
32
|
+
ForwardRefExoticComponent<
|
|
33
|
+
Pick<
|
|
34
|
+
CalendarProps,
|
|
35
|
+
| 'analyticsContext'
|
|
36
|
+
| 'calendarRef'
|
|
37
|
+
| 'className'
|
|
38
|
+
| 'createAnalyticsEvent'
|
|
39
|
+
| 'day'
|
|
40
|
+
| 'defaultDay'
|
|
41
|
+
| 'defaultMonth'
|
|
42
|
+
| 'defaultPreviouslySelected'
|
|
43
|
+
| 'defaultSelected'
|
|
44
|
+
| 'defaultYear'
|
|
45
|
+
| 'disabled'
|
|
46
|
+
| 'disabledDateFilter'
|
|
47
|
+
| 'locale'
|
|
48
|
+
| 'maxDate'
|
|
49
|
+
| 'minDate'
|
|
50
|
+
| 'mode'
|
|
51
|
+
| 'month'
|
|
52
|
+
| 'nextMonthLabel'
|
|
53
|
+
| 'onBlur'
|
|
54
|
+
| 'onChange'
|
|
55
|
+
| 'onFocus'
|
|
56
|
+
| 'onSelect'
|
|
57
|
+
| 'previousMonthLabel'
|
|
58
|
+
| 'previouslySelected'
|
|
59
|
+
| 'selected'
|
|
60
|
+
| 'style'
|
|
61
|
+
| 'tabIndex'
|
|
62
|
+
| 'testId'
|
|
63
|
+
| 'today'
|
|
64
|
+
| 'weekStartDay'
|
|
65
|
+
| 'year'
|
|
66
|
+
> &
|
|
67
|
+
RefAttributes<HTMLDivElement>
|
|
68
|
+
>
|
|
69
|
+
>;
|
|
66
70
|
export default Calendar;
|
|
67
71
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
+
// @public (undocumented)
|
|
73
|
+
export interface CalendarProps extends WithAnalyticsEventsProps {
|
|
74
|
+
analyticsContext?: Record<string, any>;
|
|
75
|
+
// @internal
|
|
76
|
+
calendarRef?: React.Ref<CalendarRef>;
|
|
77
|
+
className?: string;
|
|
72
78
|
day?: number;
|
|
73
|
-
/**
|
|
74
|
-
* Default for `day`.
|
|
75
|
-
*/
|
|
76
79
|
defaultDay?: number;
|
|
77
|
-
/**
|
|
78
|
-
* Default for `month`.
|
|
79
|
-
*/
|
|
80
80
|
defaultMonth?: number;
|
|
81
|
-
/**
|
|
82
|
-
* Default for `previouslySelected`.
|
|
83
|
-
*/
|
|
84
81
|
defaultPreviouslySelected?: Array<string>;
|
|
85
|
-
/**
|
|
86
|
-
* Default for `selected`.
|
|
87
|
-
*/
|
|
88
82
|
defaultSelected?: Array<string>;
|
|
89
|
-
/**
|
|
90
|
-
* Default for `year`.
|
|
91
|
-
*/
|
|
92
83
|
defaultYear?: number;
|
|
93
|
-
/**
|
|
94
|
-
* Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates provided are greyed out.
|
|
95
|
-
* This does not prevent these dates being selected.
|
|
96
|
-
*/
|
|
97
84
|
disabled?: Array<string>;
|
|
98
|
-
/**
|
|
99
|
-
* A filter function that takes a date string in the format 'YYYY-MM-DD' and returns true if that date should be disabled.
|
|
100
|
-
*/
|
|
101
85
|
disabledDateFilter?: (date: string) => boolean;
|
|
102
|
-
|
|
103
|
-
* The latest enabled date
|
|
104
|
-
*/
|
|
86
|
+
locale?: string;
|
|
105
87
|
maxDate?: string;
|
|
106
|
-
/**
|
|
107
|
-
* The earliest enabled date
|
|
108
|
-
*/
|
|
109
88
|
minDate?: string;
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
*/
|
|
89
|
+
// @internal
|
|
90
|
+
mode?: ThemeModes;
|
|
113
91
|
month?: number;
|
|
114
|
-
/**
|
|
115
|
-
* The aria-label attribute associated with the next-month arrow.
|
|
116
|
-
*/
|
|
117
92
|
nextMonthLabel?: string;
|
|
118
|
-
/**
|
|
119
|
-
* Function which is called when the calendar is no longer focused.
|
|
120
|
-
*/
|
|
121
93
|
onBlur?: React.FocusEventHandler;
|
|
122
|
-
/**
|
|
123
|
-
* Called when the calendar is navigated. This can be triggered by the keyboard, or by clicking the navigational buttons.
|
|
124
|
-
* The 'interface' property indicates the the direction the calendar was navigated whereas the 'iso' property is a string of the format YYYY-MM-DD.
|
|
125
|
-
*/
|
|
126
94
|
onChange?: (event: ChangeEvent, analyticsEvent: UIAnalyticsEvent) => void;
|
|
127
|
-
/**
|
|
128
|
-
* Called when the calendar receives focus. This could be from a mouse event on the container by tabbing into it.
|
|
129
|
-
*/
|
|
130
95
|
onFocus?: React.FocusEventHandler;
|
|
131
|
-
/**
|
|
132
|
-
* Function called when a day is clicked on. Calls with an object that has
|
|
133
|
-
* a day, month and year property as numbers, representing the date just clicked.
|
|
134
|
-
* It also has an 'iso' property, which is a string of the selected date in the
|
|
135
|
-
* format YYYY-MM-DD.
|
|
136
|
-
*/
|
|
137
96
|
onSelect?: (event: SelectEvent, analyticsEvent: UIAnalyticsEvent) => void;
|
|
138
|
-
/**
|
|
139
|
-
* Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
|
|
140
|
-
* provided are given a background color.
|
|
141
|
-
*/
|
|
142
97
|
previouslySelected?: Array<string>;
|
|
143
|
-
/**
|
|
144
|
-
* The aria-label attribute associated with the previous-month arrow.
|
|
145
|
-
*/
|
|
146
98
|
previousMonthLabel?: string;
|
|
147
|
-
/**
|
|
148
|
-
* Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
|
|
149
|
-
* provided are given a background color.
|
|
150
|
-
*/
|
|
151
99
|
selected?: Array<string>;
|
|
152
|
-
/**
|
|
153
|
-
* Value of current day, as a string in the format 'YYYY-MM-DD'.
|
|
154
|
-
*/
|
|
155
|
-
today?: string;
|
|
156
|
-
/**
|
|
157
|
-
* Year to display the calendar for.
|
|
158
|
-
*/
|
|
159
|
-
year?: number;
|
|
160
|
-
/**
|
|
161
|
-
* BCP 47 language tag (e.g. ja-JP) that ensures dates are in the official format for the locale.
|
|
162
|
-
*/
|
|
163
|
-
locale?: string;
|
|
164
|
-
/**
|
|
165
|
-
* Additional information to be included in the `context` of analytics events.
|
|
166
|
-
*/
|
|
167
|
-
analyticsContext?: Record<string, any>;
|
|
168
|
-
/**
|
|
169
|
-
* Start day of the week for the calendar.
|
|
170
|
-
* - `0` sunday (default value)
|
|
171
|
-
* - `1` monday
|
|
172
|
-
* - `2` tuesday
|
|
173
|
-
* - `3` wednesday
|
|
174
|
-
* - `4` thursday
|
|
175
|
-
* - `5` friday
|
|
176
|
-
* - `6` saturday
|
|
177
|
-
*/
|
|
178
|
-
weekStartDay?: WeekDay;
|
|
179
|
-
/**
|
|
180
|
-
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
181
|
-
*
|
|
182
|
-
* testId--container - Outermost container containing everything inside calendar
|
|
183
|
-
* testId--month - Container containing all available days for the month
|
|
184
|
-
* testId--previous-month - Button to show next month
|
|
185
|
-
* testId--next-month - Button to show previous month
|
|
186
|
-
* testId--current-month-year - Text containing the current month and year
|
|
187
|
-
* testId--selected-day - The currently selected day (may be missing if a date isn’t selected)
|
|
188
|
-
*/
|
|
189
|
-
testId?: string;
|
|
190
|
-
/**
|
|
191
|
-
* Class name to apply to the calendar
|
|
192
|
-
*/
|
|
193
|
-
className?: string;
|
|
194
|
-
/**
|
|
195
|
-
* Style customization to apply to the calendar
|
|
196
|
-
*/
|
|
197
100
|
style?: CSSProperties;
|
|
198
|
-
/**
|
|
199
|
-
* @internal An additional ref which exposes Calendar's internal api's. We kept this for
|
|
200
|
-
* backward compatibility. PLEASE DO NOT USE THIS.
|
|
201
|
-
*/
|
|
202
|
-
calendarRef?: React.Ref<CalendarRef>;
|
|
203
|
-
/**
|
|
204
|
-
* @internal Legacy theme mode, can be either 'light' or 'dark'
|
|
205
|
-
*/
|
|
206
|
-
mode?: ThemeModes;
|
|
207
|
-
/**
|
|
208
|
-
* Tab index indicates if the calendar can be focused by keyboard or only programmatically.
|
|
209
|
-
*/
|
|
210
101
|
tabIndex?: number;
|
|
102
|
+
testId?: string;
|
|
103
|
+
today?: string;
|
|
104
|
+
weekStartDay?: WeekDay;
|
|
105
|
+
year?: number;
|
|
211
106
|
}
|
|
212
107
|
|
|
213
|
-
|
|
108
|
+
// @public (undocumented)
|
|
109
|
+
export interface CalendarRef {
|
|
110
|
+
// (undocumented)
|
|
214
111
|
navigate: (type: ArrowKeys) => void;
|
|
215
112
|
}
|
|
216
113
|
|
|
217
|
-
|
|
114
|
+
// @public (undocumented)
|
|
115
|
+
export type ChangeEvent = {
|
|
218
116
|
iso: ISODate;
|
|
219
|
-
type: '
|
|
117
|
+
type: 'down' | 'left' | 'next' | 'prev' | 'right' | 'up';
|
|
220
118
|
} & DateObj;
|
|
221
119
|
|
|
222
|
-
|
|
120
|
+
// @public (undocumented)
|
|
121
|
+
type DateObj = {
|
|
223
122
|
day: number;
|
|
224
123
|
month: number;
|
|
225
124
|
year: number;
|
|
226
125
|
};
|
|
227
126
|
|
|
228
|
-
|
|
127
|
+
// @public (undocumented)
|
|
128
|
+
type ISODate = string;
|
|
229
129
|
|
|
230
|
-
|
|
130
|
+
// @public (undocumented)
|
|
131
|
+
export type SelectEvent = {
|
|
231
132
|
iso: ISODate;
|
|
232
133
|
} & DateObj;
|
|
233
134
|
|
|
234
|
-
|
|
135
|
+
// @public (undocumented)
|
|
136
|
+
type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
235
137
|
|
|
236
|
-
|
|
138
|
+
// (No @packageDocumentation comment for this package)
|
|
237
139
|
```
|
|
140
|
+
|
|
141
|
+
<!--SECTION END: Main Entry Types-->
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { CalendarProps } from './types';
|
|
3
|
-
/**
|
|
4
|
-
* __Calendar__
|
|
5
|
-
*
|
|
6
|
-
* A calendar is used for date selection.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/calendar/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/calendar/code)
|
|
10
|
-
* - [Usage](https://atlassian.design/components/calendar/usage)
|
|
11
|
-
*/
|
|
12
|
-
declare const Calendar: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "year" | "previousMonthLabel" | "nextMonthLabel" | "mode" | "testId" | "style" | "className" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | "onSelect" | "disabled" | "selected" | "analyticsContext" | "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabledDateFilter" | "maxDate" | "minDate" | "month" | "previouslySelected" | "today" | "locale" | "weekStartDay" | "calendarRef" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
13
|
-
export default Calendar;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type { CalendarProps, ChangeEvent, SelectEvent, CalendarRef, WeekDay, } from '../types';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ThemeModes } from '@atlaskit/theme/types';
|
|
3
|
-
import type { DateObj } from '../types';
|
|
4
|
-
interface DateProps {
|
|
5
|
-
children: number;
|
|
6
|
-
isDisabled?: boolean;
|
|
7
|
-
isFocused?: boolean;
|
|
8
|
-
isToday?: boolean;
|
|
9
|
-
month: number;
|
|
10
|
-
onClick?: ({ day, month, year }: DateObj) => void;
|
|
11
|
-
isPreviouslySelected?: boolean;
|
|
12
|
-
isSelected?: boolean;
|
|
13
|
-
isSibling?: boolean;
|
|
14
|
-
year: number;
|
|
15
|
-
mode?: ThemeModes;
|
|
16
|
-
testId?: string;
|
|
17
|
-
}
|
|
18
|
-
declare const Date: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<DateProps & import("react").RefAttributes<HTMLButtonElement>>>;
|
|
19
|
-
export default Date;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ThemeModes } from '@atlaskit/theme/types';
|
|
3
|
-
interface HeadingProps {
|
|
4
|
-
monthLongTitle: string;
|
|
5
|
-
year: number;
|
|
6
|
-
previousMonthLabel?: string;
|
|
7
|
-
nextMonthLabel?: string;
|
|
8
|
-
handleClickNext?: () => void;
|
|
9
|
-
handleClickPrev?: () => void;
|
|
10
|
-
mode?: ThemeModes;
|
|
11
|
-
testId?: string;
|
|
12
|
-
}
|
|
13
|
-
declare const Heading: import("react").NamedExoticComponent<HeadingProps>;
|
|
14
|
-
export default Heading;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { ThemeModes } from '@atlaskit/theme/types';
|
|
3
|
-
import { DateObj, Week } from '../types';
|
|
4
|
-
interface WeekDaysProps {
|
|
5
|
-
weeks: Week[];
|
|
6
|
-
handleClickDay: (date: DateObj) => void;
|
|
7
|
-
mode?: ThemeModes;
|
|
8
|
-
testId?: string;
|
|
9
|
-
}
|
|
10
|
-
declare const WeekDays: import("react").NamedExoticComponent<WeekDaysProps>;
|
|
11
|
-
export default WeekDays;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { ThemeModes } from '@atlaskit/theme/types';
|
|
3
|
-
interface WeekHeaderProps {
|
|
4
|
-
daysShort: string[];
|
|
5
|
-
mode?: ThemeModes;
|
|
6
|
-
}
|
|
7
|
-
declare const WeekHeader: import("react").NamedExoticComponent<WeekHeaderProps>;
|
|
8
|
-
export default WeekHeader;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
export default function useControlledDateState({ day, defaultDay, month, defaultMonth, year, defaultYear, today, selected, defaultSelected, previouslySelected, defaultPreviouslySelected, }: {
|
|
2
|
-
day?: number;
|
|
3
|
-
defaultDay: number;
|
|
4
|
-
month?: number;
|
|
5
|
-
defaultMonth: number;
|
|
6
|
-
year?: number;
|
|
7
|
-
defaultYear: number;
|
|
8
|
-
today?: string;
|
|
9
|
-
selected?: Array<string>;
|
|
10
|
-
defaultSelected: Array<string>;
|
|
11
|
-
previouslySelected?: Array<string>;
|
|
12
|
-
defaultPreviouslySelected: Array<string>;
|
|
13
|
-
}): {
|
|
14
|
-
readonly day: readonly [
|
|
15
|
-
number,
|
|
16
|
-
(newValue: number) => void
|
|
17
|
-
];
|
|
18
|
-
readonly month: readonly [
|
|
19
|
-
number,
|
|
20
|
-
(newValue: number) => void
|
|
21
|
-
];
|
|
22
|
-
readonly year: readonly [
|
|
23
|
-
number,
|
|
24
|
-
(newValue: number) => void
|
|
25
|
-
];
|
|
26
|
-
readonly today: readonly [
|
|
27
|
-
string
|
|
28
|
-
];
|
|
29
|
-
readonly selected: readonly [
|
|
30
|
-
string[],
|
|
31
|
-
(newValue: string[]) => void
|
|
32
|
-
];
|
|
33
|
-
readonly previous: readonly [
|
|
34
|
-
string[],
|
|
35
|
-
(newValue: string[]) => void
|
|
36
|
-
];
|
|
37
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export default function useFocusing({ onBlur, onFocus, }: {
|
|
3
|
-
onBlur: React.FocusEventHandler;
|
|
4
|
-
onFocus: React.FocusEventHandler;
|
|
5
|
-
}): {
|
|
6
|
-
handleContainerBlur: (event: React.FocusEvent) => void;
|
|
7
|
-
handleContainerFocus: (event: React.FocusEvent) => void;
|
|
8
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { WeekDay } from '../../types';
|
|
2
|
-
import type { Week } from '../types';
|
|
3
|
-
export default function useGetWeeks({ day, month, year, today, disabled, disabledDateFilter, minDate: minDateString, maxDate: maxDateString, selected, previouslySelected, weekStartDay, }: {
|
|
4
|
-
day: number;
|
|
5
|
-
month: number;
|
|
6
|
-
year: number;
|
|
7
|
-
today: string;
|
|
8
|
-
disabled?: string[];
|
|
9
|
-
disabledDateFilter?: (date: string) => boolean;
|
|
10
|
-
minDate?: string;
|
|
11
|
-
maxDate?: string;
|
|
12
|
-
selected: string[];
|
|
13
|
-
previouslySelected: string[];
|
|
14
|
-
weekStartDay: WeekDay;
|
|
15
|
-
}): Week[];
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type { ChangeEvent } from '../../types';
|
|
2
|
-
import type { ArrowKeys } from '../types';
|
|
3
|
-
export default function useHandleDateChange({ day: [dayValue, setDayValue], month: [monthValue, setMonthValue], year: [yearValue, setYearValue], onChange, }: {
|
|
4
|
-
day: readonly [
|
|
5
|
-
number,
|
|
6
|
-
(newValue: number) => void
|
|
7
|
-
];
|
|
8
|
-
month: readonly [
|
|
9
|
-
number,
|
|
10
|
-
(newValue: number) => void
|
|
11
|
-
];
|
|
12
|
-
year: readonly [
|
|
13
|
-
number,
|
|
14
|
-
(newValue: number) => void
|
|
15
|
-
];
|
|
16
|
-
onChange: (event: ChangeEvent) => void;
|
|
17
|
-
}): {
|
|
18
|
-
navigate: (type: ArrowKeys) => void;
|
|
19
|
-
handleClickNext: () => void;
|
|
20
|
-
handleClickPrev: () => void;
|
|
21
|
-
};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { SelectEvent } from '../../types';
|
|
3
|
-
import type { ArrowKeys, DateObj } from '../types';
|
|
4
|
-
export default function useHandleDateSelect({ day: [dayValue], month: [monthValue], year: [yearValue], selected: [selectedValue, setSelectedValue], previous: [, setPreviouslySelectedValue], onSelect, navigate, }: {
|
|
5
|
-
day: readonly [
|
|
6
|
-
number,
|
|
7
|
-
(newValue: number) => void
|
|
8
|
-
];
|
|
9
|
-
month: readonly [
|
|
10
|
-
number,
|
|
11
|
-
(newValue: number) => void
|
|
12
|
-
];
|
|
13
|
-
year: readonly [
|
|
14
|
-
number,
|
|
15
|
-
(newValue: number) => void
|
|
16
|
-
];
|
|
17
|
-
selected: [
|
|
18
|
-
string[],
|
|
19
|
-
(newValue: string[]) => void
|
|
20
|
-
];
|
|
21
|
-
previous: [
|
|
22
|
-
unknown,
|
|
23
|
-
(newValue: string[]) => void
|
|
24
|
-
];
|
|
25
|
-
onSelect: (event: SelectEvent) => void;
|
|
26
|
-
navigate: (type: ArrowKeys) => void;
|
|
27
|
-
}): {
|
|
28
|
-
handleClickDay: ({ year, month, day }: DateObj) => void;
|
|
29
|
-
handleContainerKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
30
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function useUniqueId(prefix: string): string;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type { WeekDay } from '../types';
|
|
2
|
-
export declare type ArrowKeys = 'left' | 'up' | 'right' | 'down';
|
|
3
|
-
export declare type DateObj = {
|
|
4
|
-
day: number;
|
|
5
|
-
month: number;
|
|
6
|
-
year: number;
|
|
7
|
-
};
|
|
8
|
-
export interface WeekDayState {
|
|
9
|
-
isDisabled: boolean;
|
|
10
|
-
isFocused: boolean;
|
|
11
|
-
isToday: boolean;
|
|
12
|
-
isPreviouslySelected: boolean;
|
|
13
|
-
isSelected: boolean;
|
|
14
|
-
isSiblingMonth: boolean;
|
|
15
|
-
}
|
|
16
|
-
export interface Week {
|
|
17
|
-
id: string;
|
|
18
|
-
values: Array<{
|
|
19
|
-
id: string;
|
|
20
|
-
} & DateObj & WeekDayState>;
|
|
21
|
-
}
|
|
22
|
-
export interface CalendarDate extends DateObj {
|
|
23
|
-
weekDay?: WeekDay;
|
|
24
|
-
siblingMonth?: boolean;
|
|
25
|
-
}
|
|
26
|
-
export declare type ISODate = string;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Logic taken from https://github.com/WesSouza/calendar-base which is not maintained for quite sometime.
|
|
3
|
-
* This will help us fixing any issue we might get or any new functionality we might want to support.
|
|
4
|
-
* Not changing much code below. Just removed those parts which we don't need.
|
|
5
|
-
*/
|
|
6
|
-
import type { WeekDay } from '../../types';
|
|
7
|
-
import type { CalendarDate } from '../types';
|
|
8
|
-
export default function getBaseCalendar(year: number, month: number, { weekStartDay, }?: {
|
|
9
|
-
weekStartDay?: WeekDay;
|
|
10
|
-
}): CalendarDate[];
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function getDaysInMonth(year: number, month: number): number;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function pad(num: number): string;
|
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
|
-
import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
3
|
-
import { ThemeModes } from '@atlaskit/theme/types';
|
|
4
|
-
import type { ArrowKeys, DateObj, ISODate } from './internal/types';
|
|
5
|
-
export declare type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
6
|
-
export declare type ChangeEvent = {
|
|
7
|
-
iso: ISODate;
|
|
8
|
-
type: 'left' | 'up' | 'right' | 'down' | 'prev' | 'next';
|
|
9
|
-
} & DateObj;
|
|
10
|
-
export declare type SelectEvent = {
|
|
11
|
-
iso: ISODate;
|
|
12
|
-
} & DateObj;
|
|
13
|
-
export interface CalendarProps extends WithAnalyticsEventsProps {
|
|
14
|
-
/**
|
|
15
|
-
* The number of the day currently focused. Places border around the date. 0 highlights no date.
|
|
16
|
-
*/
|
|
17
|
-
day?: number;
|
|
18
|
-
/**
|
|
19
|
-
* Default for `day`.
|
|
20
|
-
*/
|
|
21
|
-
defaultDay?: number;
|
|
22
|
-
/**
|
|
23
|
-
* Default for `month`.
|
|
24
|
-
*/
|
|
25
|
-
defaultMonth?: number;
|
|
26
|
-
/**
|
|
27
|
-
* Default for `previouslySelected`.
|
|
28
|
-
*/
|
|
29
|
-
defaultPreviouslySelected?: Array<string>;
|
|
30
|
-
/**
|
|
31
|
-
* Default for `selected`.
|
|
32
|
-
*/
|
|
33
|
-
defaultSelected?: Array<string>;
|
|
34
|
-
/**
|
|
35
|
-
* Default for `year`.
|
|
36
|
-
*/
|
|
37
|
-
defaultYear?: number;
|
|
38
|
-
/**
|
|
39
|
-
* Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates provided are greyed out.
|
|
40
|
-
* This does not prevent these dates being selected.
|
|
41
|
-
*/
|
|
42
|
-
disabled?: Array<string>;
|
|
43
|
-
/**
|
|
44
|
-
* A filter function that takes a date string in the format 'YYYY-MM-DD' and returns true if that date should be disabled.
|
|
45
|
-
*/
|
|
46
|
-
disabledDateFilter?: (date: string) => boolean;
|
|
47
|
-
/**
|
|
48
|
-
* The latest enabled date
|
|
49
|
-
*/
|
|
50
|
-
maxDate?: string;
|
|
51
|
-
/**
|
|
52
|
-
* The earliest enabled date
|
|
53
|
-
*/
|
|
54
|
-
minDate?: string;
|
|
55
|
-
/**
|
|
56
|
-
* The number of the month (from 1 to 12) which the calendar should be on.
|
|
57
|
-
*/
|
|
58
|
-
month?: number;
|
|
59
|
-
/**
|
|
60
|
-
* The aria-label attribute associated with the next-month arrow.
|
|
61
|
-
*/
|
|
62
|
-
nextMonthLabel?: string;
|
|
63
|
-
/**
|
|
64
|
-
* Function which is called when the calendar is no longer focused.
|
|
65
|
-
*/
|
|
66
|
-
onBlur?: React.FocusEventHandler;
|
|
67
|
-
/**
|
|
68
|
-
* Called when the calendar is navigated. This can be triggered by the keyboard, or by clicking the navigational buttons.
|
|
69
|
-
* The 'interface' property indicates the the direction the calendar was navigated whereas the 'iso' property is a string of the format YYYY-MM-DD.
|
|
70
|
-
*/
|
|
71
|
-
onChange?: (event: ChangeEvent, analyticsEvent: UIAnalyticsEvent) => void;
|
|
72
|
-
/**
|
|
73
|
-
* Called when the calendar receives focus. This could be from a mouse event on the container by tabbing into it.
|
|
74
|
-
*/
|
|
75
|
-
onFocus?: React.FocusEventHandler;
|
|
76
|
-
/**
|
|
77
|
-
* Function called when a day is clicked on. Calls with an object that has
|
|
78
|
-
* a day, month and year property as numbers, representing the date just clicked.
|
|
79
|
-
* It also has an 'iso' property, which is a string of the selected date in the
|
|
80
|
-
* format YYYY-MM-DD.
|
|
81
|
-
*/
|
|
82
|
-
onSelect?: (event: SelectEvent, analyticsEvent: UIAnalyticsEvent) => void;
|
|
83
|
-
/**
|
|
84
|
-
* Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
|
|
85
|
-
* provided are given a background color.
|
|
86
|
-
*/
|
|
87
|
-
previouslySelected?: Array<string>;
|
|
88
|
-
/**
|
|
89
|
-
* The aria-label attribute associated with the previous-month arrow.
|
|
90
|
-
*/
|
|
91
|
-
previousMonthLabel?: string;
|
|
92
|
-
/**
|
|
93
|
-
* Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
|
|
94
|
-
* provided are given a background color.
|
|
95
|
-
*/
|
|
96
|
-
selected?: Array<string>;
|
|
97
|
-
/**
|
|
98
|
-
* Value of current day, as a string in the format 'YYYY-MM-DD'.
|
|
99
|
-
*/
|
|
100
|
-
today?: string;
|
|
101
|
-
/**
|
|
102
|
-
* Year to display the calendar for.
|
|
103
|
-
*/
|
|
104
|
-
year?: number;
|
|
105
|
-
/**
|
|
106
|
-
* BCP 47 language tag (e.g. ja-JP) that ensures dates are in the official format for the locale.
|
|
107
|
-
*/
|
|
108
|
-
locale?: string;
|
|
109
|
-
/**
|
|
110
|
-
* Additional information to be included in the `context` of analytics events.
|
|
111
|
-
*/
|
|
112
|
-
analyticsContext?: Record<string, any>;
|
|
113
|
-
/**
|
|
114
|
-
* Start day of the week for the calendar.
|
|
115
|
-
* - `0` sunday (default value)
|
|
116
|
-
* - `1` monday
|
|
117
|
-
* - `2` tuesday
|
|
118
|
-
* - `3` wednesday
|
|
119
|
-
* - `4` thursday
|
|
120
|
-
* - `5` friday
|
|
121
|
-
* - `6` saturday
|
|
122
|
-
*/
|
|
123
|
-
weekStartDay?: WeekDay;
|
|
124
|
-
/**
|
|
125
|
-
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
126
|
-
*
|
|
127
|
-
* testId--container - Outermost container containing everything inside calendar
|
|
128
|
-
* testId--month - Container containing all available days for the month
|
|
129
|
-
* testId--previous-month - Button to show next month
|
|
130
|
-
* testId--next-month - Button to show previous month
|
|
131
|
-
* testId--current-month-year - Text containing the current month and year
|
|
132
|
-
* testId--selected-day - The currently selected day (may be missing if a date isn’t selected)
|
|
133
|
-
*/
|
|
134
|
-
testId?: string;
|
|
135
|
-
/**
|
|
136
|
-
* Class name to apply to the calendar
|
|
137
|
-
*/
|
|
138
|
-
className?: string;
|
|
139
|
-
/**
|
|
140
|
-
* Style customization to apply to the calendar
|
|
141
|
-
*/
|
|
142
|
-
style?: CSSProperties;
|
|
143
|
-
/**
|
|
144
|
-
* @internal An additional ref which exposes Calendar's internal api's. We kept this for
|
|
145
|
-
* backward compatibility. PLEASE DO NOT USE THIS.
|
|
146
|
-
*/
|
|
147
|
-
calendarRef?: React.Ref<CalendarRef>;
|
|
148
|
-
/**
|
|
149
|
-
* @internal Legacy theme mode, can be either 'light' or 'dark'
|
|
150
|
-
*/
|
|
151
|
-
mode?: ThemeModes;
|
|
152
|
-
/**
|
|
153
|
-
* Tab index indicates if the calendar can be focused by keyboard or only programmatically.
|
|
154
|
-
*/
|
|
155
|
-
tabIndex?: number;
|
|
156
|
-
}
|
|
157
|
-
export interface CalendarRef {
|
|
158
|
-
navigate: (type: ArrowKeys) => void;
|
|
159
|
-
}
|