@atlaskit/calendar 16.1.1 → 16.2.1
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 +17 -0
- package/dist/cjs/calendar.js +27 -9
- package/dist/cjs/internal/components/header.js +79 -16
- package/dist/cjs/internal/hooks/use-handle-date-change.js +32 -6
- package/dist/es2019/calendar.js +27 -9
- package/dist/es2019/internal/components/header.js +78 -17
- package/dist/es2019/internal/hooks/use-handle-date-change.js +34 -6
- package/dist/esm/calendar.js +27 -9
- package/dist/esm/internal/components/header.js +81 -18
- package/dist/esm/internal/hooks/use-handle-date-change.js +32 -6
- package/dist/types/internal/components/header.d.ts +11 -5
- package/dist/types/internal/hooks/use-handle-date-change.d.ts +4 -2
- package/dist/types/types.d.ts +1 -1
- package/dist/types-ts4.5/internal/components/header.d.ts +11 -5
- package/dist/types-ts4.5/internal/hooks/use-handle-date-change.d.ts +4 -2
- package/dist/types-ts4.5/types.d.ts +1 -1
- package/package.json +11 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/calendar
|
|
2
2
|
|
|
3
|
+
## 16.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#103999](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103999)
|
|
8
|
+
[`9f62ecec4d422`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f62ecec4d422) -
|
|
9
|
+
Update dependencies.
|
|
10
|
+
|
|
11
|
+
## 16.2.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- [#102000](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102000)
|
|
16
|
+
[`3e1546043c1c3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3e1546043c1c3) -
|
|
17
|
+
We are testing adding year buttons to the calendar behind a feature flag. If this fix is
|
|
18
|
+
successful it will be available in a later release.
|
|
19
|
+
|
|
3
20
|
## 16.1.1
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
package/dist/cjs/calendar.js
CHANGED
|
@@ -38,7 +38,7 @@ var styles = {
|
|
|
38
38
|
var analyticsAttributes = {
|
|
39
39
|
componentName: 'calendar',
|
|
40
40
|
packageName: "@atlaskit/calendar",
|
|
41
|
-
packageVersion: "16.
|
|
41
|
+
packageVersion: "16.2.1"
|
|
42
42
|
};
|
|
43
43
|
var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
|
|
44
44
|
var day = _ref.day,
|
|
@@ -130,8 +130,10 @@ var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref,
|
|
|
130
130
|
onChange: onChangeWithAnalytics
|
|
131
131
|
}),
|
|
132
132
|
navigate = _useHandleDateChange.navigate,
|
|
133
|
-
|
|
134
|
-
|
|
133
|
+
handleClickNextMonth = _useHandleDateChange.handleClickNextMonth,
|
|
134
|
+
handleClickNextYear = _useHandleDateChange.handleClickNextYear,
|
|
135
|
+
handleClickPrevMonth = _useHandleDateChange.handleClickPrevMonth,
|
|
136
|
+
handleClickPrevYear = _useHandleDateChange.handleClickPrevYear;
|
|
135
137
|
var onSelectWithAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
|
|
136
138
|
fn: onSelect,
|
|
137
139
|
action: 'selected',
|
|
@@ -175,20 +177,32 @@ var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref,
|
|
|
175
177
|
daysLong: daysLong,
|
|
176
178
|
weekStartDay: weekStartDay
|
|
177
179
|
});
|
|
178
|
-
var
|
|
180
|
+
var getNextMonthHeading = function getNextMonthHeading() {
|
|
179
181
|
// Next month is (currentMonth - 1) + 1, or just currentMonth in this
|
|
180
182
|
// instance.
|
|
181
183
|
var nextMonth = monthValue % 12;
|
|
182
184
|
var showNextYear = monthValue === 12;
|
|
183
185
|
return "".concat(monthsLong[nextMonth], " ").concat(showNextYear ? yearValue + 1 : yearValue);
|
|
184
186
|
};
|
|
185
|
-
var
|
|
187
|
+
var getNextYearHeading = function getNextYearHeading() {
|
|
188
|
+
// Months are held in Date object as zero-indexed
|
|
189
|
+
var thisMonth = (monthValue - 1) % 12;
|
|
190
|
+
var nextYear = yearValue + 1;
|
|
191
|
+
return "".concat(monthsLong[thisMonth], " ").concat(nextYear);
|
|
192
|
+
};
|
|
193
|
+
var getPreviousMonthHeading = function getPreviousMonthHeading() {
|
|
186
194
|
// Previous month is (monthValue - 1) - 1. Need to add 12 so the modulo
|
|
187
195
|
// works as expected and stays positive.
|
|
188
196
|
var previousMonth = (monthValue + 12 - 2) % 12;
|
|
189
197
|
var showPreviousYear = monthValue === 1;
|
|
190
198
|
return "".concat(monthsLong[previousMonth], " ").concat(showPreviousYear ? yearValue - 1 : yearValue);
|
|
191
199
|
};
|
|
200
|
+
var getPreviousYearHeading = function getPreviousYearHeading() {
|
|
201
|
+
// Months are held in Date object as zero-indexed
|
|
202
|
+
var thisMonth = (monthValue - 1) % 12;
|
|
203
|
+
var previousYear = yearValue - 1;
|
|
204
|
+
return "".concat(monthsLong[thisMonth], " ").concat(previousYear);
|
|
205
|
+
};
|
|
192
206
|
var headerId = (0, _useId.useId)();
|
|
193
207
|
return (
|
|
194
208
|
/*#__PURE__*/
|
|
@@ -218,10 +232,14 @@ var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref,
|
|
|
218
232
|
year: yearValue,
|
|
219
233
|
nextMonthLabel: nextMonthLabel,
|
|
220
234
|
previousMonthLabel: previousMonthLabel,
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
235
|
+
nextMonthHeading: getNextMonthHeading(),
|
|
236
|
+
nextYearHeading: getNextYearHeading(),
|
|
237
|
+
previousMonthHeading: getPreviousMonthHeading(),
|
|
238
|
+
previousYearHeading: getPreviousYearHeading(),
|
|
239
|
+
handleClickNextMonth: handleClickNextMonth,
|
|
240
|
+
handleClickNextYear: handleClickNextYear,
|
|
241
|
+
handleClickPrevMonth: handleClickPrevMonth,
|
|
242
|
+
handleClickPrevYear: handleClickPrevYear,
|
|
225
243
|
headerId: headerId,
|
|
226
244
|
tabIndex: tabIndex,
|
|
227
245
|
testId: testId
|
|
@@ -11,8 +11,13 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
var _new = require("@atlaskit/button/new");
|
|
12
12
|
var _useId = require("@atlaskit/ds-lib/use-id");
|
|
13
13
|
var _heading = _interopRequireDefault(require("@atlaskit/heading"));
|
|
14
|
+
var _chevronDoubleLeft = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-double-left"));
|
|
15
|
+
var _chevronDoubleRight = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-double-right"));
|
|
16
|
+
var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-left"));
|
|
17
|
+
var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-right"));
|
|
14
18
|
var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
|
|
15
19
|
var _chevronRightChevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right--chevron-right-large"));
|
|
20
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
16
21
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
17
22
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
23
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -21,12 +26,20 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
|
|
|
21
26
|
year = _ref.year,
|
|
22
27
|
_ref$previousMonthLab = _ref.previousMonthLabel,
|
|
23
28
|
previousMonthLabel = _ref$previousMonthLab === void 0 ? 'Previous month' : _ref$previousMonthLab,
|
|
24
|
-
|
|
29
|
+
_ref$previousYearLabe = _ref.previousYearLabel,
|
|
30
|
+
previousYearLabel = _ref$previousYearLabe === void 0 ? 'Previous year' : _ref$previousYearLabe,
|
|
31
|
+
previousMonthHeading = _ref.previousMonthHeading,
|
|
32
|
+
previousYearHeading = _ref.previousYearHeading,
|
|
25
33
|
_ref$nextMonthLabel = _ref.nextMonthLabel,
|
|
26
34
|
nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
35
|
+
_ref$nextYearLabel = _ref.nextYearLabel,
|
|
36
|
+
nextYearLabel = _ref$nextYearLabel === void 0 ? 'Next year' : _ref$nextYearLabel,
|
|
37
|
+
nextMonthHeading = _ref.nextMonthHeading,
|
|
38
|
+
nextYearHeading = _ref.nextYearHeading,
|
|
39
|
+
handleClickPrevMonth = _ref.handleClickPrevMonth,
|
|
40
|
+
handleClickPrevYear = _ref.handleClickPrevYear,
|
|
41
|
+
handleClickNextMonth = _ref.handleClickNextMonth,
|
|
42
|
+
handleClickNextYear = _ref.handleClickNextYear,
|
|
30
43
|
headerId = _ref.headerId,
|
|
31
44
|
tabIndex = _ref.tabIndex,
|
|
32
45
|
testId = _ref.testId;
|
|
@@ -41,19 +54,31 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
|
|
|
41
54
|
// datetime picker).
|
|
42
55
|
var _useState = (0, _react.useState)(false),
|
|
43
56
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
44
|
-
|
|
45
|
-
|
|
57
|
+
hasInteractedWithMonthOrYear = _useState2[0],
|
|
58
|
+
setHasInteractedWithMonthOrYear = _useState2[1];
|
|
46
59
|
var handlePrevMonthInteraction = function handlePrevMonthInteraction(e) {
|
|
47
|
-
if (!
|
|
48
|
-
|
|
60
|
+
if (!hasInteractedWithMonthOrYear) {
|
|
61
|
+
setHasInteractedWithMonthOrYear(true);
|
|
49
62
|
}
|
|
50
|
-
|
|
63
|
+
handleClickPrevMonth(e);
|
|
64
|
+
};
|
|
65
|
+
var handlePrevYearInteraction = function handlePrevYearInteraction(e) {
|
|
66
|
+
if (!hasInteractedWithMonthOrYear) {
|
|
67
|
+
setHasInteractedWithMonthOrYear(true);
|
|
68
|
+
}
|
|
69
|
+
handleClickPrevYear(e);
|
|
51
70
|
};
|
|
52
71
|
var handleNextMonthInteraction = function handleNextMonthInteraction(e) {
|
|
53
|
-
if (!
|
|
54
|
-
|
|
72
|
+
if (!hasInteractedWithMonthOrYear) {
|
|
73
|
+
setHasInteractedWithMonthOrYear(true);
|
|
74
|
+
}
|
|
75
|
+
handleClickNextMonth(e);
|
|
76
|
+
};
|
|
77
|
+
var handleNextYearInteraction = function handleNextYearInteraction(e) {
|
|
78
|
+
if (!hasInteractedWithMonthOrYear) {
|
|
79
|
+
setHasInteractedWithMonthOrYear(true);
|
|
55
80
|
}
|
|
56
|
-
|
|
81
|
+
handleClickNextYear(e);
|
|
57
82
|
};
|
|
58
83
|
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
59
84
|
paddingInline: "space.100"
|
|
@@ -61,16 +86,35 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
|
|
|
61
86
|
space: "space.0",
|
|
62
87
|
alignBlock: "center",
|
|
63
88
|
spread: "space-between"
|
|
89
|
+
}, (0, _platformFeatureFlags.fg)('dst-a11y-add-year-buttons-to-calendar') ? /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
|
|
90
|
+
space: "space.100",
|
|
91
|
+
alignBlock: "start"
|
|
64
92
|
}, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
|
|
93
|
+
appearance: "subtle",
|
|
94
|
+
spacing: "compact",
|
|
95
|
+
tabIndex: tabIndex,
|
|
96
|
+
onClick: handlePrevYearInteraction,
|
|
97
|
+
testId: testId && "".concat(testId, "--previous-year"),
|
|
98
|
+
icon: _chevronDoubleLeft.default,
|
|
99
|
+
label: "".concat(previousYearLabel, ", ").concat(previousYearHeading)
|
|
100
|
+
}), /*#__PURE__*/_react.default.createElement(_new.IconButton, {
|
|
101
|
+
appearance: "subtle",
|
|
102
|
+
spacing: "compact",
|
|
103
|
+
tabIndex: tabIndex,
|
|
104
|
+
onClick: handlePrevMonthInteraction,
|
|
105
|
+
testId: testId && "".concat(testId, "--previous-month"),
|
|
106
|
+
icon: _chevronLeft.default,
|
|
107
|
+
label: "".concat(previousMonthLabel, ", ").concat(previousMonthHeading)
|
|
108
|
+
})) : /*#__PURE__*/_react.default.createElement(_new.IconButton, {
|
|
65
109
|
appearance: "subtle",
|
|
66
110
|
spacing: "compact",
|
|
67
111
|
tabIndex: tabIndex,
|
|
68
112
|
onClick: handlePrevMonthInteraction,
|
|
69
113
|
testId: testId && "".concat(testId, "--previous-month"),
|
|
70
114
|
icon: _chevronLeftChevronLeftLarge.default,
|
|
71
|
-
label: "".concat(previousMonthLabel, ", ").concat(
|
|
115
|
+
label: "".concat(previousMonthLabel, ", ").concat(previousMonthHeading)
|
|
72
116
|
}), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
73
|
-
"aria-live":
|
|
117
|
+
"aria-live": hasInteractedWithMonthOrYear ? 'polite' : undefined,
|
|
74
118
|
id: announceId,
|
|
75
119
|
testId: testId && "".concat(testId, "--current-month-year--container")
|
|
76
120
|
}, /*#__PURE__*/_react.default.createElement(_heading.default, {
|
|
@@ -78,14 +122,33 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
|
|
|
78
122
|
as: "h2",
|
|
79
123
|
id: headerId,
|
|
80
124
|
testId: testId && "".concat(testId, "--current-month-year")
|
|
81
|
-
}, "".concat(monthLongTitle, " ").concat(year))), /*#__PURE__*/_react.default.createElement(
|
|
125
|
+
}, "".concat(monthLongTitle, " ").concat(year))), (0, _platformFeatureFlags.fg)('dst-a11y-add-year-buttons-to-calendar') ? /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
|
|
126
|
+
space: "space.100",
|
|
127
|
+
alignBlock: "end"
|
|
128
|
+
}, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
|
|
129
|
+
appearance: "subtle",
|
|
130
|
+
spacing: "compact",
|
|
131
|
+
tabIndex: tabIndex,
|
|
132
|
+
onClick: handleNextMonthInteraction,
|
|
133
|
+
testId: testId && "".concat(testId, "--next-month"),
|
|
134
|
+
icon: _chevronRight.default,
|
|
135
|
+
label: "".concat(nextMonthLabel, ", ").concat(nextMonthHeading)
|
|
136
|
+
}), /*#__PURE__*/_react.default.createElement(_new.IconButton, {
|
|
137
|
+
appearance: "subtle",
|
|
138
|
+
spacing: "compact",
|
|
139
|
+
tabIndex: tabIndex,
|
|
140
|
+
onClick: handleNextYearInteraction,
|
|
141
|
+
testId: testId && "".concat(testId, "--next-year"),
|
|
142
|
+
icon: _chevronDoubleRight.default,
|
|
143
|
+
label: "".concat(nextYearLabel, ", ").concat(nextYearHeading)
|
|
144
|
+
})) : /*#__PURE__*/_react.default.createElement(_new.IconButton, {
|
|
82
145
|
appearance: "subtle",
|
|
83
146
|
spacing: "compact",
|
|
84
147
|
tabIndex: tabIndex,
|
|
85
148
|
onClick: handleNextMonthInteraction,
|
|
86
149
|
testId: testId && "".concat(testId, "--next-month"),
|
|
87
150
|
icon: _chevronRightChevronRightLarge.default,
|
|
88
|
-
label: "".concat(nextMonthLabel, ", ").concat(
|
|
151
|
+
label: "".concat(nextMonthLabel, ", ").concat(nextMonthHeading)
|
|
89
152
|
})));
|
|
90
153
|
});
|
|
91
154
|
Header.displayName = 'Header';
|
|
@@ -183,7 +183,7 @@ function useHandleDateChange(_ref) {
|
|
|
183
183
|
}
|
|
184
184
|
}
|
|
185
185
|
}, [triggerOnChange]);
|
|
186
|
-
var
|
|
186
|
+
var handleClickNextMonth = (0, _react.useCallback)(function () {
|
|
187
187
|
var _dateRef$current$getN = _objectSpread(_objectSpread({}, dateRef.current), getNextMonth(dateRef.current.month, dateRef.current.year)),
|
|
188
188
|
day = _dateRef$current$getN.day,
|
|
189
189
|
month = _dateRef$current$getN.month,
|
|
@@ -192,10 +192,22 @@ function useHandleDateChange(_ref) {
|
|
|
192
192
|
day: day,
|
|
193
193
|
month: month,
|
|
194
194
|
year: year,
|
|
195
|
-
type: '
|
|
195
|
+
type: 'nextMonth'
|
|
196
196
|
});
|
|
197
197
|
}, [triggerOnChange]);
|
|
198
|
-
var
|
|
198
|
+
var handleClickNextYear = (0, _react.useCallback)(function () {
|
|
199
|
+
var _dateRef$current2 = dateRef.current,
|
|
200
|
+
day = _dateRef$current2.day,
|
|
201
|
+
month = _dateRef$current2.month,
|
|
202
|
+
year = _dateRef$current2.year;
|
|
203
|
+
triggerOnChange({
|
|
204
|
+
day: day,
|
|
205
|
+
month: month,
|
|
206
|
+
year: year + 1,
|
|
207
|
+
type: 'nextYear'
|
|
208
|
+
});
|
|
209
|
+
}, [triggerOnChange]);
|
|
210
|
+
var handleClickPrevMonth = (0, _react.useCallback)(function () {
|
|
199
211
|
var _dateRef$current$getP = _objectSpread(_objectSpread({}, dateRef.current), getPrevMonth(dateRef.current.month, dateRef.current.year)),
|
|
200
212
|
day = _dateRef$current$getP.day,
|
|
201
213
|
month = _dateRef$current$getP.month,
|
|
@@ -204,12 +216,26 @@ function useHandleDateChange(_ref) {
|
|
|
204
216
|
day: day,
|
|
205
217
|
month: month,
|
|
206
218
|
year: year,
|
|
207
|
-
type: '
|
|
219
|
+
type: 'prevMonth'
|
|
220
|
+
});
|
|
221
|
+
}, [triggerOnChange]);
|
|
222
|
+
var handleClickPrevYear = (0, _react.useCallback)(function () {
|
|
223
|
+
var _dateRef$current3 = dateRef.current,
|
|
224
|
+
day = _dateRef$current3.day,
|
|
225
|
+
month = _dateRef$current3.month,
|
|
226
|
+
year = _dateRef$current3.year;
|
|
227
|
+
triggerOnChange({
|
|
228
|
+
day: day,
|
|
229
|
+
month: month,
|
|
230
|
+
year: year - 1,
|
|
231
|
+
type: 'prevYear'
|
|
208
232
|
});
|
|
209
233
|
}, [triggerOnChange]);
|
|
210
234
|
return {
|
|
211
235
|
navigate: navigate,
|
|
212
|
-
|
|
213
|
-
|
|
236
|
+
handleClickNextMonth: handleClickNextMonth,
|
|
237
|
+
handleClickNextYear: handleClickNextYear,
|
|
238
|
+
handleClickPrevMonth: handleClickPrevMonth,
|
|
239
|
+
handleClickPrevYear: handleClickPrevYear
|
|
214
240
|
};
|
|
215
241
|
}
|
package/dist/es2019/calendar.js
CHANGED
|
@@ -24,7 +24,7 @@ const styles = {
|
|
|
24
24
|
const analyticsAttributes = {
|
|
25
25
|
componentName: 'calendar',
|
|
26
26
|
packageName: "@atlaskit/calendar",
|
|
27
|
-
packageVersion: "16.
|
|
27
|
+
packageVersion: "16.2.1"
|
|
28
28
|
};
|
|
29
29
|
const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
|
|
30
30
|
day,
|
|
@@ -86,8 +86,10 @@ const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
|
|
|
86
86
|
});
|
|
87
87
|
const {
|
|
88
88
|
navigate,
|
|
89
|
-
|
|
90
|
-
|
|
89
|
+
handleClickNextMonth,
|
|
90
|
+
handleClickNextYear,
|
|
91
|
+
handleClickPrevMonth,
|
|
92
|
+
handleClickPrevYear
|
|
91
93
|
} = useHandleDateChange({
|
|
92
94
|
day: [dayValue, setDayValue],
|
|
93
95
|
month: [monthValue, setMonthValue],
|
|
@@ -142,20 +144,32 @@ const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
|
|
|
142
144
|
daysLong,
|
|
143
145
|
weekStartDay
|
|
144
146
|
});
|
|
145
|
-
const
|
|
147
|
+
const getNextMonthHeading = () => {
|
|
146
148
|
// Next month is (currentMonth - 1) + 1, or just currentMonth in this
|
|
147
149
|
// instance.
|
|
148
150
|
const nextMonth = monthValue % 12;
|
|
149
151
|
const showNextYear = monthValue === 12;
|
|
150
152
|
return `${monthsLong[nextMonth]} ${showNextYear ? yearValue + 1 : yearValue}`;
|
|
151
153
|
};
|
|
152
|
-
const
|
|
154
|
+
const getNextYearHeading = () => {
|
|
155
|
+
// Months are held in Date object as zero-indexed
|
|
156
|
+
const thisMonth = (monthValue - 1) % 12;
|
|
157
|
+
const nextYear = yearValue + 1;
|
|
158
|
+
return `${monthsLong[thisMonth]} ${nextYear}`;
|
|
159
|
+
};
|
|
160
|
+
const getPreviousMonthHeading = () => {
|
|
153
161
|
// Previous month is (monthValue - 1) - 1. Need to add 12 so the modulo
|
|
154
162
|
// works as expected and stays positive.
|
|
155
163
|
const previousMonth = (monthValue + 12 - 2) % 12;
|
|
156
164
|
const showPreviousYear = monthValue === 1;
|
|
157
165
|
return `${monthsLong[previousMonth]} ${showPreviousYear ? yearValue - 1 : yearValue}`;
|
|
158
166
|
};
|
|
167
|
+
const getPreviousYearHeading = () => {
|
|
168
|
+
// Months are held in Date object as zero-indexed
|
|
169
|
+
const thisMonth = (monthValue - 1) % 12;
|
|
170
|
+
const previousYear = yearValue - 1;
|
|
171
|
+
return `${monthsLong[thisMonth]} ${previousYear}`;
|
|
172
|
+
};
|
|
159
173
|
const headerId = useId();
|
|
160
174
|
return (
|
|
161
175
|
/*#__PURE__*/
|
|
@@ -185,10 +199,14 @@ const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
|
|
|
185
199
|
year: yearValue,
|
|
186
200
|
nextMonthLabel: nextMonthLabel,
|
|
187
201
|
previousMonthLabel: previousMonthLabel,
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
202
|
+
nextMonthHeading: getNextMonthHeading(),
|
|
203
|
+
nextYearHeading: getNextYearHeading(),
|
|
204
|
+
previousMonthHeading: getPreviousMonthHeading(),
|
|
205
|
+
previousYearHeading: getPreviousYearHeading(),
|
|
206
|
+
handleClickNextMonth: handleClickNextMonth,
|
|
207
|
+
handleClickNextYear: handleClickNextYear,
|
|
208
|
+
handleClickPrevMonth: handleClickPrevMonth,
|
|
209
|
+
handleClickPrevYear: handleClickPrevYear,
|
|
192
210
|
headerId: headerId,
|
|
193
211
|
tabIndex: tabIndex,
|
|
194
212
|
testId: testId
|
|
@@ -2,18 +2,29 @@ import React, { memo, useState } from 'react';
|
|
|
2
2
|
import { IconButton } from '@atlaskit/button/new';
|
|
3
3
|
import { useId } from '@atlaskit/ds-lib/use-id';
|
|
4
4
|
import Heading from '@atlaskit/heading';
|
|
5
|
-
import
|
|
6
|
-
import
|
|
5
|
+
import ChevronDoubleLeftIcon from '@atlaskit/icon/utility/chevron-double-left';
|
|
6
|
+
import ChevronDoubleRightIcon from '@atlaskit/icon/utility/chevron-double-right';
|
|
7
|
+
import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
|
|
8
|
+
import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
|
|
9
|
+
import ChevronOldLeftIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
|
|
10
|
+
import ChevronOldRightIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
|
|
11
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
12
|
import { Box, Inline } from '@atlaskit/primitives/compiled';
|
|
8
13
|
const Header = /*#__PURE__*/memo(function Header({
|
|
9
14
|
monthLongTitle,
|
|
10
15
|
year,
|
|
11
16
|
previousMonthLabel = 'Previous month',
|
|
12
|
-
|
|
17
|
+
previousYearLabel = 'Previous year',
|
|
18
|
+
previousMonthHeading,
|
|
19
|
+
previousYearHeading,
|
|
13
20
|
nextMonthLabel = 'Next month',
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
21
|
+
nextYearLabel = 'Next year',
|
|
22
|
+
nextMonthHeading,
|
|
23
|
+
nextYearHeading,
|
|
24
|
+
handleClickPrevMonth,
|
|
25
|
+
handleClickPrevYear,
|
|
26
|
+
handleClickNextMonth,
|
|
27
|
+
handleClickNextYear,
|
|
17
28
|
headerId,
|
|
18
29
|
tabIndex,
|
|
19
30
|
testId
|
|
@@ -27,18 +38,30 @@ const Header = /*#__PURE__*/memo(function Header({
|
|
|
27
38
|
// attribute. Without this, the `aria-live` property is set on mount and
|
|
28
39
|
// overrides the default input's readout in downstream consumers (e.g.
|
|
29
40
|
// datetime picker).
|
|
30
|
-
const [
|
|
41
|
+
const [hasInteractedWithMonthOrYear, setHasInteractedWithMonthOrYear] = useState(false);
|
|
31
42
|
const handlePrevMonthInteraction = e => {
|
|
32
|
-
if (!
|
|
33
|
-
|
|
43
|
+
if (!hasInteractedWithMonthOrYear) {
|
|
44
|
+
setHasInteractedWithMonthOrYear(true);
|
|
34
45
|
}
|
|
35
|
-
|
|
46
|
+
handleClickPrevMonth(e);
|
|
47
|
+
};
|
|
48
|
+
const handlePrevYearInteraction = e => {
|
|
49
|
+
if (!hasInteractedWithMonthOrYear) {
|
|
50
|
+
setHasInteractedWithMonthOrYear(true);
|
|
51
|
+
}
|
|
52
|
+
handleClickPrevYear(e);
|
|
36
53
|
};
|
|
37
54
|
const handleNextMonthInteraction = e => {
|
|
38
|
-
if (!
|
|
39
|
-
|
|
55
|
+
if (!hasInteractedWithMonthOrYear) {
|
|
56
|
+
setHasInteractedWithMonthOrYear(true);
|
|
57
|
+
}
|
|
58
|
+
handleClickNextMonth(e);
|
|
59
|
+
};
|
|
60
|
+
const handleNextYearInteraction = e => {
|
|
61
|
+
if (!hasInteractedWithMonthOrYear) {
|
|
62
|
+
setHasInteractedWithMonthOrYear(true);
|
|
40
63
|
}
|
|
41
|
-
|
|
64
|
+
handleClickNextYear(e);
|
|
42
65
|
};
|
|
43
66
|
return /*#__PURE__*/React.createElement(Box, {
|
|
44
67
|
paddingInline: "space.100"
|
|
@@ -46,16 +69,35 @@ const Header = /*#__PURE__*/memo(function Header({
|
|
|
46
69
|
space: "space.0",
|
|
47
70
|
alignBlock: "center",
|
|
48
71
|
spread: "space-between"
|
|
72
|
+
}, fg('dst-a11y-add-year-buttons-to-calendar') ? /*#__PURE__*/React.createElement(Inline, {
|
|
73
|
+
space: "space.100",
|
|
74
|
+
alignBlock: "start"
|
|
49
75
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
76
|
+
appearance: "subtle",
|
|
77
|
+
spacing: "compact",
|
|
78
|
+
tabIndex: tabIndex,
|
|
79
|
+
onClick: handlePrevYearInteraction,
|
|
80
|
+
testId: testId && `${testId}--previous-year`,
|
|
81
|
+
icon: ChevronDoubleLeftIcon,
|
|
82
|
+
label: `${previousYearLabel}, ${previousYearHeading}`
|
|
83
|
+
}), /*#__PURE__*/React.createElement(IconButton, {
|
|
50
84
|
appearance: "subtle",
|
|
51
85
|
spacing: "compact",
|
|
52
86
|
tabIndex: tabIndex,
|
|
53
87
|
onClick: handlePrevMonthInteraction,
|
|
54
88
|
testId: testId && `${testId}--previous-month`,
|
|
55
89
|
icon: ChevronLeftIcon,
|
|
56
|
-
label: `${previousMonthLabel}, ${
|
|
90
|
+
label: `${previousMonthLabel}, ${previousMonthHeading}`
|
|
91
|
+
})) : /*#__PURE__*/React.createElement(IconButton, {
|
|
92
|
+
appearance: "subtle",
|
|
93
|
+
spacing: "compact",
|
|
94
|
+
tabIndex: tabIndex,
|
|
95
|
+
onClick: handlePrevMonthInteraction,
|
|
96
|
+
testId: testId && `${testId}--previous-month`,
|
|
97
|
+
icon: ChevronOldLeftIcon,
|
|
98
|
+
label: `${previousMonthLabel}, ${previousMonthHeading}`
|
|
57
99
|
}), /*#__PURE__*/React.createElement(Box, {
|
|
58
|
-
"aria-live":
|
|
100
|
+
"aria-live": hasInteractedWithMonthOrYear ? 'polite' : undefined,
|
|
59
101
|
id: announceId,
|
|
60
102
|
testId: testId && `${testId}--current-month-year--container`
|
|
61
103
|
}, /*#__PURE__*/React.createElement(Heading, {
|
|
@@ -63,14 +105,33 @@ const Header = /*#__PURE__*/memo(function Header({
|
|
|
63
105
|
as: "h2",
|
|
64
106
|
id: headerId,
|
|
65
107
|
testId: testId && `${testId}--current-month-year`
|
|
66
|
-
}, `${monthLongTitle} ${year}`)), /*#__PURE__*/React.createElement(
|
|
108
|
+
}, `${monthLongTitle} ${year}`)), fg('dst-a11y-add-year-buttons-to-calendar') ? /*#__PURE__*/React.createElement(Inline, {
|
|
109
|
+
space: "space.100",
|
|
110
|
+
alignBlock: "end"
|
|
111
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
67
112
|
appearance: "subtle",
|
|
68
113
|
spacing: "compact",
|
|
69
114
|
tabIndex: tabIndex,
|
|
70
115
|
onClick: handleNextMonthInteraction,
|
|
71
116
|
testId: testId && `${testId}--next-month`,
|
|
72
117
|
icon: ChevronRightIcon,
|
|
73
|
-
label: `${nextMonthLabel}, ${
|
|
118
|
+
label: `${nextMonthLabel}, ${nextMonthHeading}`
|
|
119
|
+
}), /*#__PURE__*/React.createElement(IconButton, {
|
|
120
|
+
appearance: "subtle",
|
|
121
|
+
spacing: "compact",
|
|
122
|
+
tabIndex: tabIndex,
|
|
123
|
+
onClick: handleNextYearInteraction,
|
|
124
|
+
testId: testId && `${testId}--next-year`,
|
|
125
|
+
icon: ChevronDoubleRightIcon,
|
|
126
|
+
label: `${nextYearLabel}, ${nextYearHeading}`
|
|
127
|
+
})) : /*#__PURE__*/React.createElement(IconButton, {
|
|
128
|
+
appearance: "subtle",
|
|
129
|
+
spacing: "compact",
|
|
130
|
+
tabIndex: tabIndex,
|
|
131
|
+
onClick: handleNextMonthInteraction,
|
|
132
|
+
testId: testId && `${testId}--next-month`,
|
|
133
|
+
icon: ChevronOldRightIcon,
|
|
134
|
+
label: `${nextMonthLabel}, ${nextMonthHeading}`
|
|
74
135
|
})));
|
|
75
136
|
});
|
|
76
137
|
Header.displayName = 'Header';
|
|
@@ -171,7 +171,7 @@ export default function useHandleDateChange({
|
|
|
171
171
|
}
|
|
172
172
|
}
|
|
173
173
|
}, [triggerOnChange]);
|
|
174
|
-
const
|
|
174
|
+
const handleClickNextMonth = useCallback(() => {
|
|
175
175
|
const {
|
|
176
176
|
day,
|
|
177
177
|
month,
|
|
@@ -184,10 +184,23 @@ export default function useHandleDateChange({
|
|
|
184
184
|
day,
|
|
185
185
|
month,
|
|
186
186
|
year,
|
|
187
|
-
type: '
|
|
187
|
+
type: 'nextMonth'
|
|
188
188
|
});
|
|
189
189
|
}, [triggerOnChange]);
|
|
190
|
-
const
|
|
190
|
+
const handleClickNextYear = useCallback(() => {
|
|
191
|
+
const {
|
|
192
|
+
day,
|
|
193
|
+
month,
|
|
194
|
+
year
|
|
195
|
+
} = dateRef.current;
|
|
196
|
+
triggerOnChange({
|
|
197
|
+
day,
|
|
198
|
+
month,
|
|
199
|
+
year: year + 1,
|
|
200
|
+
type: 'nextYear'
|
|
201
|
+
});
|
|
202
|
+
}, [triggerOnChange]);
|
|
203
|
+
const handleClickPrevMonth = useCallback(() => {
|
|
191
204
|
const {
|
|
192
205
|
day,
|
|
193
206
|
month,
|
|
@@ -200,12 +213,27 @@ export default function useHandleDateChange({
|
|
|
200
213
|
day,
|
|
201
214
|
month,
|
|
202
215
|
year,
|
|
203
|
-
type: '
|
|
216
|
+
type: 'prevMonth'
|
|
217
|
+
});
|
|
218
|
+
}, [triggerOnChange]);
|
|
219
|
+
const handleClickPrevYear = useCallback(() => {
|
|
220
|
+
const {
|
|
221
|
+
day,
|
|
222
|
+
month,
|
|
223
|
+
year
|
|
224
|
+
} = dateRef.current;
|
|
225
|
+
triggerOnChange({
|
|
226
|
+
day,
|
|
227
|
+
month,
|
|
228
|
+
year: year - 1,
|
|
229
|
+
type: 'prevYear'
|
|
204
230
|
});
|
|
205
231
|
}, [triggerOnChange]);
|
|
206
232
|
return {
|
|
207
233
|
navigate,
|
|
208
|
-
|
|
209
|
-
|
|
234
|
+
handleClickNextMonth,
|
|
235
|
+
handleClickNextYear,
|
|
236
|
+
handleClickPrevMonth,
|
|
237
|
+
handleClickPrevYear
|
|
210
238
|
};
|
|
211
239
|
}
|
package/dist/esm/calendar.js
CHANGED
|
@@ -28,7 +28,7 @@ var styles = {
|
|
|
28
28
|
var analyticsAttributes = {
|
|
29
29
|
componentName: 'calendar',
|
|
30
30
|
packageName: "@atlaskit/calendar",
|
|
31
|
-
packageVersion: "16.
|
|
31
|
+
packageVersion: "16.2.1"
|
|
32
32
|
};
|
|
33
33
|
var InnerCalendar = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
|
|
34
34
|
var day = _ref.day,
|
|
@@ -120,8 +120,10 @@ var InnerCalendar = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
|
|
|
120
120
|
onChange: onChangeWithAnalytics
|
|
121
121
|
}),
|
|
122
122
|
navigate = _useHandleDateChange.navigate,
|
|
123
|
-
|
|
124
|
-
|
|
123
|
+
handleClickNextMonth = _useHandleDateChange.handleClickNextMonth,
|
|
124
|
+
handleClickNextYear = _useHandleDateChange.handleClickNextYear,
|
|
125
|
+
handleClickPrevMonth = _useHandleDateChange.handleClickPrevMonth,
|
|
126
|
+
handleClickPrevYear = _useHandleDateChange.handleClickPrevYear;
|
|
125
127
|
var onSelectWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
|
|
126
128
|
fn: onSelect,
|
|
127
129
|
action: 'selected',
|
|
@@ -165,20 +167,32 @@ var InnerCalendar = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
|
|
|
165
167
|
daysLong: daysLong,
|
|
166
168
|
weekStartDay: weekStartDay
|
|
167
169
|
});
|
|
168
|
-
var
|
|
170
|
+
var getNextMonthHeading = function getNextMonthHeading() {
|
|
169
171
|
// Next month is (currentMonth - 1) + 1, or just currentMonth in this
|
|
170
172
|
// instance.
|
|
171
173
|
var nextMonth = monthValue % 12;
|
|
172
174
|
var showNextYear = monthValue === 12;
|
|
173
175
|
return "".concat(monthsLong[nextMonth], " ").concat(showNextYear ? yearValue + 1 : yearValue);
|
|
174
176
|
};
|
|
175
|
-
var
|
|
177
|
+
var getNextYearHeading = function getNextYearHeading() {
|
|
178
|
+
// Months are held in Date object as zero-indexed
|
|
179
|
+
var thisMonth = (monthValue - 1) % 12;
|
|
180
|
+
var nextYear = yearValue + 1;
|
|
181
|
+
return "".concat(monthsLong[thisMonth], " ").concat(nextYear);
|
|
182
|
+
};
|
|
183
|
+
var getPreviousMonthHeading = function getPreviousMonthHeading() {
|
|
176
184
|
// Previous month is (monthValue - 1) - 1. Need to add 12 so the modulo
|
|
177
185
|
// works as expected and stays positive.
|
|
178
186
|
var previousMonth = (monthValue + 12 - 2) % 12;
|
|
179
187
|
var showPreviousYear = monthValue === 1;
|
|
180
188
|
return "".concat(monthsLong[previousMonth], " ").concat(showPreviousYear ? yearValue - 1 : yearValue);
|
|
181
189
|
};
|
|
190
|
+
var getPreviousYearHeading = function getPreviousYearHeading() {
|
|
191
|
+
// Months are held in Date object as zero-indexed
|
|
192
|
+
var thisMonth = (monthValue - 1) % 12;
|
|
193
|
+
var previousYear = yearValue - 1;
|
|
194
|
+
return "".concat(monthsLong[thisMonth], " ").concat(previousYear);
|
|
195
|
+
};
|
|
182
196
|
var headerId = useId();
|
|
183
197
|
return (
|
|
184
198
|
/*#__PURE__*/
|
|
@@ -208,10 +222,14 @@ var InnerCalendar = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
|
|
|
208
222
|
year: yearValue,
|
|
209
223
|
nextMonthLabel: nextMonthLabel,
|
|
210
224
|
previousMonthLabel: previousMonthLabel,
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
225
|
+
nextMonthHeading: getNextMonthHeading(),
|
|
226
|
+
nextYearHeading: getNextYearHeading(),
|
|
227
|
+
previousMonthHeading: getPreviousMonthHeading(),
|
|
228
|
+
previousYearHeading: getPreviousYearHeading(),
|
|
229
|
+
handleClickNextMonth: handleClickNextMonth,
|
|
230
|
+
handleClickNextYear: handleClickNextYear,
|
|
231
|
+
handleClickPrevMonth: handleClickPrevMonth,
|
|
232
|
+
handleClickPrevYear: handleClickPrevYear,
|
|
215
233
|
headerId: headerId,
|
|
216
234
|
tabIndex: tabIndex,
|
|
217
235
|
testId: testId
|
|
@@ -3,20 +3,33 @@ import React, { memo, useState } from 'react';
|
|
|
3
3
|
import { IconButton } from '@atlaskit/button/new';
|
|
4
4
|
import { useId } from '@atlaskit/ds-lib/use-id';
|
|
5
5
|
import Heading from '@atlaskit/heading';
|
|
6
|
-
import
|
|
7
|
-
import
|
|
6
|
+
import ChevronDoubleLeftIcon from '@atlaskit/icon/utility/chevron-double-left';
|
|
7
|
+
import ChevronDoubleRightIcon from '@atlaskit/icon/utility/chevron-double-right';
|
|
8
|
+
import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
|
|
9
|
+
import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
|
|
10
|
+
import ChevronOldLeftIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
|
|
11
|
+
import ChevronOldRightIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
|
|
12
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
13
|
import { Box, Inline } from '@atlaskit/primitives/compiled';
|
|
9
14
|
var Header = /*#__PURE__*/memo(function Header(_ref) {
|
|
10
15
|
var monthLongTitle = _ref.monthLongTitle,
|
|
11
16
|
year = _ref.year,
|
|
12
17
|
_ref$previousMonthLab = _ref.previousMonthLabel,
|
|
13
18
|
previousMonthLabel = _ref$previousMonthLab === void 0 ? 'Previous month' : _ref$previousMonthLab,
|
|
14
|
-
|
|
19
|
+
_ref$previousYearLabe = _ref.previousYearLabel,
|
|
20
|
+
previousYearLabel = _ref$previousYearLabe === void 0 ? 'Previous year' : _ref$previousYearLabe,
|
|
21
|
+
previousMonthHeading = _ref.previousMonthHeading,
|
|
22
|
+
previousYearHeading = _ref.previousYearHeading,
|
|
15
23
|
_ref$nextMonthLabel = _ref.nextMonthLabel,
|
|
16
24
|
nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
25
|
+
_ref$nextYearLabel = _ref.nextYearLabel,
|
|
26
|
+
nextYearLabel = _ref$nextYearLabel === void 0 ? 'Next year' : _ref$nextYearLabel,
|
|
27
|
+
nextMonthHeading = _ref.nextMonthHeading,
|
|
28
|
+
nextYearHeading = _ref.nextYearHeading,
|
|
29
|
+
handleClickPrevMonth = _ref.handleClickPrevMonth,
|
|
30
|
+
handleClickPrevYear = _ref.handleClickPrevYear,
|
|
31
|
+
handleClickNextMonth = _ref.handleClickNextMonth,
|
|
32
|
+
handleClickNextYear = _ref.handleClickNextYear,
|
|
20
33
|
headerId = _ref.headerId,
|
|
21
34
|
tabIndex = _ref.tabIndex,
|
|
22
35
|
testId = _ref.testId;
|
|
@@ -31,19 +44,31 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
|
|
|
31
44
|
// datetime picker).
|
|
32
45
|
var _useState = useState(false),
|
|
33
46
|
_useState2 = _slicedToArray(_useState, 2),
|
|
34
|
-
|
|
35
|
-
|
|
47
|
+
hasInteractedWithMonthOrYear = _useState2[0],
|
|
48
|
+
setHasInteractedWithMonthOrYear = _useState2[1];
|
|
36
49
|
var handlePrevMonthInteraction = function handlePrevMonthInteraction(e) {
|
|
37
|
-
if (!
|
|
38
|
-
|
|
50
|
+
if (!hasInteractedWithMonthOrYear) {
|
|
51
|
+
setHasInteractedWithMonthOrYear(true);
|
|
39
52
|
}
|
|
40
|
-
|
|
53
|
+
handleClickPrevMonth(e);
|
|
54
|
+
};
|
|
55
|
+
var handlePrevYearInteraction = function handlePrevYearInteraction(e) {
|
|
56
|
+
if (!hasInteractedWithMonthOrYear) {
|
|
57
|
+
setHasInteractedWithMonthOrYear(true);
|
|
58
|
+
}
|
|
59
|
+
handleClickPrevYear(e);
|
|
41
60
|
};
|
|
42
61
|
var handleNextMonthInteraction = function handleNextMonthInteraction(e) {
|
|
43
|
-
if (!
|
|
44
|
-
|
|
62
|
+
if (!hasInteractedWithMonthOrYear) {
|
|
63
|
+
setHasInteractedWithMonthOrYear(true);
|
|
64
|
+
}
|
|
65
|
+
handleClickNextMonth(e);
|
|
66
|
+
};
|
|
67
|
+
var handleNextYearInteraction = function handleNextYearInteraction(e) {
|
|
68
|
+
if (!hasInteractedWithMonthOrYear) {
|
|
69
|
+
setHasInteractedWithMonthOrYear(true);
|
|
45
70
|
}
|
|
46
|
-
|
|
71
|
+
handleClickNextYear(e);
|
|
47
72
|
};
|
|
48
73
|
return /*#__PURE__*/React.createElement(Box, {
|
|
49
74
|
paddingInline: "space.100"
|
|
@@ -51,16 +76,35 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
|
|
|
51
76
|
space: "space.0",
|
|
52
77
|
alignBlock: "center",
|
|
53
78
|
spread: "space-between"
|
|
79
|
+
}, fg('dst-a11y-add-year-buttons-to-calendar') ? /*#__PURE__*/React.createElement(Inline, {
|
|
80
|
+
space: "space.100",
|
|
81
|
+
alignBlock: "start"
|
|
54
82
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
83
|
+
appearance: "subtle",
|
|
84
|
+
spacing: "compact",
|
|
85
|
+
tabIndex: tabIndex,
|
|
86
|
+
onClick: handlePrevYearInteraction,
|
|
87
|
+
testId: testId && "".concat(testId, "--previous-year"),
|
|
88
|
+
icon: ChevronDoubleLeftIcon,
|
|
89
|
+
label: "".concat(previousYearLabel, ", ").concat(previousYearHeading)
|
|
90
|
+
}), /*#__PURE__*/React.createElement(IconButton, {
|
|
55
91
|
appearance: "subtle",
|
|
56
92
|
spacing: "compact",
|
|
57
93
|
tabIndex: tabIndex,
|
|
58
94
|
onClick: handlePrevMonthInteraction,
|
|
59
95
|
testId: testId && "".concat(testId, "--previous-month"),
|
|
60
96
|
icon: ChevronLeftIcon,
|
|
61
|
-
label: "".concat(previousMonthLabel, ", ").concat(
|
|
97
|
+
label: "".concat(previousMonthLabel, ", ").concat(previousMonthHeading)
|
|
98
|
+
})) : /*#__PURE__*/React.createElement(IconButton, {
|
|
99
|
+
appearance: "subtle",
|
|
100
|
+
spacing: "compact",
|
|
101
|
+
tabIndex: tabIndex,
|
|
102
|
+
onClick: handlePrevMonthInteraction,
|
|
103
|
+
testId: testId && "".concat(testId, "--previous-month"),
|
|
104
|
+
icon: ChevronOldLeftIcon,
|
|
105
|
+
label: "".concat(previousMonthLabel, ", ").concat(previousMonthHeading)
|
|
62
106
|
}), /*#__PURE__*/React.createElement(Box, {
|
|
63
|
-
"aria-live":
|
|
107
|
+
"aria-live": hasInteractedWithMonthOrYear ? 'polite' : undefined,
|
|
64
108
|
id: announceId,
|
|
65
109
|
testId: testId && "".concat(testId, "--current-month-year--container")
|
|
66
110
|
}, /*#__PURE__*/React.createElement(Heading, {
|
|
@@ -68,14 +112,33 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
|
|
|
68
112
|
as: "h2",
|
|
69
113
|
id: headerId,
|
|
70
114
|
testId: testId && "".concat(testId, "--current-month-year")
|
|
71
|
-
}, "".concat(monthLongTitle, " ").concat(year))), /*#__PURE__*/React.createElement(
|
|
115
|
+
}, "".concat(monthLongTitle, " ").concat(year))), fg('dst-a11y-add-year-buttons-to-calendar') ? /*#__PURE__*/React.createElement(Inline, {
|
|
116
|
+
space: "space.100",
|
|
117
|
+
alignBlock: "end"
|
|
118
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
72
119
|
appearance: "subtle",
|
|
73
120
|
spacing: "compact",
|
|
74
121
|
tabIndex: tabIndex,
|
|
75
122
|
onClick: handleNextMonthInteraction,
|
|
76
123
|
testId: testId && "".concat(testId, "--next-month"),
|
|
77
124
|
icon: ChevronRightIcon,
|
|
78
|
-
label: "".concat(nextMonthLabel, ", ").concat(
|
|
125
|
+
label: "".concat(nextMonthLabel, ", ").concat(nextMonthHeading)
|
|
126
|
+
}), /*#__PURE__*/React.createElement(IconButton, {
|
|
127
|
+
appearance: "subtle",
|
|
128
|
+
spacing: "compact",
|
|
129
|
+
tabIndex: tabIndex,
|
|
130
|
+
onClick: handleNextYearInteraction,
|
|
131
|
+
testId: testId && "".concat(testId, "--next-year"),
|
|
132
|
+
icon: ChevronDoubleRightIcon,
|
|
133
|
+
label: "".concat(nextYearLabel, ", ").concat(nextYearHeading)
|
|
134
|
+
})) : /*#__PURE__*/React.createElement(IconButton, {
|
|
135
|
+
appearance: "subtle",
|
|
136
|
+
spacing: "compact",
|
|
137
|
+
tabIndex: tabIndex,
|
|
138
|
+
onClick: handleNextMonthInteraction,
|
|
139
|
+
testId: testId && "".concat(testId, "--next-month"),
|
|
140
|
+
icon: ChevronOldRightIcon,
|
|
141
|
+
label: "".concat(nextMonthLabel, ", ").concat(nextMonthHeading)
|
|
79
142
|
})));
|
|
80
143
|
});
|
|
81
144
|
Header.displayName = 'Header';
|
|
@@ -176,7 +176,7 @@ export default function useHandleDateChange(_ref) {
|
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
178
|
}, [triggerOnChange]);
|
|
179
|
-
var
|
|
179
|
+
var handleClickNextMonth = useCallback(function () {
|
|
180
180
|
var _dateRef$current$getN = _objectSpread(_objectSpread({}, dateRef.current), getNextMonth(dateRef.current.month, dateRef.current.year)),
|
|
181
181
|
day = _dateRef$current$getN.day,
|
|
182
182
|
month = _dateRef$current$getN.month,
|
|
@@ -185,10 +185,22 @@ export default function useHandleDateChange(_ref) {
|
|
|
185
185
|
day: day,
|
|
186
186
|
month: month,
|
|
187
187
|
year: year,
|
|
188
|
-
type: '
|
|
188
|
+
type: 'nextMonth'
|
|
189
189
|
});
|
|
190
190
|
}, [triggerOnChange]);
|
|
191
|
-
var
|
|
191
|
+
var handleClickNextYear = useCallback(function () {
|
|
192
|
+
var _dateRef$current2 = dateRef.current,
|
|
193
|
+
day = _dateRef$current2.day,
|
|
194
|
+
month = _dateRef$current2.month,
|
|
195
|
+
year = _dateRef$current2.year;
|
|
196
|
+
triggerOnChange({
|
|
197
|
+
day: day,
|
|
198
|
+
month: month,
|
|
199
|
+
year: year + 1,
|
|
200
|
+
type: 'nextYear'
|
|
201
|
+
});
|
|
202
|
+
}, [triggerOnChange]);
|
|
203
|
+
var handleClickPrevMonth = useCallback(function () {
|
|
192
204
|
var _dateRef$current$getP = _objectSpread(_objectSpread({}, dateRef.current), getPrevMonth(dateRef.current.month, dateRef.current.year)),
|
|
193
205
|
day = _dateRef$current$getP.day,
|
|
194
206
|
month = _dateRef$current$getP.month,
|
|
@@ -197,12 +209,26 @@ export default function useHandleDateChange(_ref) {
|
|
|
197
209
|
day: day,
|
|
198
210
|
month: month,
|
|
199
211
|
year: year,
|
|
200
|
-
type: '
|
|
212
|
+
type: 'prevMonth'
|
|
213
|
+
});
|
|
214
|
+
}, [triggerOnChange]);
|
|
215
|
+
var handleClickPrevYear = useCallback(function () {
|
|
216
|
+
var _dateRef$current3 = dateRef.current,
|
|
217
|
+
day = _dateRef$current3.day,
|
|
218
|
+
month = _dateRef$current3.month,
|
|
219
|
+
year = _dateRef$current3.year;
|
|
220
|
+
triggerOnChange({
|
|
221
|
+
day: day,
|
|
222
|
+
month: month,
|
|
223
|
+
year: year - 1,
|
|
224
|
+
type: 'prevYear'
|
|
201
225
|
});
|
|
202
226
|
}, [triggerOnChange]);
|
|
203
227
|
return {
|
|
204
228
|
navigate: navigate,
|
|
205
|
-
|
|
206
|
-
|
|
229
|
+
handleClickNextMonth: handleClickNextMonth,
|
|
230
|
+
handleClickNextYear: handleClickNextYear,
|
|
231
|
+
handleClickPrevMonth: handleClickPrevMonth,
|
|
232
|
+
handleClickPrevYear: handleClickPrevYear
|
|
207
233
|
};
|
|
208
234
|
}
|
|
@@ -3,12 +3,18 @@ import { type TabIndex } from '../../types';
|
|
|
3
3
|
interface HeaderProps {
|
|
4
4
|
monthLongTitle: string;
|
|
5
5
|
year: number;
|
|
6
|
-
previousMonthLabel?: string;
|
|
7
|
-
previousHeading: string;
|
|
8
6
|
nextMonthLabel?: string;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
nextYearLabel?: string;
|
|
8
|
+
nextMonthHeading: string;
|
|
9
|
+
nextYearHeading: string;
|
|
10
|
+
previousMonthLabel?: string;
|
|
11
|
+
previousYearLabel?: string;
|
|
12
|
+
previousMonthHeading: string;
|
|
13
|
+
previousYearHeading: string;
|
|
14
|
+
handleClickNextMonth: (e: React.MouseEvent<HTMLElement>) => void;
|
|
15
|
+
handleClickNextYear: (e: React.MouseEvent<HTMLElement>) => void;
|
|
16
|
+
handleClickPrevMonth: (e: React.MouseEvent<HTMLElement>) => void;
|
|
17
|
+
handleClickPrevYear: (e: React.MouseEvent<HTMLElement>) => void;
|
|
12
18
|
headerId: string;
|
|
13
19
|
tabIndex?: TabIndex;
|
|
14
20
|
testId?: string;
|
|
@@ -8,6 +8,8 @@ export default function useHandleDateChange({ day: [dayValue, setDayValue], mont
|
|
|
8
8
|
onChange: (event: ChangeEvent) => void;
|
|
9
9
|
}): {
|
|
10
10
|
navigate: (type: ArrowKeys) => void;
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
handleClickNextMonth: () => void;
|
|
12
|
+
handleClickNextYear: () => void;
|
|
13
|
+
handleClickPrevMonth: () => void;
|
|
14
|
+
handleClickPrevYear: () => void;
|
|
13
15
|
};
|
package/dist/types/types.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
|
5
5
|
export type TabIndex = -1 | 0;
|
|
6
6
|
export type ChangeEvent = {
|
|
7
7
|
iso: ISODate;
|
|
8
|
-
type: 'left' | 'up' | 'right' | 'down' | '
|
|
8
|
+
type: 'left' | 'up' | 'right' | 'down' | 'prevMonth' | 'prevYear' | 'nextMonth' | 'nextYear';
|
|
9
9
|
} & DateObj;
|
|
10
10
|
export type SelectEvent = {
|
|
11
11
|
iso: ISODate;
|
|
@@ -3,12 +3,18 @@ import { type TabIndex } from '../../types';
|
|
|
3
3
|
interface HeaderProps {
|
|
4
4
|
monthLongTitle: string;
|
|
5
5
|
year: number;
|
|
6
|
-
previousMonthLabel?: string;
|
|
7
|
-
previousHeading: string;
|
|
8
6
|
nextMonthLabel?: string;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
nextYearLabel?: string;
|
|
8
|
+
nextMonthHeading: string;
|
|
9
|
+
nextYearHeading: string;
|
|
10
|
+
previousMonthLabel?: string;
|
|
11
|
+
previousYearLabel?: string;
|
|
12
|
+
previousMonthHeading: string;
|
|
13
|
+
previousYearHeading: string;
|
|
14
|
+
handleClickNextMonth: (e: React.MouseEvent<HTMLElement>) => void;
|
|
15
|
+
handleClickNextYear: (e: React.MouseEvent<HTMLElement>) => void;
|
|
16
|
+
handleClickPrevMonth: (e: React.MouseEvent<HTMLElement>) => void;
|
|
17
|
+
handleClickPrevYear: (e: React.MouseEvent<HTMLElement>) => void;
|
|
12
18
|
headerId: string;
|
|
13
19
|
tabIndex?: TabIndex;
|
|
14
20
|
testId?: string;
|
|
@@ -20,6 +20,8 @@ export default function useHandleDateChange({ day: [dayValue, setDayValue], mont
|
|
|
20
20
|
onChange: (event: ChangeEvent) => void;
|
|
21
21
|
}): {
|
|
22
22
|
navigate: (type: ArrowKeys) => void;
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
handleClickNextMonth: () => void;
|
|
24
|
+
handleClickNextYear: () => void;
|
|
25
|
+
handleClickPrevMonth: () => void;
|
|
26
|
+
handleClickPrevYear: () => void;
|
|
25
27
|
};
|
|
@@ -5,7 +5,7 @@ export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
|
5
5
|
export type TabIndex = -1 | 0;
|
|
6
6
|
export type ChangeEvent = {
|
|
7
7
|
iso: ISODate;
|
|
8
|
-
type: 'left' | 'up' | 'right' | 'down' | '
|
|
8
|
+
type: 'left' | 'up' | 'right' | 'down' | 'prevMonth' | 'prevYear' | 'nextMonth' | 'nextYear';
|
|
9
9
|
} & DateObj;
|
|
10
10
|
export type SelectEvent = {
|
|
11
11
|
iso: ISODate;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/calendar",
|
|
3
|
-
"version": "16.
|
|
3
|
+
"version": "16.2.1",
|
|
4
4
|
"description": "An interactive calendar for date selection experiences.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -30,11 +30,12 @@
|
|
|
30
30
|
"@atlaskit/css": "^0.7.0",
|
|
31
31
|
"@atlaskit/ds-lib": "^3.3.0",
|
|
32
32
|
"@atlaskit/heading": "^4.0.0",
|
|
33
|
-
"@atlaskit/icon": "^23.
|
|
33
|
+
"@atlaskit/icon": "^23.4.0",
|
|
34
34
|
"@atlaskit/locale": "^2.8.0",
|
|
35
|
+
"@atlaskit/platform-feature-flags": "*",
|
|
35
36
|
"@atlaskit/primitives": "^13.3.0",
|
|
36
37
|
"@atlaskit/theme": "^14.0.0",
|
|
37
|
-
"@atlaskit/tokens": "^3.
|
|
38
|
+
"@atlaskit/tokens": "^3.1.0",
|
|
38
39
|
"@babel/runtime": "^7.0.0",
|
|
39
40
|
"@compiled/react": "^0.18.1",
|
|
40
41
|
"date-fns": "^2.17.0"
|
|
@@ -48,6 +49,7 @@
|
|
|
48
49
|
"@af/visual-regression": "*",
|
|
49
50
|
"@atlaskit/ssr": "*",
|
|
50
51
|
"@atlaskit/visual-regression": "*",
|
|
52
|
+
"@atlassian/feature-flags-test-utils": "*",
|
|
51
53
|
"@testing-library/dom": "^10.1.0",
|
|
52
54
|
"@testing-library/react": "^12.1.5",
|
|
53
55
|
"@testing-library/user-event": "^14.4.3",
|
|
@@ -55,8 +57,7 @@
|
|
|
55
57
|
"jscodeshift": "^0.13.0",
|
|
56
58
|
"react-dom": "^16.8.0",
|
|
57
59
|
"storybook-addon-performance": "^0.17.3",
|
|
58
|
-
"typescript": "~5.4.2"
|
|
59
|
-
"wait-for-expect": "^1.2.0"
|
|
60
|
+
"typescript": "~5.4.2"
|
|
60
61
|
},
|
|
61
62
|
"techstack": {
|
|
62
63
|
"@atlassian/frontend": {
|
|
@@ -93,5 +94,10 @@
|
|
|
93
94
|
"./types": "./src/entry-points/types.tsx",
|
|
94
95
|
".": "./src/index.tsx"
|
|
95
96
|
},
|
|
97
|
+
"platform-feature-flags": {
|
|
98
|
+
"dst-a11y-add-year-buttons-to-calendar": {
|
|
99
|
+
"type": "boolean"
|
|
100
|
+
}
|
|
101
|
+
},
|
|
96
102
|
"homepage": "https://atlassian.design/components/calendar/"
|
|
97
103
|
}
|