@atlaskit/calendar 12.4.1 → 12.4.3
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 +7 -4
- package/dist/cjs/internal/components/heading.js +6 -3
- package/dist/cjs/internal/components/week-header.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/calendar.js +7 -4
- package/dist/es2019/internal/components/heading.js +6 -3
- package/dist/es2019/internal/components/week-header.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/calendar.js +7 -4
- package/dist/esm/internal/components/heading.js +6 -3
- package/dist/esm/internal/components/week-header.js +1 -1
- package/dist/esm/version.json +1 -1
- package/package.json +6 -11
- package/report.api.md +75 -116
- 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
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/calendar
|
|
2
2
|
|
|
3
|
+
## 12.4.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 12.4.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
|
|
14
|
+
|
|
3
15
|
## 12.4.1
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
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
|
@@ -58,7 +58,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
58
58
|
var lightWrapperStyles = (0, _react2.css)({
|
|
59
59
|
display: 'inline-block',
|
|
60
60
|
boxSizing: 'border-box',
|
|
61
|
-
|
|
61
|
+
// TODO Delete this comment after verifying spacing token -> previous value `16`
|
|
62
|
+
padding: "var(--ds-scale-200, 16px)",
|
|
62
63
|
backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.N0, ")"),
|
|
63
64
|
color: "var(--ds-text, ".concat(_colors.N900, ")"),
|
|
64
65
|
outline: 'none',
|
|
@@ -67,7 +68,8 @@ var lightWrapperStyles = (0, _react2.css)({
|
|
|
67
68
|
var darkWrapperStyles = (0, _react2.css)({
|
|
68
69
|
display: 'inline-block',
|
|
69
70
|
boxSizing: 'border-box',
|
|
70
|
-
|
|
71
|
+
// TODO Delete this comment after verifying spacing token -> previous value `16`
|
|
72
|
+
padding: "var(--ds-scale-200, 16px)",
|
|
71
73
|
backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.N700, ")"),
|
|
72
74
|
color: "var(--ds-text, ".concat(_colors.DN600, ")"),
|
|
73
75
|
outline: 'none',
|
|
@@ -76,14 +78,15 @@ var darkWrapperStyles = (0, _react2.css)({
|
|
|
76
78
|
var gridsContainerStyles = (0, _react2.css)({
|
|
77
79
|
display: 'inline-block',
|
|
78
80
|
width: 289,
|
|
79
|
-
|
|
81
|
+
// TODO Delete this comment after verifying spacing token -> previous value `0`
|
|
82
|
+
margin: "var(--ds-scale-0, 0px)",
|
|
80
83
|
marginBottom: 5,
|
|
81
84
|
textAlign: 'center'
|
|
82
85
|
});
|
|
83
86
|
var analyticsAttributes = {
|
|
84
87
|
componentName: 'calendar',
|
|
85
88
|
packageName: "@atlaskit/calendar",
|
|
86
|
-
packageVersion: "12.4.
|
|
89
|
+
packageVersion: "12.4.3"
|
|
87
90
|
};
|
|
88
91
|
var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
|
|
89
92
|
var day = _ref.day,
|
|
@@ -26,7 +26,8 @@ var headingColor = {
|
|
|
26
26
|
};
|
|
27
27
|
var headingStyles = (0, _react2.css)({
|
|
28
28
|
display: 'flex',
|
|
29
|
-
|
|
29
|
+
// TODO Delete this comment after verifying spacing tokens
|
|
30
|
+
padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-0, 0px)", " 13px ", "var(--ds-scale-0, 0px)"),
|
|
30
31
|
color: "var(--ds-text, ".concat(_colors.N800, ")"),
|
|
31
32
|
fontWeight: 'bold'
|
|
32
33
|
});
|
|
@@ -41,10 +42,12 @@ var getMonthAndYearStyles = function getMonthAndYearStyles() {
|
|
|
41
42
|
};
|
|
42
43
|
|
|
43
44
|
var arrowLeftStyles = (0, _react2.css)({
|
|
44
|
-
|
|
45
|
+
// TODO Delete this comment after verifying spacing token -> previous value `8`
|
|
46
|
+
marginLeft: "var(--ds-scale-100, 8px)"
|
|
45
47
|
});
|
|
46
48
|
var arrowRightStyles = (0, _react2.css)({
|
|
47
|
-
|
|
49
|
+
// TODO Delete this comment after verifying spacing token -> previous value `8`
|
|
50
|
+
marginRight: "var(--ds-scale-100, 8px)"
|
|
48
51
|
});
|
|
49
52
|
var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
|
|
50
53
|
var monthLongTitle = _ref.monthLongTitle,
|
|
@@ -20,7 +20,7 @@ var dayNameGridStyles = (0, _react2.css)({
|
|
|
20
20
|
var dayNameCellStyles = (0, _react2.css)({
|
|
21
21
|
boxSizing: 'border-box',
|
|
22
22
|
minWidth: 40,
|
|
23
|
-
padding:
|
|
23
|
+
padding: "var(--ds-scale-100, 8px)".concat(" ", "var(--ds-scale-100, 8px)"),
|
|
24
24
|
border: 0,
|
|
25
25
|
color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
|
|
26
26
|
fontSize: 11,
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/calendar.js
CHANGED
|
@@ -23,7 +23,8 @@ import useUniqueId from './internal/hooks/use-unique-id';
|
|
|
23
23
|
const lightWrapperStyles = css({
|
|
24
24
|
display: 'inline-block',
|
|
25
25
|
boxSizing: 'border-box',
|
|
26
|
-
|
|
26
|
+
// TODO Delete this comment after verifying spacing token -> previous value `16`
|
|
27
|
+
padding: "var(--ds-scale-200, 16px)",
|
|
27
28
|
backgroundColor: `var(--ds-UNSAFE_util-transparent, ${N0})`,
|
|
28
29
|
color: `var(--ds-text, ${N900})`,
|
|
29
30
|
outline: 'none',
|
|
@@ -32,7 +33,8 @@ const lightWrapperStyles = css({
|
|
|
32
33
|
const darkWrapperStyles = css({
|
|
33
34
|
display: 'inline-block',
|
|
34
35
|
boxSizing: 'border-box',
|
|
35
|
-
|
|
36
|
+
// TODO Delete this comment after verifying spacing token -> previous value `16`
|
|
37
|
+
padding: "var(--ds-scale-200, 16px)",
|
|
36
38
|
backgroundColor: `var(--ds-UNSAFE_util-transparent, ${N700})`,
|
|
37
39
|
color: `var(--ds-text, ${DN600})`,
|
|
38
40
|
outline: 'none',
|
|
@@ -41,14 +43,15 @@ const darkWrapperStyles = css({
|
|
|
41
43
|
const gridsContainerStyles = css({
|
|
42
44
|
display: 'inline-block',
|
|
43
45
|
width: 289,
|
|
44
|
-
|
|
46
|
+
// TODO Delete this comment after verifying spacing token -> previous value `0`
|
|
47
|
+
margin: "var(--ds-scale-0, 0px)",
|
|
45
48
|
marginBottom: 5,
|
|
46
49
|
textAlign: 'center'
|
|
47
50
|
});
|
|
48
51
|
const analyticsAttributes = {
|
|
49
52
|
componentName: 'calendar',
|
|
50
53
|
packageName: "@atlaskit/calendar",
|
|
51
|
-
packageVersion: "12.4.
|
|
54
|
+
packageVersion: "12.4.3"
|
|
52
55
|
};
|
|
53
56
|
const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
|
|
54
57
|
day,
|
|
@@ -11,7 +11,8 @@ const headingColor = {
|
|
|
11
11
|
};
|
|
12
12
|
const headingStyles = css({
|
|
13
13
|
display: 'flex',
|
|
14
|
-
|
|
14
|
+
// TODO Delete this comment after verifying spacing tokens
|
|
15
|
+
padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-0, 0px)"} 13px ${"var(--ds-scale-0, 0px)"}`,
|
|
15
16
|
color: `var(--ds-text, ${N800})`,
|
|
16
17
|
fontWeight: 'bold'
|
|
17
18
|
});
|
|
@@ -23,10 +24,12 @@ const getMonthAndYearStyles = (mode = 'light') => css({
|
|
|
23
24
|
});
|
|
24
25
|
|
|
25
26
|
const arrowLeftStyles = css({
|
|
26
|
-
|
|
27
|
+
// TODO Delete this comment after verifying spacing token -> previous value `8`
|
|
28
|
+
marginLeft: "var(--ds-scale-100, 8px)"
|
|
27
29
|
});
|
|
28
30
|
const arrowRightStyles = css({
|
|
29
|
-
|
|
31
|
+
// TODO Delete this comment after verifying spacing token -> previous value `8`
|
|
32
|
+
marginRight: "var(--ds-scale-100, 8px)"
|
|
30
33
|
});
|
|
31
34
|
const Heading = /*#__PURE__*/memo(function Heading({
|
|
32
35
|
monthLongTitle,
|
|
@@ -10,7 +10,7 @@ const dayNameGridStyles = css({
|
|
|
10
10
|
const dayNameCellStyles = css({
|
|
11
11
|
boxSizing: 'border-box',
|
|
12
12
|
minWidth: 40,
|
|
13
|
-
padding:
|
|
13
|
+
padding: `${"var(--ds-scale-100, 8px)"} ${"var(--ds-scale-100, 8px)"}`,
|
|
14
14
|
border: 0,
|
|
15
15
|
color: `var(--ds-text-subtle, ${N200})`,
|
|
16
16
|
fontSize: 11,
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/calendar.js
CHANGED
|
@@ -29,7 +29,8 @@ import useUniqueId from './internal/hooks/use-unique-id';
|
|
|
29
29
|
var lightWrapperStyles = css({
|
|
30
30
|
display: 'inline-block',
|
|
31
31
|
boxSizing: 'border-box',
|
|
32
|
-
|
|
32
|
+
// TODO Delete this comment after verifying spacing token -> previous value `16`
|
|
33
|
+
padding: "var(--ds-scale-200, 16px)",
|
|
33
34
|
backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(N0, ")"),
|
|
34
35
|
color: "var(--ds-text, ".concat(N900, ")"),
|
|
35
36
|
outline: 'none',
|
|
@@ -38,7 +39,8 @@ var lightWrapperStyles = css({
|
|
|
38
39
|
var darkWrapperStyles = css({
|
|
39
40
|
display: 'inline-block',
|
|
40
41
|
boxSizing: 'border-box',
|
|
41
|
-
|
|
42
|
+
// TODO Delete this comment after verifying spacing token -> previous value `16`
|
|
43
|
+
padding: "var(--ds-scale-200, 16px)",
|
|
42
44
|
backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(N700, ")"),
|
|
43
45
|
color: "var(--ds-text, ".concat(DN600, ")"),
|
|
44
46
|
outline: 'none',
|
|
@@ -47,14 +49,15 @@ var darkWrapperStyles = css({
|
|
|
47
49
|
var gridsContainerStyles = css({
|
|
48
50
|
display: 'inline-block',
|
|
49
51
|
width: 289,
|
|
50
|
-
|
|
52
|
+
// TODO Delete this comment after verifying spacing token -> previous value `0`
|
|
53
|
+
margin: "var(--ds-scale-0, 0px)",
|
|
51
54
|
marginBottom: 5,
|
|
52
55
|
textAlign: 'center'
|
|
53
56
|
});
|
|
54
57
|
var analyticsAttributes = {
|
|
55
58
|
componentName: 'calendar',
|
|
56
59
|
packageName: "@atlaskit/calendar",
|
|
57
|
-
packageVersion: "12.4.
|
|
60
|
+
packageVersion: "12.4.3"
|
|
58
61
|
};
|
|
59
62
|
var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
|
|
60
63
|
var day = _ref.day,
|
|
@@ -11,7 +11,8 @@ var headingColor = {
|
|
|
11
11
|
};
|
|
12
12
|
var headingStyles = css({
|
|
13
13
|
display: 'flex',
|
|
14
|
-
|
|
14
|
+
// TODO Delete this comment after verifying spacing tokens
|
|
15
|
+
padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-0, 0px)", " 13px ", "var(--ds-scale-0, 0px)"),
|
|
15
16
|
color: "var(--ds-text, ".concat(N800, ")"),
|
|
16
17
|
fontWeight: 'bold'
|
|
17
18
|
});
|
|
@@ -26,10 +27,12 @@ var getMonthAndYearStyles = function getMonthAndYearStyles() {
|
|
|
26
27
|
};
|
|
27
28
|
|
|
28
29
|
var arrowLeftStyles = css({
|
|
29
|
-
|
|
30
|
+
// TODO Delete this comment after verifying spacing token -> previous value `8`
|
|
31
|
+
marginLeft: "var(--ds-scale-100, 8px)"
|
|
30
32
|
});
|
|
31
33
|
var arrowRightStyles = css({
|
|
32
|
-
|
|
34
|
+
// TODO Delete this comment after verifying spacing token -> previous value `8`
|
|
35
|
+
marginRight: "var(--ds-scale-100, 8px)"
|
|
33
36
|
});
|
|
34
37
|
var Heading = /*#__PURE__*/memo(function Heading(_ref) {
|
|
35
38
|
var monthLongTitle = _ref.monthLongTitle,
|
|
@@ -10,7 +10,7 @@ var dayNameGridStyles = css({
|
|
|
10
10
|
var dayNameCellStyles = css({
|
|
11
11
|
boxSizing: 'border-box',
|
|
12
12
|
minWidth: 40,
|
|
13
|
-
padding:
|
|
13
|
+
padding: "var(--ds-scale-100, 8px)".concat(" ", "var(--ds-scale-100, 8px)"),
|
|
14
14
|
border: 0,
|
|
15
15
|
color: "var(--ds-text-subtle, ".concat(N200, ")"),
|
|
16
16
|
fontSize: 11,
|
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.3",
|
|
4
4
|
"description": "An interactive calendar for date selection experiences.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -12,16 +12,10 @@
|
|
|
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
|
-
]
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
15
|
"sideEffects": false,
|
|
23
16
|
"atlaskit:src": "src/index.tsx",
|
|
24
17
|
"atlassian": {
|
|
18
|
+
"disableProductCI": true,
|
|
25
19
|
"team": "Design System Team",
|
|
26
20
|
"releaseModel": "scheduled",
|
|
27
21
|
"website": {
|
|
@@ -31,12 +25,12 @@
|
|
|
31
25
|
},
|
|
32
26
|
"dependencies": {
|
|
33
27
|
"@atlaskit/analytics-next": "^8.2.0",
|
|
34
|
-
"@atlaskit/button": "^16.
|
|
28
|
+
"@atlaskit/button": "^16.4.0",
|
|
35
29
|
"@atlaskit/ds-lib": "^2.1.0",
|
|
36
|
-
"@atlaskit/icon": "^21.
|
|
30
|
+
"@atlaskit/icon": "^21.11.0",
|
|
37
31
|
"@atlaskit/locale": "^2.3.0",
|
|
38
32
|
"@atlaskit/theme": "^12.2.0",
|
|
39
|
-
"@atlaskit/tokens": "^0.
|
|
33
|
+
"@atlaskit/tokens": "^0.11.0",
|
|
40
34
|
"@atlaskit/visually-hidden": "^1.1.0",
|
|
41
35
|
"@babel/runtime": "^7.0.0",
|
|
42
36
|
"@emotion/react": "^11.7.1",
|
|
@@ -72,6 +66,7 @@
|
|
|
72
66
|
"design-system": "v1",
|
|
73
67
|
"ui-components": "lite-mode",
|
|
74
68
|
"analytics": "analytics-next",
|
|
69
|
+
"design-tokens": "spacing",
|
|
75
70
|
"theming": "tokens",
|
|
76
71
|
"deprecation": "no-deprecated-imports",
|
|
77
72
|
"styling": [
|
package/report.api.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
4
4
|
|
|
5
|
+
<!--
|
|
6
|
+
Generated API Report version: 2.0
|
|
7
|
+
-->
|
|
8
|
+
|
|
9
|
+
[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
10
|
+
|
|
5
11
|
```ts
|
|
6
12
|
/// <reference types="react" />
|
|
7
13
|
|
|
@@ -13,163 +19,116 @@ import { ThemeModes } from '@atlaskit/theme/types';
|
|
|
13
19
|
import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
14
20
|
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
15
21
|
|
|
16
|
-
|
|
22
|
+
// @public (undocumented)
|
|
23
|
+
type ArrowKeys = 'left' | 'up' | 'right' | 'down';
|
|
17
24
|
|
|
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
|
-
|
|
25
|
+
// @public
|
|
26
|
+
const Calendar: MemoExoticComponent<
|
|
27
|
+
ForwardRefExoticComponent<
|
|
28
|
+
Pick<
|
|
29
|
+
CalendarProps,
|
|
30
|
+
| 'style'
|
|
31
|
+
| 'disabled'
|
|
32
|
+
| 'year'
|
|
33
|
+
| 'previousMonthLabel'
|
|
34
|
+
| 'nextMonthLabel'
|
|
35
|
+
| 'mode'
|
|
36
|
+
| 'testId'
|
|
37
|
+
| 'className'
|
|
38
|
+
| 'tabIndex'
|
|
39
|
+
| 'onFocus'
|
|
40
|
+
| 'onBlur'
|
|
41
|
+
| 'onChange'
|
|
42
|
+
| 'onSelect'
|
|
43
|
+
| 'selected'
|
|
44
|
+
| 'analyticsContext'
|
|
45
|
+
| 'day'
|
|
46
|
+
| 'month'
|
|
47
|
+
| 'defaultDay'
|
|
48
|
+
| 'defaultMonth'
|
|
49
|
+
| 'defaultYear'
|
|
50
|
+
| 'today'
|
|
51
|
+
| 'defaultSelected'
|
|
52
|
+
| 'previouslySelected'
|
|
53
|
+
| 'defaultPreviouslySelected'
|
|
54
|
+
| 'weekStartDay'
|
|
55
|
+
| 'disabledDateFilter'
|
|
56
|
+
| 'minDate'
|
|
57
|
+
| 'maxDate'
|
|
58
|
+
| 'locale'
|
|
59
|
+
| 'calendarRef'
|
|
60
|
+
| 'createAnalyticsEvent'
|
|
61
|
+
> &
|
|
62
|
+
RefAttributes<HTMLDivElement>
|
|
63
|
+
>
|
|
64
|
+
>;
|
|
54
65
|
export default Calendar;
|
|
55
66
|
|
|
56
|
-
|
|
57
|
-
|
|
67
|
+
// @public (undocumented)
|
|
68
|
+
export interface CalendarProps extends WithAnalyticsEventsProps {
|
|
69
|
+
analyticsContext?: Record<string, any>;
|
|
70
|
+
// @internal
|
|
71
|
+
calendarRef?: React.Ref<CalendarRef>;
|
|
72
|
+
className?: string;
|
|
58
73
|
day?: number;
|
|
59
|
-
/** Default for `day`. */
|
|
60
74
|
defaultDay?: number;
|
|
61
|
-
/** Default for `month`. */
|
|
62
75
|
defaultMonth?: number;
|
|
63
|
-
/** Default for `previouslySelected`. */
|
|
64
76
|
defaultPreviouslySelected?: Array<string>;
|
|
65
|
-
/** Default for `selected`. */
|
|
66
77
|
defaultSelected?: Array<string>;
|
|
67
|
-
/** Default for `year`. */
|
|
68
78
|
defaultYear?: number;
|
|
69
|
-
/** Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates provided are greyed out.
|
|
70
|
-
This does not prevent these dates being selected. */
|
|
71
79
|
disabled?: Array<string>;
|
|
72
|
-
/** A filter function that takes a date string in the format 'YYYY-MM-DD' and returns true if that date should be disabled. */
|
|
73
80
|
disabledDateFilter?: (date: string) => boolean;
|
|
74
|
-
|
|
81
|
+
locale?: string;
|
|
75
82
|
maxDate?: string;
|
|
76
|
-
/** The earliest enabled date */
|
|
77
83
|
minDate?: string;
|
|
78
|
-
|
|
84
|
+
// @internal
|
|
85
|
+
mode?: ThemeModes;
|
|
79
86
|
month?: number;
|
|
80
|
-
/** The aria-label attribute associated with the next-month arrow. */
|
|
81
87
|
nextMonthLabel?: string;
|
|
82
|
-
/** Function which is called when the calendar is no longer focused. */
|
|
83
88
|
onBlur?: React.FocusEventHandler;
|
|
84
|
-
/** Called when the calendar is navigated. This can be triggered by the keyboard, or by clicking the navigational buttons.
|
|
85
|
-
The 'interface' property indicates the the direction the calendar was navigated whereas the 'iso' property is a string of the format YYYY-MM-DD. */
|
|
86
89
|
onChange?: (event: ChangeEvent, analyticsEvent: UIAnalyticsEvent) => void;
|
|
87
|
-
/** Called when the calendar receives focus. This could be from a mouse event on the container by tabbing into it. */
|
|
88
90
|
onFocus?: React.FocusEventHandler;
|
|
89
|
-
/** Function called when a day is clicked on. Calls with an object that has
|
|
90
|
-
a day, month and year property as numbers, representing the date just clicked.
|
|
91
|
-
It also has an 'iso' property, which is a string of the selected date in the
|
|
92
|
-
format YYYY-MM-DD. */
|
|
93
91
|
onSelect?: (event: SelectEvent, analyticsEvent: UIAnalyticsEvent) => void;
|
|
94
|
-
/** Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
|
|
95
|
-
provided are given a background color. */
|
|
96
92
|
previouslySelected?: Array<string>;
|
|
97
|
-
/** The aria-label attribute associated with the previous-month arrow. */
|
|
98
93
|
previousMonthLabel?: string;
|
|
99
|
-
/** Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
|
|
100
|
-
provided are given a background color. */
|
|
101
94
|
selected?: Array<string>;
|
|
102
|
-
|
|
95
|
+
style?: CSSProperties;
|
|
96
|
+
tabIndex?: number;
|
|
97
|
+
testId?: string;
|
|
103
98
|
today?: string;
|
|
104
|
-
/** Year to display the calendar for. */
|
|
105
|
-
year?: number;
|
|
106
|
-
/** BCP 47 language tag (e.g. ja-JP) that ensures dates are in the official format for the locale. */
|
|
107
|
-
locale?: string;
|
|
108
|
-
/** Additional information to be included in the `context` of analytics events. */
|
|
109
|
-
analyticsContext?: Record<string, any>;
|
|
110
|
-
/**
|
|
111
|
-
* Start day of the week for the calendar.
|
|
112
|
-
* - `0` sunday (default value)
|
|
113
|
-
* - `1` monday
|
|
114
|
-
* - `2` tuesday
|
|
115
|
-
* - `3` wednesday
|
|
116
|
-
* - `4` thursday
|
|
117
|
-
* - `5` friday
|
|
118
|
-
* - `6` saturday
|
|
119
|
-
*/
|
|
120
99
|
weekStartDay?: WeekDay;
|
|
121
|
-
|
|
122
|
-
* 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
|
|
123
|
-
*
|
|
124
|
-
* testId--container - Outermost container containing everything inside calendar
|
|
125
|
-
* testId--month - Container containing all available days for the month
|
|
126
|
-
* testId--previous-month - Button to show next month
|
|
127
|
-
* testId--next-month - Button to show previous month
|
|
128
|
-
* testId--current-month-year - Text containing the current month and year
|
|
129
|
-
* testId--selected-day - The currently selected day (may be missing if a date isn’t selected)
|
|
130
|
-
* */
|
|
131
|
-
testId?: string;
|
|
132
|
-
/**
|
|
133
|
-
* Class name to apply to the calendar
|
|
134
|
-
*/
|
|
135
|
-
className?: string;
|
|
136
|
-
/**
|
|
137
|
-
* Style customization to apply to the calendar
|
|
138
|
-
*/
|
|
139
|
-
style?: CSSProperties;
|
|
140
|
-
/**
|
|
141
|
-
* @internal An additional ref which exposes Calendar's internal api's. We kept this for
|
|
142
|
-
* backward compatibility. PLEASE DO NOT USE THIS.
|
|
143
|
-
*/
|
|
144
|
-
calendarRef?: React.Ref<CalendarRef>;
|
|
145
|
-
/**
|
|
146
|
-
* @internal Legacy theme mode, can be either 'light' or 'dark'
|
|
147
|
-
*/
|
|
148
|
-
mode?: ThemeModes;
|
|
100
|
+
year?: number;
|
|
149
101
|
}
|
|
150
102
|
|
|
151
|
-
|
|
103
|
+
// @public (undocumented)
|
|
104
|
+
export interface CalendarRef {
|
|
105
|
+
// (undocumented)
|
|
152
106
|
navigate: (type: ArrowKeys) => void;
|
|
153
107
|
}
|
|
154
108
|
|
|
155
|
-
|
|
109
|
+
// @public (undocumented)
|
|
110
|
+
export type ChangeEvent = {
|
|
156
111
|
iso: ISODate;
|
|
157
112
|
type: 'left' | 'up' | 'right' | 'down' | 'prev' | 'next';
|
|
158
113
|
} & DateObj;
|
|
159
114
|
|
|
160
|
-
|
|
115
|
+
// @public (undocumented)
|
|
116
|
+
type DateObj = {
|
|
161
117
|
day: number;
|
|
162
118
|
month: number;
|
|
163
119
|
year: number;
|
|
164
120
|
};
|
|
165
121
|
|
|
166
|
-
|
|
122
|
+
// @public (undocumented)
|
|
123
|
+
type ISODate = string;
|
|
167
124
|
|
|
168
|
-
|
|
125
|
+
// @public (undocumented)
|
|
126
|
+
export type SelectEvent = {
|
|
169
127
|
iso: ISODate;
|
|
170
128
|
} & DateObj;
|
|
171
129
|
|
|
172
|
-
|
|
130
|
+
// @public (undocumented)
|
|
131
|
+
type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
173
132
|
|
|
174
|
-
|
|
133
|
+
// (No @packageDocumentation comment for this package)
|
|
175
134
|
```
|
|
@@ -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
|
-
}
|