@atlaskit/calendar 13.2.2 → 13.3.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 (21) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/calendar.js +8 -21
  3. package/dist/cjs/internal/components/date.js +3 -20
  4. package/dist/cjs/internal/components/header.js +13 -18
  5. package/dist/cjs/internal/components/week-header.js +1 -2
  6. package/dist/cjs/internal/hooks/use-get-weeks.js +2 -2
  7. package/dist/cjs/internal/hooks/use-handle-date-change.js +2 -2
  8. package/dist/cjs/internal/styles/date.js +27 -25
  9. package/dist/es2019/calendar.js +7 -18
  10. package/dist/es2019/internal/components/date.js +3 -20
  11. package/dist/es2019/internal/components/header.js +13 -18
  12. package/dist/es2019/internal/components/week-header.js +1 -2
  13. package/dist/es2019/internal/styles/date.js +1 -3
  14. package/dist/esm/calendar.js +9 -22
  15. package/dist/esm/internal/components/date.js +3 -20
  16. package/dist/esm/internal/components/header.js +13 -18
  17. package/dist/esm/internal/components/week-header.js +1 -2
  18. package/dist/esm/internal/hooks/use-get-weeks.js +2 -2
  19. package/dist/esm/internal/hooks/use-handle-date-change.js +2 -2
  20. package/dist/esm/internal/styles/date.js +27 -24
  21. package/package.json +9 -16
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/calendar
2
2
 
3
+ ## 13.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`26825f14d51`](https://bitbucket.org/atlassian/atlassian-frontend/commits/26825f14d51) - [ux] This adds greater keyboard accessibility to calendar, and removes the feature flag that gated this change.
8
+
3
9
  ## 13.2.2
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/calendar.js CHANGED
@@ -12,10 +12,8 @@ var _react = require("react");
12
12
  var _react2 = require("@emotion/react");
13
13
  var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
14
14
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
15
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
15
  var _primitives = require("@atlaskit/primitives");
17
16
  var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
18
- var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
19
17
  var _header = _interopRequireDefault(require("./internal/components/header"));
20
18
  var _weekDays = _interopRequireDefault(require("./internal/components/week-days"));
21
19
  var _weekHeader = _interopRequireDefault(require("./internal/components/week-header"));
@@ -28,8 +26,8 @@ var _useHandleDateChange2 = _interopRequireDefault(require("./internal/hooks/use
28
26
  var _useHandleDateSelect2 = _interopRequireDefault(require("./internal/hooks/use-handle-date-select"));
29
27
  var _useLocale2 = _interopRequireDefault(require("./internal/hooks/use-locale"));
30
28
  var _useUniqueId = _interopRequireDefault(require("./internal/hooks/use-unique-id"));
31
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
32
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
29
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
30
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
33
31
  var boxStyles = (0, _primitives.xcss)({
34
32
  display: 'inline-block',
35
33
  userSelect: 'none'
@@ -37,7 +35,7 @@ var boxStyles = (0, _primitives.xcss)({
37
35
  var analyticsAttributes = {
38
36
  componentName: 'calendar',
39
37
  packageName: "@atlaskit/calendar",
40
- packageVersion: "13.2.2"
38
+ packageVersion: "13.3.0"
41
39
  };
42
40
  var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
43
41
  var day = _ref.day,
@@ -178,10 +176,6 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
178
176
  daysLong: daysLong,
179
177
  weekStartDay: weekStartDay
180
178
  });
181
- var announceId = (0, _useUniqueId.default)('announce');
182
- var announcerDate = (0, _react.useMemo)(function () {
183
- return new Date(yearValue, monthValue - 1, dayValue).toString();
184
- }, [dayValue, monthValue, yearValue]);
185
179
  var getNextHeading = function getNextHeading() {
186
180
  // Next month is (currentMonth - 1) + 1, or just currentMonth in this
187
181
  // instance.
@@ -204,19 +198,12 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
204
198
  style: style,
205
199
  onBlur: handleContainerBlur,
206
200
  onFocus: handleContainerFocus,
207
- onKeyDown: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : handleContainerKeyDown,
208
201
  "data-testid": testId && "".concat(testId, "--container"),
209
202
  ref: ref
210
- }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? null : (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)("span", {
211
- id: announceId,
212
- "aria-live": "assertive",
213
- "aria-relevant": "text"
214
- }, announcerDate)), (0, _react2.jsx)(_primitives.Box, {
203
+ }, (0, _react2.jsx)(_primitives.Box, {
215
204
  xcss: boxStyles,
216
205
  padding: "space.200",
217
- "aria-describedby": (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : announceId,
218
206
  "aria-label": "calendar",
219
- tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : tabIndex,
220
207
  testId: testId && "".concat(testId, "--calendar")
221
208
  }, (0, _react2.jsx)(_primitives.Stack, {
222
209
  space: "space.150"
@@ -234,13 +221,13 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
234
221
  handleClickPrev: handleClickPrev,
235
222
  headerId: headerId,
236
223
  mode: mode,
237
- tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
224
+ tabIndex: tabIndex,
238
225
  testId: testId
239
226
  }), (0, _react2.jsx)(_primitives.Box, {
240
227
  role: "grid",
241
- tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
242
- onKeyDown: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? handleContainerKeyDown : undefined,
243
- "aria-labelledby": (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? headerId : undefined,
228
+ tabIndex: tabIndex,
229
+ onKeyDown: handleContainerKeyDown,
230
+ "aria-labelledby": headerId,
244
231
  testId: testId && "".concat(testId, "--calendar-dates")
245
232
  }, (0, _react2.jsx)(_weekHeader.default, {
246
233
  daysShort: daysShort,
package/dist/cjs/internal/components/date.js CHANGED
@@ -8,7 +8,6 @@ exports.default = void 0;
8
8
  var _react = require("react");
9
9
  var _react2 = require("@emotion/react");
10
10
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
11
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
11
  var _primitives = require("@atlaskit/primitives");
13
12
  var _date = require("../styles/date");
14
13
  /** @jsx jsx */
@@ -53,7 +52,7 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
53
52
  }, [day, month, year, isDisabled]);
54
53
  var focusRef = (0, _react.useRef)(null);
55
54
  (0, _react.useEffect)(function () {
56
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') && isFocused && shouldSetFocus && focusRef.current) {
55
+ if (isFocused && shouldSetFocus && focusRef.current) {
57
56
  focusRef.current.focus();
58
57
  }
59
58
  }, [isFocused, shouldSetFocus]);
@@ -74,7 +73,7 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
74
73
  var dateCellStyles = (0, _react.useMemo)(function () {
75
74
  return (0, _react2.css)((0, _date.dateCellStyles)(mode));
76
75
  }, [mode]);
77
- return (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? (0, _react2.jsx)(_primitives.Grid, {
76
+ return (0, _react2.jsx)(_primitives.Grid, {
78
77
  role: "gridcell",
79
78
  alignItems: "center"
80
79
  }, (0, _react2.jsx)("button", {
@@ -95,23 +94,7 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
95
94
  "data-sibling": isSibling || undefined,
96
95
  "data-today": isToday || undefined,
97
96
  "data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(testId, "--day"))
98
- }, day)) : (0, _react2.jsx)("button", {
99
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
100
- css: dateCellStyles,
101
- "aria-selected": isSelected ? 'true' : 'false',
102
- tabIndex: isSelected ? 0 : -1,
103
- type: "button",
104
- role: "gridcell",
105
- onClick: handleClick,
106
- ref: ref,
107
- "data-disabled": isDisabled || undefined,
108
- "data-focused": isFocused || undefined,
109
- "data-prev-selected": isPreviouslySelected || undefined,
110
- "data-selected": isSelected || undefined,
111
- "data-sibling": isSibling || undefined,
112
- "data-today": isToday || undefined,
113
- "data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(testId, "--day"))
114
- }, day);
97
+ }, day));
115
98
  }));
116
99
  Date.displayName = 'Date';
117
100
 
package/dist/cjs/internal/components/header.js CHANGED
@@ -12,7 +12,6 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
12
12
  var _heading = _interopRequireDefault(require("@atlaskit/heading"));
13
13
  var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
14
14
  var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right-large"));
15
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
15
  var _primitives = require("@atlaskit/primitives");
17
16
  var _colors = require("@atlaskit/theme/colors");
18
17
  var _useUniqueId = _interopRequireDefault(require("../../internal/hooks/use-unique-id"));
@@ -22,7 +21,7 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
22
21
  var monthLongTitle = _ref.monthLongTitle,
23
22
  year = _ref.year,
24
23
  _ref$previousMonthLab = _ref.previousMonthLabel,
25
- previousMonthLabel = _ref$previousMonthLab === void 0 ? (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'Previous month' : 'Last month' : _ref$previousMonthLab,
24
+ previousMonthLabel = _ref$previousMonthLab === void 0 ? 'Previous month' : _ref$previousMonthLab,
26
25
  previousHeading = _ref.previousHeading,
27
26
  _ref$nextMonthLabel = _ref.nextMonthLabel,
28
27
  nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
@@ -57,15 +56,8 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
57
56
  }
58
57
  handleClickNext(e);
59
58
  };
60
- var renderedHeading = (0, _react2.jsx)(_heading.default, {
61
- level: "h400",
62
- as: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'h2' : 'div',
63
- id: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? headerId : undefined,
64
- testId: testId && "".concat(testId, "--current-month-year")
65
- }, "".concat(monthLongTitle, " ").concat(year));
66
59
  return (0, _react2.jsx)(_primitives.Box, {
67
- paddingInline: "space.100",
68
- "aria-hidden": (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : 'true'
60
+ paddingInline: "space.100"
69
61
  }, (0, _react2.jsx)(_primitives.Inline, {
70
62
  space: "space.0",
71
63
  alignBlock: "center",
@@ -73,29 +65,32 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
73
65
  }, (0, _react2.jsx)(_standardButton.default, {
74
66
  appearance: "subtle",
75
67
  spacing: "none",
76
- tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
68
+ tabIndex: tabIndex,
77
69
  onClick: handlePrevMonthInteraction,
78
70
  testId: testId && "".concat(testId, "--previous-month"),
79
71
  iconBefore: (0, _react2.jsx)(_chevronLeftLarge.default, {
80
- label: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? "".concat(previousMonthLabel, ", ").concat(previousHeading) : previousMonthLabel,
72
+ label: "".concat(previousMonthLabel, ", ").concat(previousHeading),
81
73
  size: "medium",
82
74
  primaryColor: "var(--ds-icon, ".concat(_colors.N700, ")"),
83
75
  testId: testId && "".concat(testId, "--previous-month-icon")
84
76
  })
85
- }), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ?
86
- // This is required to ensure that the new month/year is announced when the previous/next month buttons are activated
87
- (0, _react2.jsx)(_primitives.Box, {
77
+ }), (0, _react2.jsx)(_primitives.Box, {
88
78
  "aria-live": hasInteractedWithMonth ? 'polite' : undefined,
89
79
  id: announceId,
90
80
  testId: testId && "".concat(testId, "--current-month-year--container")
91
- }, renderedHeading) : renderedHeading, (0, _react2.jsx)(_standardButton.default, {
81
+ }, (0, _react2.jsx)(_heading.default, {
82
+ level: "h400",
83
+ as: "h2",
84
+ id: headerId,
85
+ testId: testId && "".concat(testId, "--current-month-year")
86
+ }, "".concat(monthLongTitle, " ").concat(year))), (0, _react2.jsx)(_standardButton.default, {
92
87
  appearance: "subtle",
93
88
  spacing: "none",
94
- tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
89
+ tabIndex: tabIndex,
95
90
  onClick: handleNextMonthInteraction,
96
91
  testId: testId && "".concat(testId, "--next-month"),
97
92
  iconBefore: (0, _react2.jsx)(_chevronRightLarge.default, {
98
- label: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? "".concat(nextMonthLabel, ", ").concat(nextHeading) : nextMonthLabel,
93
+ label: "".concat(nextMonthLabel, ", ").concat(nextHeading),
99
94
  size: "medium",
100
95
  primaryColor: "var(--ds-icon, ".concat(_colors.N700, ")"),
101
96
  testId: testId && "".concat(testId, "--next-month-icon")
package/dist/cjs/internal/components/week-header.js CHANGED
@@ -8,7 +8,6 @@ exports.default = void 0;
8
8
  var _react = require("react");
9
9
  var _react2 = require("@emotion/react");
10
10
  var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
11
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
11
  var _primitives = require("@atlaskit/primitives");
13
12
  var _weekDayGrid = _interopRequireDefault(require("./week-day-grid"));
14
13
  /** @jsx jsx */
@@ -30,7 +29,7 @@ var WeekHeader = /*#__PURE__*/(0, _react.memo)(function WeekHeader(_ref) {
30
29
  testId: testId && "".concat(testId, "--column-headers")
31
30
  }, daysShort.map(function (shortDay) {
32
31
  return (0, _react2.jsx)(_primitives.Box, {
33
- "aria-hidden": (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'true' : undefined,
32
+ "aria-hidden": "true",
34
33
  padding: "space.100",
35
34
  xcss: columnHeaderStyles,
36
35
  key: shortDay,
package/dist/cjs/internal/hooks/use-get-weeks.js CHANGED
@@ -12,8 +12,8 @@ var _dateFns = require("date-fns");
12
12
  var _constants = require("../constants");
13
13
  var _dateToString = _interopRequireDefault(require("../utils/date-to-string"));
14
14
  var _getBaseCalendar = _interopRequireDefault(require("../utils/get-base-calendar"));
15
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
16
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } // eslint-disable-next-line no-restricted-imports
15
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
16
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line no-restricted-imports
17
17
  function useGetCalendarWithSixthWeek(calendar, _ref) {
18
18
  var month = _ref.month,
19
19
  year = _ref.year,
package/dist/cjs/internal/hooks/use-handle-date-change.js CHANGED
@@ -11,8 +11,8 @@ var _react = require("react");
11
11
  var _constants = require("../constants");
12
12
  var _dateToString = _interopRequireDefault(require("../utils/date-to-string"));
13
13
  var _getDaysInMonth = _interopRequireDefault(require("../utils/get-days-in-month"));
14
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
15
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
14
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
15
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
16
16
  var getNextMonth = function getNextMonth(monthValue, yearValue) {
17
17
  var month = monthValue;
18
18
  var year = yearValue;
package/dist/cjs/internal/styles/date.js CHANGED
@@ -1,12 +1,9 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.dateCellStyles = void 0;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
7
  var _colors = require("@atlaskit/theme/colors");
11
8
  var textColor = {
12
9
  light: "var(--ds-text, ".concat(_colors.N900, ")"),
@@ -33,11 +30,9 @@ var borderColorFocused = {
33
30
  light: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
34
31
  dark: "var(--ds-border-focused, ".concat(_colors.B100, ")")
35
32
  };
36
- var focusBorderSelector = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? '&:focus-visible' : '&[data-focused]';
37
33
  var dateCellStyles = function dateCellStyles() {
38
- var _ref;
39
34
  var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
40
- return _ref = {
35
+ return {
41
36
  all: 'unset',
42
37
  display: 'block',
43
38
  padding: "var(--ds-space-050, 4px)".concat(" 9px"),
@@ -78,25 +73,32 @@ var dateCellStyles = function dateCellStyles() {
78
73
  '&[data-disabled]': {
79
74
  color: "var(--ds-text-disabled, ".concat(_colors.N40, ")"),
80
75
  cursor: 'not-allowed'
76
+ },
77
+ '&:focus-visible': {
78
+ border: "2px solid ".concat(borderColorFocused[mode])
79
+ },
80
+ '&:hover': {
81
+ backgroundColor: hoverBackground[mode],
82
+ color: textColor[mode]
83
+ },
84
+ '&:active': {
85
+ backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")"),
86
+ color: textColor[mode]
87
+ },
88
+ '&[data-selected]:hover': {
89
+ backgroundColor: "var(--ds-background-selected-hovered, ".concat(_colors.B50, ")"),
90
+ color: "var(--ds-text-selected, ".concat(_colors.N600, ")")
91
+ },
92
+ '&[data-prev-selected]:hover': {
93
+ color: textColorMedium
94
+ },
95
+ '&[data-sibling]:hover': {
96
+ color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
97
+ },
98
+ '&[data-disabled]:hover': {
99
+ backgroundColor: 'transparent',
100
+ color: "var(--ds-text-disabled, ".concat(_colors.N40, ")")
81
101
  }
82
- }, (0, _defineProperty2.default)(_ref, focusBorderSelector, {
83
- border: "2px solid ".concat(borderColorFocused[mode])
84
- }), (0, _defineProperty2.default)(_ref, '&:hover', {
85
- backgroundColor: hoverBackground[mode],
86
- color: textColor[mode]
87
- }), (0, _defineProperty2.default)(_ref, '&:active', {
88
- backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")"),
89
- color: textColor[mode]
90
- }), (0, _defineProperty2.default)(_ref, '&[data-selected]:hover', {
91
- backgroundColor: "var(--ds-background-selected-hovered, ".concat(_colors.B50, ")"),
92
- color: "var(--ds-text-selected, ".concat(_colors.N600, ")")
93
- }), (0, _defineProperty2.default)(_ref, '&[data-prev-selected]:hover', {
94
- color: textColorMedium
95
- }), (0, _defineProperty2.default)(_ref, '&[data-sibling]:hover', {
96
- color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
97
- }), (0, _defineProperty2.default)(_ref, '&[data-disabled]:hover', {
98
- backgroundColor: 'transparent',
99
- color: "var(--ds-text-disabled, ".concat(_colors.N40, ")")
100
- }), _ref;
102
+ };
101
103
  };
102
104
  exports.dateCellStyles = dateCellStyles;
package/dist/es2019/calendar.js CHANGED
@@ -1,13 +1,11 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  /** @jsx jsx */
3
- import { forwardRef, memo, useMemo, useState } from 'react';
3
+ import { forwardRef, memo, useState } from 'react';
4
4
  import { jsx } from '@emotion/react';
5
5
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
6
6
  import noop from '@atlaskit/ds-lib/noop';
7
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
7
  import { Box, Stack, xcss } from '@atlaskit/primitives';
9
8
  import GlobalTheme from '@atlaskit/theme/components';
10
- import VisuallyHidden from '@atlaskit/visually-hidden';
11
9
  import Header from './internal/components/header';
12
10
  import WeekDaysComponent from './internal/components/week-days';
13
11
  import WeekHeaderComponent from './internal/components/week-header';
@@ -27,7 +25,7 @@ const boxStyles = xcss({
27
25
  const analyticsAttributes = {
28
26
  componentName: 'calendar',
29
27
  packageName: "@atlaskit/calendar",
30
- packageVersion: "13.2.2"
28
+ packageVersion: "13.3.0"
31
29
  };
32
30
  const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
33
31
  day,
@@ -149,8 +147,6 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
149
147
  daysLong,
150
148
  weekStartDay
151
149
  });
152
- const announceId = useUniqueId('announce');
153
- const announcerDate = useMemo(() => new Date(yearValue, monthValue - 1, dayValue).toString(), [dayValue, monthValue, yearValue]);
154
150
  const getNextHeading = () => {
155
151
  // Next month is (currentMonth - 1) + 1, or just currentMonth in this
156
152
  // instance.
@@ -173,19 +169,12 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
173
169
  style: style,
174
170
  onBlur: handleContainerBlur,
175
171
  onFocus: handleContainerFocus,
176
- onKeyDown: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : handleContainerKeyDown,
177
172
  "data-testid": testId && `${testId}--container`,
178
173
  ref: ref
179
- }, getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? null : jsx(VisuallyHidden, null, jsx("span", {
180
- id: announceId,
181
- "aria-live": "assertive",
182
- "aria-relevant": "text"
183
- }, announcerDate)), jsx(Box, {
174
+ }, jsx(Box, {
184
175
  xcss: boxStyles,
185
176
  padding: "space.200",
186
- "aria-describedby": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : announceId,
187
177
  "aria-label": "calendar",
188
- tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : tabIndex,
189
178
  testId: testId && `${testId}--calendar`
190
179
  }, jsx(Stack, {
191
180
  space: "space.150"
@@ -203,13 +192,13 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
203
192
  handleClickPrev: handleClickPrev,
204
193
  headerId: headerId,
205
194
  mode: mode,
206
- tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
195
+ tabIndex: tabIndex,
207
196
  testId: testId
208
197
  }), jsx(Box, {
209
198
  role: "grid",
210
- tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
211
- onKeyDown: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? handleContainerKeyDown : undefined,
212
- "aria-labelledby": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? headerId : undefined,
199
+ tabIndex: tabIndex,
200
+ onKeyDown: handleContainerKeyDown,
201
+ "aria-labelledby": headerId,
213
202
  testId: testId && `${testId}--calendar-dates`
214
203
  }, jsx(WeekHeaderComponent, {
215
204
  daysShort: daysShort,
package/dist/es2019/internal/components/date.js CHANGED
@@ -2,7 +2,6 @@
2
2
  import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import noop from '@atlaskit/ds-lib/noop';
5
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
6
5
  import { Grid } from '@atlaskit/primitives';
7
6
  import { dateCellStyles as getDateCellStyles } from '../styles/date';
8
7
  const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
@@ -39,7 +38,7 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
39
38
  }, [day, month, year, isDisabled]);
40
39
  const focusRef = useRef(null);
41
40
  useEffect(() => {
42
- if (getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') && isFocused && shouldSetFocus && focusRef.current) {
41
+ if (isFocused && shouldSetFocus && focusRef.current) {
43
42
  focusRef.current.focus();
44
43
  }
45
44
  }, [isFocused, shouldSetFocus]);
@@ -59,7 +58,7 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
59
58
  }
60
59
  }, [onClick]);
61
60
  const dateCellStyles = useMemo(() => css(getDateCellStyles(mode)), [mode]);
62
- return getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? jsx(Grid, {
61
+ return jsx(Grid, {
63
62
  role: "gridcell",
64
63
  alignItems: "center"
65
64
  }, jsx("button", {
@@ -80,23 +79,7 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
80
79
  "data-sibling": isSibling || undefined,
81
80
  "data-today": isToday || undefined,
82
81
  "data-testid": testId && (isSelected ? `${testId}--selected-day` : `${testId}--day`)
83
- }, day)) : jsx("button", {
84
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
85
- css: dateCellStyles,
86
- "aria-selected": isSelected ? 'true' : 'false',
87
- tabIndex: isSelected ? 0 : -1,
88
- type: "button",
89
- role: "gridcell",
90
- onClick: handleClick,
91
- ref: ref,
92
- "data-disabled": isDisabled || undefined,
93
- "data-focused": isFocused || undefined,
94
- "data-prev-selected": isPreviouslySelected || undefined,
95
- "data-selected": isSelected || undefined,
96
- "data-sibling": isSibling || undefined,
97
- "data-today": isToday || undefined,
98
- "data-testid": testId && (isSelected ? `${testId}--selected-day` : `${testId}--day`)
99
- }, day);
82
+ }, day));
100
83
  }));
101
84
  Date.displayName = 'Date';
102
85
 
package/dist/es2019/internal/components/header.js CHANGED
@@ -5,14 +5,13 @@ import Button from '@atlaskit/button/standard-button';
5
5
  import Heading from '@atlaskit/heading';
6
6
  import ArrowleftIcon from '@atlaskit/icon/glyph/chevron-left-large';
7
7
  import ArrowrightIcon from '@atlaskit/icon/glyph/chevron-right-large';
8
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
8
  import { Box, Inline } from '@atlaskit/primitives';
10
9
  import { N700 } from '@atlaskit/theme/colors';
11
10
  import useUniqueId from '../../internal/hooks/use-unique-id';
12
11
  const Header = /*#__PURE__*/memo(function Header({
13
12
  monthLongTitle,
14
13
  year,
15
- previousMonthLabel = getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'Previous month' : 'Last month',
14
+ previousMonthLabel = 'Previous month',
16
15
  previousHeading,
17
16
  nextMonthLabel = 'Next month',
18
17
  nextHeading,
@@ -44,15 +43,8 @@ const Header = /*#__PURE__*/memo(function Header({
44
43
  }
45
44
  handleClickNext(e);
46
45
  };
47
- const renderedHeading = jsx(Heading, {
48
- level: "h400",
49
- as: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'h2' : 'div',
50
- id: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? headerId : undefined,
51
- testId: testId && `${testId}--current-month-year`
52
- }, `${monthLongTitle} ${year}`);
53
46
  return jsx(Box, {
54
- paddingInline: "space.100",
55
- "aria-hidden": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : 'true'
47
+ paddingInline: "space.100"
56
48
  }, jsx(Inline, {
57
49
  space: "space.0",
58
50
  alignBlock: "center",
@@ -60,29 +52,32 @@ const Header = /*#__PURE__*/memo(function Header({
60
52
  }, jsx(Button, {
61
53
  appearance: "subtle",
62
54
  spacing: "none",
63
- tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
55
+ tabIndex: tabIndex,
64
56
  onClick: handlePrevMonthInteraction,
65
57
  testId: testId && `${testId}--previous-month`,
66
58
  iconBefore: jsx(ArrowleftIcon, {
67
- label: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? `${previousMonthLabel}, ${previousHeading}` : previousMonthLabel,
59
+ label: `${previousMonthLabel}, ${previousHeading}`,
68
60
  size: "medium",
69
61
  primaryColor: `var(--ds-icon, ${N700})`,
70
62
  testId: testId && `${testId}--previous-month-icon`
71
63
  })
72
- }), getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ?
73
- // This is required to ensure that the new month/year is announced when the previous/next month buttons are activated
74
- jsx(Box, {
64
+ }), jsx(Box, {
75
65
  "aria-live": hasInteractedWithMonth ? 'polite' : undefined,
76
66
  id: announceId,
77
67
  testId: testId && `${testId}--current-month-year--container`
78
- }, renderedHeading) : renderedHeading, jsx(Button, {
68
+ }, jsx(Heading, {
69
+ level: "h400",
70
+ as: "h2",
71
+ id: headerId,
72
+ testId: testId && `${testId}--current-month-year`
73
+ }, `${monthLongTitle} ${year}`)), jsx(Button, {
79
74
  appearance: "subtle",
80
75
  spacing: "none",
81
- tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
76
+ tabIndex: tabIndex,
82
77
  onClick: handleNextMonthInteraction,
83
78
  testId: testId && `${testId}--next-month`,
84
79
  iconBefore: jsx(ArrowrightIcon, {
85
- label: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? `${nextMonthLabel}, ${nextHeading}` : nextMonthLabel,
80
+ label: `${nextMonthLabel}, ${nextHeading}`,
86
81
  size: "medium",
87
82
  primaryColor: `var(--ds-icon, ${N700})`,
88
83
  testId: testId && `${testId}--next-month-icon`
package/dist/es2019/internal/components/week-header.js CHANGED
@@ -2,7 +2,6 @@
2
2
  import { memo } from 'react';
3
3
  import { jsx } from '@emotion/react';
4
4
  import Text from '@atlaskit/ds-explorations/text';
5
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
6
5
  import { Box, xcss } from '@atlaskit/primitives';
7
6
  import WeekDayGrid from './week-day-grid';
8
7
  const columnHeaderStyles = xcss({
@@ -22,7 +21,7 @@ const WeekHeader = /*#__PURE__*/memo(function WeekHeader({
22
21
  return jsx(WeekDayGrid, {
23
22
  testId: testId && `${testId}--column-headers`
24
23
  }, daysShort.map(shortDay => jsx(Box, {
25
- "aria-hidden": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'true' : undefined,
24
+ "aria-hidden": "true",
26
25
  padding: "space.100",
27
26
  xcss: columnHeaderStyles,
28
27
  key: shortDay,
package/dist/es2019/internal/styles/date.js CHANGED
@@ -1,4 +1,3 @@
1
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
1
  import { B100, B200, B400, B50, DN600, N0, N200, N30, N40, N500, N600, N700, N800, N900 } from '@atlaskit/theme/colors';
3
2
  const textColor = {
4
3
  light: `var(--ds-text, ${N900})`,
@@ -25,7 +24,6 @@ const borderColorFocused = {
25
24
  light: `var(--ds-border-focused, ${B200})`,
26
25
  dark: `var(--ds-border-focused, ${B100})`
27
26
  };
28
- const focusBorderSelector = getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? '&:focus-visible' : '&[data-focused]';
29
27
  export const dateCellStyles = (mode = 'light') => ({
30
28
  all: 'unset',
31
29
  display: 'block',
@@ -68,7 +66,7 @@ export const dateCellStyles = (mode = 'light') => ({
68
66
  color: `var(--ds-text-disabled, ${N40})`,
69
67
  cursor: 'not-allowed'
70
68
  },
71
- [focusBorderSelector]: {
69
+ '&:focus-visible': {
72
70
  border: `2px solid ${borderColorFocused[mode]}`
73
71
  },
74
72
  '&:hover': {
package/dist/esm/calendar.js CHANGED
@@ -1,17 +1,15 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
5
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
6
  /** @jsx jsx */
7
- import { forwardRef, memo, useMemo, useState } from 'react';
7
+ import { forwardRef, memo, useState } from 'react';
8
8
  import { jsx } from '@emotion/react';
9
9
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
10
10
  import noop from '@atlaskit/ds-lib/noop';
11
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
12
11
  import { Box, Stack, xcss } from '@atlaskit/primitives';
13
12
  import GlobalTheme from '@atlaskit/theme/components';
14
- import VisuallyHidden from '@atlaskit/visually-hidden';
15
13
  import Header from './internal/components/header';
16
14
  import WeekDaysComponent from './internal/components/week-days';
17
15
  import WeekHeaderComponent from './internal/components/week-header';
@@ -31,7 +29,7 @@ var boxStyles = xcss({
31
29
  var analyticsAttributes = {
32
30
  componentName: 'calendar',
33
31
  packageName: "@atlaskit/calendar",
34
- packageVersion: "13.2.2"
32
+ packageVersion: "13.3.0"
35
33
  };
36
34
  var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
37
35
  var day = _ref.day,
@@ -172,10 +170,6 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
172
170
  daysLong: daysLong,
173
171
  weekStartDay: weekStartDay
174
172
  });
175
- var announceId = useUniqueId('announce');
176
- var announcerDate = useMemo(function () {
177
- return new Date(yearValue, monthValue - 1, dayValue).toString();
178
- }, [dayValue, monthValue, yearValue]);
179
173
  var getNextHeading = function getNextHeading() {
180
174
  // Next month is (currentMonth - 1) + 1, or just currentMonth in this
181
175
  // instance.
@@ -198,19 +192,12 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
198
192
  style: style,
199
193
  onBlur: handleContainerBlur,
200
194
  onFocus: handleContainerFocus,
201
- onKeyDown: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : handleContainerKeyDown,
202
195
  "data-testid": testId && "".concat(testId, "--container"),
203
196
  ref: ref
204
- }, getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? null : jsx(VisuallyHidden, null, jsx("span", {
205
- id: announceId,
206
- "aria-live": "assertive",
207
- "aria-relevant": "text"
208
- }, announcerDate)), jsx(Box, {
197
+ }, jsx(Box, {
209
198
  xcss: boxStyles,
210
199
  padding: "space.200",
211
- "aria-describedby": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : announceId,
212
200
  "aria-label": "calendar",
213
- tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : tabIndex,
214
201
  testId: testId && "".concat(testId, "--calendar")
215
202
  }, jsx(Stack, {
216
203
  space: "space.150"
@@ -228,13 +215,13 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
228
215
  handleClickPrev: handleClickPrev,
229
216
  headerId: headerId,
230
217
  mode: mode,
231
- tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
218
+ tabIndex: tabIndex,
232
219
  testId: testId
233
220
  }), jsx(Box, {
234
221
  role: "grid",
235
- tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
236
- onKeyDown: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? handleContainerKeyDown : undefined,
237
- "aria-labelledby": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? headerId : undefined,
222
+ tabIndex: tabIndex,
223
+ onKeyDown: handleContainerKeyDown,
224
+ "aria-labelledby": headerId,
238
225
  testId: testId && "".concat(testId, "--calendar-dates")
239
226
  }, jsx(WeekHeaderComponent, {
240
227
  daysShort: daysShort,
package/dist/esm/internal/components/date.js CHANGED
@@ -2,7 +2,6 @@
2
2
  import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import noop from '@atlaskit/ds-lib/noop';
5
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
6
5
  import { Grid } from '@atlaskit/primitives';
7
6
  import { dateCellStyles as getDateCellStyles } from '../styles/date';
8
7
  var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
@@ -45,7 +44,7 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
45
44
  }, [day, month, year, isDisabled]);
46
45
  var focusRef = useRef(null);
47
46
  useEffect(function () {
48
- if (getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') && isFocused && shouldSetFocus && focusRef.current) {
47
+ if (isFocused && shouldSetFocus && focusRef.current) {
49
48
  focusRef.current.focus();
50
49
  }
51
50
  }, [isFocused, shouldSetFocus]);
@@ -66,7 +65,7 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
66
65
  var dateCellStyles = useMemo(function () {
67
66
  return css(getDateCellStyles(mode));
68
67
  }, [mode]);
69
- return getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? jsx(Grid, {
68
+ return jsx(Grid, {
70
69
  role: "gridcell",
71
70
  alignItems: "center"
72
71
  }, jsx("button", {
@@ -87,23 +86,7 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
87
86
  "data-sibling": isSibling || undefined,
88
87
  "data-today": isToday || undefined,
89
88
  "data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(testId, "--day"))
90
- }, day)) : jsx("button", {
91
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
92
- css: dateCellStyles,
93
- "aria-selected": isSelected ? 'true' : 'false',
94
- tabIndex: isSelected ? 0 : -1,
95
- type: "button",
96
- role: "gridcell",
97
- onClick: handleClick,
98
- ref: ref,
99
- "data-disabled": isDisabled || undefined,
100
- "data-focused": isFocused || undefined,
101
- "data-prev-selected": isPreviouslySelected || undefined,
102
- "data-selected": isSelected || undefined,
103
- "data-sibling": isSibling || undefined,
104
- "data-today": isToday || undefined,
105
- "data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(testId, "--day"))
106
- }, day);
89
+ }, day));
107
90
  }));
108
91
  Date.displayName = 'Date';
109
92
 
package/dist/esm/internal/components/header.js CHANGED
@@ -6,7 +6,6 @@ import Button from '@atlaskit/button/standard-button';
6
6
  import Heading from '@atlaskit/heading';
7
7
  import ArrowleftIcon from '@atlaskit/icon/glyph/chevron-left-large';
8
8
  import ArrowrightIcon from '@atlaskit/icon/glyph/chevron-right-large';
9
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
10
9
  import { Box, Inline } from '@atlaskit/primitives';
11
10
  import { N700 } from '@atlaskit/theme/colors';
12
11
  import useUniqueId from '../../internal/hooks/use-unique-id';
@@ -14,7 +13,7 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
14
13
  var monthLongTitle = _ref.monthLongTitle,
15
14
  year = _ref.year,
16
15
  _ref$previousMonthLab = _ref.previousMonthLabel,
17
- previousMonthLabel = _ref$previousMonthLab === void 0 ? getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'Previous month' : 'Last month' : _ref$previousMonthLab,
16
+ previousMonthLabel = _ref$previousMonthLab === void 0 ? 'Previous month' : _ref$previousMonthLab,
18
17
  previousHeading = _ref.previousHeading,
19
18
  _ref$nextMonthLabel = _ref.nextMonthLabel,
20
19
  nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
@@ -49,15 +48,8 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
49
48
  }
50
49
  handleClickNext(e);
51
50
  };
52
- var renderedHeading = jsx(Heading, {
53
- level: "h400",
54
- as: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'h2' : 'div',
55
- id: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? headerId : undefined,
56
- testId: testId && "".concat(testId, "--current-month-year")
57
- }, "".concat(monthLongTitle, " ").concat(year));
58
51
  return jsx(Box, {
59
- paddingInline: "space.100",
60
- "aria-hidden": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : 'true'
52
+ paddingInline: "space.100"
61
53
  }, jsx(Inline, {
62
54
  space: "space.0",
63
55
  alignBlock: "center",
@@ -65,29 +57,32 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
65
57
  }, jsx(Button, {
66
58
  appearance: "subtle",
67
59
  spacing: "none",
68
- tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
60
+ tabIndex: tabIndex,
69
61
  onClick: handlePrevMonthInteraction,
70
62
  testId: testId && "".concat(testId, "--previous-month"),
71
63
  iconBefore: jsx(ArrowleftIcon, {
72
- label: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? "".concat(previousMonthLabel, ", ").concat(previousHeading) : previousMonthLabel,
64
+ label: "".concat(previousMonthLabel, ", ").concat(previousHeading),
73
65
  size: "medium",
74
66
  primaryColor: "var(--ds-icon, ".concat(N700, ")"),
75
67
  testId: testId && "".concat(testId, "--previous-month-icon")
76
68
  })
77
- }), getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ?
78
- // This is required to ensure that the new month/year is announced when the previous/next month buttons are activated
79
- jsx(Box, {
69
+ }), jsx(Box, {
80
70
  "aria-live": hasInteractedWithMonth ? 'polite' : undefined,
81
71
  id: announceId,
82
72
  testId: testId && "".concat(testId, "--current-month-year--container")
83
- }, renderedHeading) : renderedHeading, jsx(Button, {
73
+ }, jsx(Heading, {
74
+ level: "h400",
75
+ as: "h2",
76
+ id: headerId,
77
+ testId: testId && "".concat(testId, "--current-month-year")
78
+ }, "".concat(monthLongTitle, " ").concat(year))), jsx(Button, {
84
79
  appearance: "subtle",
85
80
  spacing: "none",
86
- tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
81
+ tabIndex: tabIndex,
87
82
  onClick: handleNextMonthInteraction,
88
83
  testId: testId && "".concat(testId, "--next-month"),
89
84
  iconBefore: jsx(ArrowrightIcon, {
90
- label: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? "".concat(nextMonthLabel, ", ").concat(nextHeading) : nextMonthLabel,
85
+ label: "".concat(nextMonthLabel, ", ").concat(nextHeading),
91
86
  size: "medium",
92
87
  primaryColor: "var(--ds-icon, ".concat(N700, ")"),
93
88
  testId: testId && "".concat(testId, "--next-month-icon")
package/dist/esm/internal/components/week-header.js CHANGED
@@ -2,7 +2,6 @@
2
2
  import { memo } from 'react';
3
3
  import { jsx } from '@emotion/react';
4
4
  import Text from '@atlaskit/ds-explorations/text';
5
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
6
5
  import { Box, xcss } from '@atlaskit/primitives';
7
6
  import WeekDayGrid from './week-day-grid';
8
7
  var columnHeaderStyles = xcss({
@@ -22,7 +21,7 @@ var WeekHeader = /*#__PURE__*/memo(function WeekHeader(_ref) {
22
21
  testId: testId && "".concat(testId, "--column-headers")
23
22
  }, daysShort.map(function (shortDay) {
24
23
  return jsx(Box, {
25
- "aria-hidden": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'true' : undefined,
24
+ "aria-hidden": "true",
26
25
  padding: "space.100",
27
26
  xcss: columnHeaderStyles,
28
27
  key: shortDay,
package/dist/esm/internal/hooks/use-get-weeks.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
3
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
5
  import { useMemo } from 'react';
6
6
 
7
7
  // eslint-disable-next-line no-restricted-imports
package/dist/esm/internal/hooks/use-handle-date-change.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
3
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
5
  import { useCallback, useEffect, useRef } from 'react';
6
6
  import { daysPerWeek, monthsPerYear } from '../constants';
7
7
  import dateToString from '../utils/date-to-string';
package/dist/esm/internal/styles/date.js CHANGED
@@ -1,5 +1,3 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
3
1
  import { B100, B200, B400, B50, DN600, N0, N200, N30, N40, N500, N600, N700, N800, N900 } from '@atlaskit/theme/colors';
4
2
  var textColor = {
5
3
  light: "var(--ds-text, ".concat(N900, ")"),
@@ -26,11 +24,9 @@ var borderColorFocused = {
26
24
  light: "var(--ds-border-focused, ".concat(B200, ")"),
27
25
  dark: "var(--ds-border-focused, ".concat(B100, ")")
28
26
  };
29
- var focusBorderSelector = getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? '&:focus-visible' : '&[data-focused]';
30
27
  export var dateCellStyles = function dateCellStyles() {
31
- var _ref;
32
28
  var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
33
- return _ref = {
29
+ return {
34
30
  all: 'unset',
35
31
  display: 'block',
36
32
  padding: "var(--ds-space-050, 4px)".concat(" 9px"),
@@ -71,24 +67,31 @@ export var dateCellStyles = function dateCellStyles() {
71
67
  '&[data-disabled]': {
72
68
  color: "var(--ds-text-disabled, ".concat(N40, ")"),
73
69
  cursor: 'not-allowed'
70
+ },
71
+ '&:focus-visible': {
72
+ border: "2px solid ".concat(borderColorFocused[mode])
73
+ },
74
+ '&:hover': {
75
+ backgroundColor: hoverBackground[mode],
76
+ color: textColor[mode]
77
+ },
78
+ '&:active': {
79
+ backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"),
80
+ color: textColor[mode]
81
+ },
82
+ '&[data-selected]:hover': {
83
+ backgroundColor: "var(--ds-background-selected-hovered, ".concat(B50, ")"),
84
+ color: "var(--ds-text-selected, ".concat(N600, ")")
85
+ },
86
+ '&[data-prev-selected]:hover': {
87
+ color: textColorMedium
88
+ },
89
+ '&[data-sibling]:hover': {
90
+ color: "var(--ds-text-subtlest, ".concat(N200, ")")
91
+ },
92
+ '&[data-disabled]:hover': {
93
+ backgroundColor: 'transparent',
94
+ color: "var(--ds-text-disabled, ".concat(N40, ")")
74
95
  }
75
- }, _defineProperty(_ref, focusBorderSelector, {
76
- border: "2px solid ".concat(borderColorFocused[mode])
77
- }), _defineProperty(_ref, '&:hover', {
78
- backgroundColor: hoverBackground[mode],
79
- color: textColor[mode]
80
- }), _defineProperty(_ref, '&:active', {
81
- backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"),
82
- color: textColor[mode]
83
- }), _defineProperty(_ref, '&[data-selected]:hover', {
84
- backgroundColor: "var(--ds-background-selected-hovered, ".concat(B50, ")"),
85
- color: "var(--ds-text-selected, ".concat(N600, ")")
86
- }), _defineProperty(_ref, '&[data-prev-selected]:hover', {
87
- color: textColorMedium
88
- }), _defineProperty(_ref, '&[data-sibling]:hover', {
89
- color: "var(--ds-text-subtlest, ".concat(N200, ")")
90
- }), _defineProperty(_ref, '&[data-disabled]:hover', {
91
- backgroundColor: 'transparent',
92
- color: "var(--ds-text-disabled, ".concat(N40, ")")
93
- }), _ref;
96
+ };
94
97
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/calendar",
3
- "version": "13.2.2",
3
+ "version": "13.3.0",
4
4
  "description": "An interactive calendar for date selection experiences.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
12
12
  "module": "dist/esm/index.js",
13
13
  "module:es2019": "dist/es2019/index.js",
14
14
  "types": "dist/types/index.d.ts",
15
- "typesVersions": {
16
- ">=4.5 <4.9": {
17
- "*": [
18
- "dist/types-ts4.5/*",
19
- "dist/types-ts4.5/index.d.ts"
20
- ]
21
- }
22
- },
23
15
  "sideEffects": false,
24
16
  "atlaskit:src": "src/index.tsx",
25
17
  "atlassian": {
@@ -38,11 +30,9 @@
38
30
  "@atlaskit/heading": "^1.3.0",
39
31
  "@atlaskit/icon": "^21.12.0",
40
32
  "@atlaskit/locale": "^2.5.0",
41
- "@atlaskit/platform-feature-flags": "*",
42
33
  "@atlaskit/primitives": "^1.2.0",
43
34
  "@atlaskit/theme": "^12.5.0",
44
- "@atlaskit/tokens": "^1.15.0",
45
- "@atlaskit/visually-hidden": "^1.2.0",
35
+ "@atlaskit/tokens": "^1.18.0",
46
36
  "@babel/runtime": "^7.0.0",
47
37
  "@emotion/react": "^11.7.1",
48
38
  "date-fns": "^2.17.0",
@@ -53,11 +43,11 @@
53
43
  },
54
44
  "devDependencies": {
55
45
  "@af/accessibility-testing": "*",
46
+ "@af/visual-regression": "*",
56
47
  "@atlaskit/ssr": "*",
57
48
  "@atlaskit/visual-regression": "*",
58
49
  "@atlaskit/webdriver-runner": "*",
59
50
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
60
- "@atlassian/feature-flags-test-utils": "*",
61
51
  "@testing-library/dom": "^8.17.1",
62
52
  "@testing-library/react": "^12.1.5",
63
53
  "jest-in-case": "^1.0.2",
@@ -91,9 +81,12 @@
91
81
  ]
92
82
  }
93
83
  },
94
- "platform-feature-flags": {
95
- "platform.design-system-team.calendar-keyboard-accessibility_967h1": {
96
- "type": "boolean"
84
+ "typesVersions": {
85
+ ">=4.5 <4.9": {
86
+ "*": [
87
+ "dist/types-ts4.5/*",
88
+ "dist/types-ts4.5/index.d.ts"
89
+ ]
97
90
  }
98
91
  },
99
92
  "af:exports": {