@atlaskit/calendar 16.1.0 → 16.2.0

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.
Files changed (27) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/__perf__/examples.tsx +5 -2
  3. package/dist/cjs/calendar.js +28 -10
  4. package/dist/cjs/internal/components/date.js +2 -2
  5. package/dist/cjs/internal/components/header.js +79 -16
  6. package/dist/cjs/internal/components/week-day-grid.js +1 -1
  7. package/dist/cjs/internal/components/week-header.js +1 -1
  8. package/dist/cjs/internal/hooks/use-handle-date-change.js +32 -6
  9. package/dist/es2019/calendar.js +28 -10
  10. package/dist/es2019/internal/components/date.js +2 -2
  11. package/dist/es2019/internal/components/header.js +78 -17
  12. package/dist/es2019/internal/components/week-day-grid.js +1 -1
  13. package/dist/es2019/internal/components/week-header.js +1 -1
  14. package/dist/es2019/internal/hooks/use-handle-date-change.js +34 -6
  15. package/dist/esm/calendar.js +28 -10
  16. package/dist/esm/internal/components/date.js +2 -2
  17. package/dist/esm/internal/components/header.js +81 -18
  18. package/dist/esm/internal/components/week-day-grid.js +1 -1
  19. package/dist/esm/internal/components/week-header.js +1 -1
  20. package/dist/esm/internal/hooks/use-handle-date-change.js +32 -6
  21. package/dist/types/internal/components/header.d.ts +11 -5
  22. package/dist/types/internal/hooks/use-handle-date-change.d.ts +4 -2
  23. package/dist/types/types.d.ts +1 -1
  24. package/dist/types-ts4.5/internal/components/header.d.ts +11 -5
  25. package/dist/types-ts4.5/internal/hooks/use-handle-date-change.d.ts +4 -2
  26. package/dist/types-ts4.5/types.d.ts +1 -1
  27. package/package.json +11 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/calendar
2
2
 
3
+ ## 16.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#102000](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102000)
8
+ [`3e1546043c1c3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3e1546043c1c3) -
9
+ We are testing adding year buttons to the calendar behind a feature flag. If this fix is
10
+ successful it will be available in a later release.
11
+
12
+ ## 16.1.1
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 16.1.0
4
19
 
5
20
  ### Minor Changes
package/__perf__/examples.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
 
3
3
  import { fireEvent } from '@testing-library/dom';
4
+ import { userEvent } from '@testing-library/user-event';
4
5
  import { type InteractionTaskArgs, type PublicInteractionTask } from 'storybook-addon-performance';
5
6
 
6
7
  import Calendar from '../src';
@@ -47,16 +48,18 @@ const interactionTasks: PublicInteractionTask[] = [
47
48
  name: 'onChange',
48
49
  description: 'Render calendar and change month',
49
50
  run: async ({ container }: InteractionTaskArgs): Promise<void> => {
51
+ const user = userEvent.setup();
50
52
  const nextMonthButton = getLastElement(container, `${testId}--next-month`);
51
- fireEvent.click(nextMonthButton);
53
+ await user.click(nextMonthButton);
52
54
  },
53
55
  },
54
56
  {
55
57
  name: 'onSelect',
56
58
  description: 'Render calendar and click on day(date) cell',
57
59
  run: async ({ container }: InteractionTaskArgs): Promise<void> => {
60
+ const user = userEvent.setup();
58
61
  const dateCell = getLastElement(container, `${testId}--selected-day`);
59
- fireEvent.click(dateCell);
62
+ await user.click(dateCell);
60
63
  },
61
64
  },
62
65
  ];
package/dist/cjs/calendar.js CHANGED
@@ -1,4 +1,4 @@
1
- /* calendar.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* calendar.tsx generated by @compiled/babel-plugin v0.35.0 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -38,7 +38,7 @@ var styles = {
38
38
  var analyticsAttributes = {
39
39
  componentName: 'calendar',
40
40
  packageName: "@atlaskit/calendar",
41
- packageVersion: "16.1.0"
41
+ packageVersion: "16.2.0"
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
- handleClickNext = _useHandleDateChange.handleClickNext,
134
- handleClickPrev = _useHandleDateChange.handleClickPrev;
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 getNextHeading = function getNextHeading() {
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 getPreviousHeading = function getPreviousHeading() {
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
- nextHeading: getNextHeading(),
222
- previousHeading: getPreviousHeading(),
223
- handleClickNext: handleClickNext,
224
- handleClickPrev: handleClickPrev,
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
package/dist/cjs/internal/components/date.js CHANGED
@@ -1,4 +1,4 @@
1
- /* date.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* date.tsx generated by @compiled/babel-plugin v0.35.0 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -98,7 +98,7 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
98
98
  "data-sibling": isSibling || undefined,
99
99
  "data-today": isToday || undefined,
100
100
  "data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(testId, "--day")),
101
- className: (0, _runtime.ax)(["_1e0c1ule _1yt432tv _kqswh2mm _16jlkb7n _kkk2n7od _bfhk18uv _1h6d1j28 _2rko1l7b _1dqonqa1 _189eyh40 _syazovqm _80omtlke _11c81oud _y3gn1h6o _pojj3zdg _10knnqa1 _1wysyh40 _irr32tgk _30l3ovqm _1di618xb _9h8hovqm", isSibling && "_syazpsu8 _30l3psu8", isToday && "_syazln51 _k48p1igg _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk1kxl _syaz1a5u _30l31a5u", isSelected && "_bfhky9dz _syaz11g7 _irr3j4m7 _30l3dgff", isDisabled && "_syazf50w _80om13gf _irr318uv _30l3f50w"]),
101
+ className: (0, _runtime.ax)(["_kkk2n7od _1yt432tv _2rko1l7b _11c81oud _1h6d1j28 _1dqonqa1 _189eyh40 _1e0c1ule _kqswh2mm _16jlkb7n _bfhk18uv _syazovqm _80omtlke _y3gn1h6o _pojj3zdg _10knnqa1 _1wysyh40 _irr32tgk _30l3ovqm _1di618xb _9h8hovqm", isSibling && "_syazpsu8 _30l3psu8", isToday && "_syazln51 _k48p1igg _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk1kxl _syaz1a5u _30l31a5u", isSelected && "_bfhky9dz _syaz11g7 _irr3j4m7 _30l3dgff", isDisabled && "_syazf50w _80om13gf _irr318uv _30l3f50w"]),
102
102
  style: {
103
103
  "--_1arop38": (0, _runtime.ix)("var(--ds-space-050, 4px)".concat(" 9px")),
104
104
  "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
package/dist/cjs/internal/components/header.js CHANGED
@@ -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
- previousHeading = _ref.previousHeading,
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
- nextHeading = _ref.nextHeading,
28
- handleClickPrev = _ref.handleClickPrev,
29
- handleClickNext = _ref.handleClickNext,
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
- hasInteractedWithMonth = _useState2[0],
45
- setHasInteractedWithMonth = _useState2[1];
57
+ hasInteractedWithMonthOrYear = _useState2[0],
58
+ setHasInteractedWithMonthOrYear = _useState2[1];
46
59
  var handlePrevMonthInteraction = function handlePrevMonthInteraction(e) {
47
- if (!hasInteractedWithMonth) {
48
- setHasInteractedWithMonth(true);
60
+ if (!hasInteractedWithMonthOrYear) {
61
+ setHasInteractedWithMonthOrYear(true);
49
62
  }
50
- handleClickPrev(e);
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 (!hasInteractedWithMonth) {
54
- setHasInteractedWithMonth(true);
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
- handleClickNext(e);
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(previousHeading)
115
+ label: "".concat(previousMonthLabel, ", ").concat(previousMonthHeading)
72
116
  }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
73
- "aria-live": hasInteractedWithMonth ? 'polite' : undefined,
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(_new.IconButton, {
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(nextHeading)
151
+ label: "".concat(nextMonthLabel, ", ").concat(nextMonthHeading)
89
152
  })));
90
153
  });
91
154
  Header.displayName = 'Header';
package/dist/cjs/internal/components/week-day-grid.js CHANGED
@@ -1,4 +1,4 @@
1
- /* week-day-grid.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* week-day-grid.tsx generated by @compiled/babel-plugin v0.35.0 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
package/dist/cjs/internal/components/week-header.js CHANGED
@@ -1,4 +1,4 @@
1
- /* week-header.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* week-header.tsx generated by @compiled/babel-plugin v0.35.0 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
package/dist/cjs/internal/hooks/use-handle-date-change.js CHANGED
@@ -183,7 +183,7 @@ function useHandleDateChange(_ref) {
183
183
  }
184
184
  }
185
185
  }, [triggerOnChange]);
186
- var handleClickNext = (0, _react.useCallback)(function () {
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: 'next'
195
+ type: 'nextMonth'
196
196
  });
197
197
  }, [triggerOnChange]);
198
- var handleClickPrev = (0, _react.useCallback)(function () {
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: 'prev'
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
- handleClickNext: handleClickNext,
213
- handleClickPrev: handleClickPrev
236
+ handleClickNextMonth: handleClickNextMonth,
237
+ handleClickNextYear: handleClickNextYear,
238
+ handleClickPrevMonth: handleClickPrevMonth,
239
+ handleClickPrevYear: handleClickPrevYear
214
240
  };
215
241
  }
package/dist/es2019/calendar.js CHANGED
@@ -1,4 +1,4 @@
1
- /* calendar.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* calendar.tsx generated by @compiled/babel-plugin v0.35.0 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import "./calendar.compiled.css";
4
4
  import * as React from 'react';
@@ -24,7 +24,7 @@ const styles = {
24
24
  const analyticsAttributes = {
25
25
  componentName: 'calendar',
26
26
  packageName: "@atlaskit/calendar",
27
- packageVersion: "16.1.0"
27
+ packageVersion: "16.2.0"
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
- handleClickNext,
90
- handleClickPrev
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 getNextHeading = () => {
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 getPreviousHeading = () => {
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
- nextHeading: getNextHeading(),
189
- previousHeading: getPreviousHeading(),
190
- handleClickNext: handleClickNext,
191
- handleClickPrev: handleClickPrev,
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
package/dist/es2019/internal/components/date.js CHANGED
@@ -1,4 +1,4 @@
1
- /* date.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* date.tsx generated by @compiled/babel-plugin v0.35.0 */
2
2
  import "./date.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -83,7 +83,7 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
83
83
  "data-sibling": isSibling || undefined,
84
84
  "data-today": isToday || undefined,
85
85
  "data-testid": testId && (isSelected ? `${testId}--selected-day` : `${testId}--day`),
86
- className: ax(["_1e0c1ule _1yt41qfp _kqswh2mm _16jlkb7n _kkk2n7od _bfhk18uv _1h6d1j28 _2rko1l7b _1dqonqa1 _189eyh40 _syazj3m3 _80omtlke _11c81oud _y3gn1h6o _pojj194a _10knnqa1 _1wysyh40 _irr314ae _30l3j3m3 _1di61l7b _9h8hj3m3", isSibling && "_syaz1wmz _30l31wmz", isToday && "_syaz1ldt _k48p1igg _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk29zg _syazc8hx _30l3c8hx", isSelected && "_bfhk1p4p _syazqueg _irr3quvt _30l31uqy", isDisabled && "_syaz7dlb _80om13gf _irr318uv _30l37dlb"])
86
+ className: ax(["_kkk2n7od _1yt41qfp _2rko1l7b _11c81oud _1h6d1j28 _1dqonqa1 _189eyh40 _1e0c1ule _kqswh2mm _16jlkb7n _bfhk18uv _syazj3m3 _80omtlke _y3gn1h6o _pojj194a _10knnqa1 _1wysyh40 _irr314ae _30l3j3m3 _1di61l7b _9h8hj3m3", isSibling && "_syaz1wmz _30l31wmz", isToday && "_syaz1ldt _k48p1igg _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk29zg _syazc8hx _30l3c8hx", isSelected && "_bfhk1p4p _syazqueg _irr3quvt _30l31uqy", isDisabled && "_syaz7dlb _80om13gf _irr318uv _30l37dlb"])
87
87
  }, day));
88
88
  }));
89
89
  Date.displayName = 'Date';
package/dist/es2019/internal/components/header.js CHANGED
@@ -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 ChevronLeftIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
6
- import ChevronRightIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
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
- previousHeading,
17
+ previousYearLabel = 'Previous year',
18
+ previousMonthHeading,
19
+ previousYearHeading,
13
20
  nextMonthLabel = 'Next month',
14
- nextHeading,
15
- handleClickPrev,
16
- handleClickNext,
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 [hasInteractedWithMonth, setHasInteractedWithMonth] = useState(false);
41
+ const [hasInteractedWithMonthOrYear, setHasInteractedWithMonthOrYear] = useState(false);
31
42
  const handlePrevMonthInteraction = e => {
32
- if (!hasInteractedWithMonth) {
33
- setHasInteractedWithMonth(true);
43
+ if (!hasInteractedWithMonthOrYear) {
44
+ setHasInteractedWithMonthOrYear(true);
34
45
  }
35
- handleClickPrev(e);
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 (!hasInteractedWithMonth) {
39
- setHasInteractedWithMonth(true);
55
+ if (!hasInteractedWithMonthOrYear) {
56
+ setHasInteractedWithMonthOrYear(true);
57
+ }
58
+ handleClickNextMonth(e);
59
+ };
60
+ const handleNextYearInteraction = e => {
61
+ if (!hasInteractedWithMonthOrYear) {
62
+ setHasInteractedWithMonthOrYear(true);
40
63
  }
41
- handleClickNext(e);
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}, ${previousHeading}`
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": hasInteractedWithMonth ? 'polite' : undefined,
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(IconButton, {
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}, ${nextHeading}`
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';
package/dist/es2019/internal/components/week-day-grid.js CHANGED
@@ -1,4 +1,4 @@
1
- /* week-day-grid.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* week-day-grid.tsx generated by @compiled/babel-plugin v0.35.0 */
2
2
  import "./week-day-grid.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
package/dist/es2019/internal/components/week-header.js CHANGED
@@ -1,4 +1,4 @@
1
- /* week-header.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* week-header.tsx generated by @compiled/babel-plugin v0.35.0 */
2
2
  import "./week-header.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
package/dist/es2019/internal/hooks/use-handle-date-change.js CHANGED
@@ -171,7 +171,7 @@ export default function useHandleDateChange({
171
171
  }
172
172
  }
173
173
  }, [triggerOnChange]);
174
- const handleClickNext = useCallback(() => {
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: 'next'
187
+ type: 'nextMonth'
188
188
  });
189
189
  }, [triggerOnChange]);
190
- const handleClickPrev = useCallback(() => {
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: 'prev'
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
- handleClickNext,
209
- handleClickPrev
234
+ handleClickNextMonth,
235
+ handleClickNextYear,
236
+ handleClickPrevMonth,
237
+ handleClickPrevYear
210
238
  };
211
239
  }
package/dist/esm/calendar.js CHANGED
@@ -1,4 +1,4 @@
1
- /* calendar.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* calendar.tsx generated by @compiled/babel-plugin v0.35.0 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
@@ -28,7 +28,7 @@ var styles = {
28
28
  var analyticsAttributes = {
29
29
  componentName: 'calendar',
30
30
  packageName: "@atlaskit/calendar",
31
- packageVersion: "16.1.0"
31
+ packageVersion: "16.2.0"
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
- handleClickNext = _useHandleDateChange.handleClickNext,
124
- handleClickPrev = _useHandleDateChange.handleClickPrev;
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 getNextHeading = function getNextHeading() {
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 getPreviousHeading = function getPreviousHeading() {
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
- nextHeading: getNextHeading(),
212
- previousHeading: getPreviousHeading(),
213
- handleClickNext: handleClickNext,
214
- handleClickPrev: handleClickPrev,
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
package/dist/esm/internal/components/date.js CHANGED
@@ -1,4 +1,4 @@
1
- /* date.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* date.tsx generated by @compiled/babel-plugin v0.35.0 */
2
2
  import "./date.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -88,7 +88,7 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref2, _ref)
88
88
  "data-sibling": isSibling || undefined,
89
89
  "data-today": isToday || undefined,
90
90
  "data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(testId, "--day")),
91
- className: ax(["_1e0c1ule _1yt432tv _kqswh2mm _16jlkb7n _kkk2n7od _bfhk18uv _1h6d1j28 _2rko1l7b _1dqonqa1 _189eyh40 _syazovqm _80omtlke _11c81oud _y3gn1h6o _pojj3zdg _10knnqa1 _1wysyh40 _irr32tgk _30l3ovqm _1di618xb _9h8hovqm", isSibling && "_syazpsu8 _30l3psu8", isToday && "_syazln51 _k48p1igg _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk1kxl _syaz1a5u _30l31a5u", isSelected && "_bfhky9dz _syaz11g7 _irr3j4m7 _30l3dgff", isDisabled && "_syazf50w _80om13gf _irr318uv _30l3f50w"]),
91
+ className: ax(["_kkk2n7od _1yt432tv _2rko1l7b _11c81oud _1h6d1j28 _1dqonqa1 _189eyh40 _1e0c1ule _kqswh2mm _16jlkb7n _bfhk18uv _syazovqm _80omtlke _y3gn1h6o _pojj3zdg _10knnqa1 _1wysyh40 _irr32tgk _30l3ovqm _1di618xb _9h8hovqm", isSibling && "_syazpsu8 _30l3psu8", isToday && "_syazln51 _k48p1igg _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk1kxl _syaz1a5u _30l31a5u", isSelected && "_bfhky9dz _syaz11g7 _irr3j4m7 _30l3dgff", isDisabled && "_syazf50w _80om13gf _irr318uv _30l3f50w"]),
92
92
  style: {
93
93
  "--_1arop38": ix("var(--ds-space-050, 4px)".concat(" 9px")),
94
94
  "--_5xk3r4": ix("var(--ds-text, ".concat(N900, ")")),
package/dist/esm/internal/components/header.js CHANGED
@@ -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 ChevronLeftIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
7
- import ChevronRightIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
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
- previousHeading = _ref.previousHeading,
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
- nextHeading = _ref.nextHeading,
18
- handleClickPrev = _ref.handleClickPrev,
19
- handleClickNext = _ref.handleClickNext,
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
- hasInteractedWithMonth = _useState2[0],
35
- setHasInteractedWithMonth = _useState2[1];
47
+ hasInteractedWithMonthOrYear = _useState2[0],
48
+ setHasInteractedWithMonthOrYear = _useState2[1];
36
49
  var handlePrevMonthInteraction = function handlePrevMonthInteraction(e) {
37
- if (!hasInteractedWithMonth) {
38
- setHasInteractedWithMonth(true);
50
+ if (!hasInteractedWithMonthOrYear) {
51
+ setHasInteractedWithMonthOrYear(true);
39
52
  }
40
- handleClickPrev(e);
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 (!hasInteractedWithMonth) {
44
- setHasInteractedWithMonth(true);
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
- handleClickNext(e);
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(previousHeading)
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": hasInteractedWithMonth ? 'polite' : undefined,
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(IconButton, {
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(nextHeading)
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';
package/dist/esm/internal/components/week-day-grid.js CHANGED
@@ -1,4 +1,4 @@
1
- /* week-day-grid.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* week-day-grid.tsx generated by @compiled/babel-plugin v0.35.0 */
2
2
  import "./week-day-grid.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
package/dist/esm/internal/components/week-header.js CHANGED
@@ -1,4 +1,4 @@
1
- /* week-header.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* week-header.tsx generated by @compiled/babel-plugin v0.35.0 */
2
2
  import "./week-header.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
package/dist/esm/internal/hooks/use-handle-date-change.js CHANGED
@@ -176,7 +176,7 @@ export default function useHandleDateChange(_ref) {
176
176
  }
177
177
  }
178
178
  }, [triggerOnChange]);
179
- var handleClickNext = useCallback(function () {
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: 'next'
188
+ type: 'nextMonth'
189
189
  });
190
190
  }, [triggerOnChange]);
191
- var handleClickPrev = useCallback(function () {
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: 'prev'
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
- handleClickNext: handleClickNext,
206
- handleClickPrev: handleClickPrev
229
+ handleClickNextMonth: handleClickNextMonth,
230
+ handleClickNextYear: handleClickNextYear,
231
+ handleClickPrevMonth: handleClickPrevMonth,
232
+ handleClickPrevYear: handleClickPrevYear
207
233
  };
208
234
  }
package/dist/types/internal/components/header.d.ts CHANGED
@@ -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
- nextHeading: string;
10
- handleClickNext: (e: React.MouseEvent<HTMLElement>) => void;
11
- handleClickPrev: (e: React.MouseEvent<HTMLElement>) => void;
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;
package/dist/types/internal/hooks/use-handle-date-change.d.ts CHANGED
@@ -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
- handleClickNext: () => void;
12
- handleClickPrev: () => void;
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' | 'prev' | 'next';
8
+ type: 'left' | 'up' | 'right' | 'down' | 'prevMonth' | 'prevYear' | 'nextMonth' | 'nextYear';
9
9
  } & DateObj;
10
10
  export type SelectEvent = {
11
11
  iso: ISODate;
package/dist/types-ts4.5/internal/components/header.d.ts CHANGED
@@ -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
- nextHeading: string;
10
- handleClickNext: (e: React.MouseEvent<HTMLElement>) => void;
11
- handleClickPrev: (e: React.MouseEvent<HTMLElement>) => void;
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;
package/dist/types-ts4.5/internal/hooks/use-handle-date-change.d.ts CHANGED
@@ -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
- handleClickNext: () => void;
24
- handleClickPrev: () => void;
23
+ handleClickNextMonth: () => void;
24
+ handleClickNextYear: () => void;
25
+ handleClickPrevMonth: () => void;
26
+ handleClickPrevYear: () => void;
25
27
  };
package/dist/types-ts4.5/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' | 'prev' | 'next';
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.1.0",
3
+ "version": "16.2.0",
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.1.0",
33
+ "@atlaskit/icon": "^23.3.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": "^2.5.0",
38
+ "@atlaskit/tokens": "^3.0.0",
38
39
  "@babel/runtime": "^7.0.0",
39
40
  "@compiled/react": "^0.18.1",
40
41
  "date-fns": "^2.17.0"
@@ -48,8 +49,10 @@
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",
55
+ "@testing-library/user-event": "^14.4.3",
53
56
  "jest-in-case": "^1.0.2",
54
57
  "jscodeshift": "^0.13.0",
55
58
  "react-dom": "^16.8.0",
@@ -92,5 +95,10 @@
92
95
  "./types": "./src/entry-points/types.tsx",
93
96
  ".": "./src/index.tsx"
94
97
  },
98
+ "platform-feature-flags": {
99
+ "dst-a11y-add-year-buttons-to-calendar": {
100
+ "type": "boolean"
101
+ }
102
+ },
95
103
  "homepage": "https://atlassian.design/components/calendar/"
96
104
  }