@atlaskit/calendar 12.1.14 → 12.3.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/calendar
 
+## 12.3.1
+
+### Patch Changes
+
+- [`124a1b7532b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/124a1b7532b) - Remove calendar's background when design tokens are provided, to allow calendar to match the color of any surface in light or dark mode
+- [`6bf81ead961`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6bf81ead961) - Internal code change turning on new linting rules.
+- Updated dependencies
+
+## 12.3.0
+
+### Minor Changes
+
+- [`e1e33cfe0db`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e1e33cfe0db) - [ux] Adds tabIndex prop for `@atlaskit/calendar`, useful when needing to disable calendar from receiving focus by keyboard.
+
+## 12.2.0
+
+### Minor Changes
+
+- [`6f7a4353204`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6f7a4353204) - Added ability to provide custom aria-labels for next- and previous-month buttons using `nextMonthLabel` and `previousMonthLabel`
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.14
 
 ### Patch Changes

package/dist/cjs/calendar.js

@@ -59,7 +59,7 @@ var lightWrapperStyles = (0, _core.css)({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.N0, ")"),
   color: "var(--ds-text, ".concat(_colors.N900, ")"),
   outline: 'none',
   userSelect: 'none'
@@ -68,7 +68,7 @@ var darkWrapperStyles = (0, _core.css)({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N700, ")"),
+  backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.N700, ")"),
   color: "var(--ds-text, ".concat(_colors.DN600, ")"),
   outline: 'none',
   userSelect: 'none'
@@ -83,7 +83,7 @@ var gridsContainerStyles = (0, _core.css)({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.1.14"
+  packageVersion: "12.3.1"
 };
 var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -102,6 +102,7 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
       minDate = _ref.minDate,
       maxDate = _ref.maxDate,
       month = _ref.month,
+      nextMonthLabel = _ref.nextMonthLabel,
       _ref$onBlur = _ref.onBlur,
       onBlur = _ref$onBlur === void 0 ? _noop.default : _ref$onBlur,
       _ref$onChange = _ref.onChange,
@@ -111,6 +112,7 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
       _ref$onSelect = _ref.onSelect,
       onSelect = _ref$onSelect === void 0 ? _noop.default : _ref$onSelect,
       previouslySelected = _ref.previouslySelected,
+      previousMonthLabel = _ref.previousMonthLabel,
       selected = _ref.selected,
       today = _ref.today,
       _ref$locale = _ref.locale,
@@ -123,7 +125,9 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
       calendarRef = _ref.calendarRef,
       mode = _ref.mode,
       className = _ref.className,
-      style = _ref.style;
+      style = _ref.style,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 
   var _useControlledDateSta = (0, _useControlledDateState.default)({
     day: day,
@@ -243,12 +247,14 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     "aria-describedby": announceId,
     "aria-label": "calendar",
     role: "grid",
-    tabIndex: 0
+    tabIndex: tabIndex
   }, (0, _core.jsx)(_heading.default // The month number needs to be translated to index in the month
   // name array e.g. 1 (January) -> 0
   , {
     monthLongTitle: monthsLong[monthValue - 1],
     year: yearValue,
+    nextMonthLabel: nextMonthLabel,
+    previousMonthLabel: previousMonthLabel,
     handleClickNext: handleClickNext,
     handleClickPrev: handleClickPrev,
     mode: mode,
@@ -266,6 +272,16 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     testId: testId
   }))));
 });
+/**
+ * __Calendar__
+ *
+ * A calendar is used for date selection.
+ *
+ * - [Examples](https://atlassian.design/components/calendar/examples)
+ * - [Code](https://atlassian.design/components/calendar/code)
+ * - [Usage](https://atlassian.design/components/calendar/usage)
+ */
+
 var Calendar = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Calendar(props, ref) {
   return (0, _core.jsx)(_components.default.Consumer, null, function (_ref2) {
     var mode = _ref2.mode;

package/dist/cjs/internal/components/date.js

@@ -86,6 +86,7 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     "data-testid": testId && isSelected ? "".concat(testId, "--selected-day") : undefined
   }, day);
 }));
-Date.displayName = 'Date';
+Date.displayName = 'Date'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 var _default = Date;
 exports.default = _default;

package/dist/cjs/internal/components/heading.js

@@ -49,6 +49,10 @@ var arrowRightStyles = (0, _core.css)({
 var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
   var monthLongTitle = _ref.monthLongTitle,
       year = _ref.year,
+      _ref$previousMonthLab = _ref.previousMonthLabel,
+      previousMonthLabel = _ref$previousMonthLab === void 0 ? 'Last month' : _ref$previousMonthLab,
+      _ref$nextMonthLabel = _ref.nextMonthLabel,
+      nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
       handleClickPrev = _ref.handleClickPrev,
       handleClickNext = _ref.handleClickNext,
       mode = _ref.mode,
@@ -67,9 +71,10 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
     onClick: handleClickPrev,
     testId: testId && "".concat(testId, "--previous-month"),
     iconBefore: (0, _core.jsx)(_chevronLeftLarge.default, {
-      label: "Last month",
+      label: previousMonthLabel,
       size: "medium",
-      primaryColor: "var(--ds-text-subtlest, ".concat(_colors.N70, ")")
+      primaryColor: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
+      testId: testId && "".concat(testId, "--previous-month-icon")
     })
   }), (0, _core.jsx)("div", {
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -83,12 +88,14 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
     onClick: handleClickNext,
     testId: testId && "".concat(testId, "--next-month"),
     iconBefore: (0, _core.jsx)(_chevronRightLarge.default, {
-      label: "Next month",
+      label: nextMonthLabel,
       size: "medium",
-      primaryColor: "var(--ds-text-subtlest, ".concat(_colors.N70, ")")
+      primaryColor: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
+      testId: testId && "".concat(testId, "--next-month-icon")
     })
   }));
 });
-Heading.displayName = 'Heading';
+Heading.displayName = 'Heading'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 var _default = Heading;
 exports.default = _default;

package/dist/cjs/internal/components/week-days.js

@@ -50,6 +50,7 @@ var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
     }));
   }));
 });
-WeekDays.displayName = 'WeekDays';
+WeekDays.displayName = 'WeekDays'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 var _default = WeekDays;
 exports.default = _default;

package/dist/cjs/internal/components/week-header.js

@@ -40,6 +40,7 @@ var WeekHeader = /*#__PURE__*/(0, _react.memo)(function WeekHeader(_ref) {
     }, shortDay);
   }));
 });
-WeekHeader.displayName = 'WeekHeader';
+WeekHeader.displayName = 'WeekHeader'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 var _default = WeekHeader;
 exports.default = _default;

package/dist/cjs/internal/hooks/use-calendar-ref.js

@@ -7,6 +7,7 @@ exports.default = useCalendarRef;
 
 var _react = require("react");
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useCalendarRef(calendarRef, _ref) {
   var navigate = _ref.navigate;
   (0, _react.useImperativeHandle)(calendarRef, function () {

package/dist/cjs/internal/hooks/use-controlled-date-state.js

@@ -15,6 +15,7 @@ var _useLazyRef2 = _interopRequireDefault(require("@atlaskit/ds-lib/use-lazy-ref
 
 var _pad = _interopRequireDefault(require("../utils/pad"));
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useControlledDateState(_ref) {
   var day = _ref.day,
       defaultDay = _ref.defaultDay,

package/dist/cjs/internal/hooks/use-focusing.js

@@ -7,6 +7,7 @@ exports.default = useFocusing;
 
 var _react = require("react");
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useFocusing(_ref) {
   var onBlur = _ref.onBlur,
       onFocus = _ref.onFocus;

package/dist/cjs/internal/hooks/use-get-weeks.js

@@ -47,7 +47,8 @@ function useGetCalendarWithSixthWeek(calendar, _ref) {
       });
     }
   }, [calendarLastValue, month, shouldDisplaySixthWeek, weekStartDay, year]);
-}
+} // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 function useGetWeeks(_ref2) {
   var day = _ref2.day,

package/dist/cjs/internal/hooks/use-handle-date-change.js

@@ -55,7 +55,8 @@ var getPrevMonth = function getPrevMonth(monthValue, yearValue) {
     month: month,
     year: year
   };
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 function useHandleDateChange(_ref) {
   var _ref$day = (0, _slicedToArray2.default)(_ref.day, 2),

package/dist/cjs/internal/hooks/use-handle-date-select.js

@@ -15,6 +15,7 @@ var _constants = require("../constants");
 
 var _dateToString = _interopRequireDefault(require("../utils/date-to-string"));
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useHandleDateSelect(_ref) {
   var _ref$day = (0, _slicedToArray2.default)(_ref.day, 1),
       dayValue = _ref$day[0],

package/dist/cjs/internal/hooks/use-locale.js

@@ -9,6 +9,7 @@ var _react = require("react");
 
 var _locale = require("@atlaskit/locale");
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useLocale(_ref) {
   var locale = _ref.locale,
       weekStartDay = _ref.weekStartDay;

package/dist/cjs/internal/hooks/use-unique-id.js

@@ -7,6 +7,7 @@ exports.default = useUniqueId;
 
 var _reactUid = require("react-uid");
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useUniqueId(prefix) {
   var seed = (0, _reactUid.useUIDSeed)();
   return "".concat(prefix, "-").concat(seed(prefix));

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/calendar",
-	"version": "12.1.14",
+	"version": "12.3.1",
 	"sideEffects": false
 }

package/dist/es2019/calendar.js

@@ -24,7 +24,7 @@ const lightWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+  backgroundColor: `var(--ds-UNSAFE_util-transparent, ${N0})`,
   color: `var(--ds-text, ${N900})`,
   outline: 'none',
   userSelect: 'none'
@@ -33,7 +33,7 @@ const darkWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: `var(--ds-surface-overlay, ${N700})`,
+  backgroundColor: `var(--ds-UNSAFE_util-transparent, ${N700})`,
   color: `var(--ds-text, ${DN600})`,
   outline: 'none',
   userSelect: 'none'
@@ -48,7 +48,7 @@ const gridsContainerStyles = css({
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.1.14"
+  packageVersion: "12.3.1"
 };
 const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   day,
@@ -62,11 +62,13 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   minDate,
   maxDate,
   month,
+  nextMonthLabel,
   onBlur = noop,
   onChange = noop,
   onFocus = noop,
   onSelect = noop,
   previouslySelected,
+  previousMonthLabel,
   selected,
   today,
   locale = 'en-US',
@@ -77,7 +79,8 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   calendarRef,
   mode,
   className,
-  style
+  style,
+  tabIndex = 0
 }, ref) {
   const {
     day: [dayValue, setDayValue],
@@ -183,12 +186,14 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     "aria-describedby": announceId,
     "aria-label": "calendar",
     role: "grid",
-    tabIndex: 0
+    tabIndex: tabIndex
   }, jsx(HeadingComponent // The month number needs to be translated to index in the month
   // name array e.g. 1 (January) -> 0
   , {
     monthLongTitle: monthsLong[monthValue - 1],
     year: yearValue,
+    nextMonthLabel: nextMonthLabel,
+    previousMonthLabel: previousMonthLabel,
     handleClickNext: handleClickNext,
     handleClickPrev: handleClickPrev,
     mode: mode,
@@ -206,6 +211,16 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     testId: testId
   }))));
 });
+/**
+ * __Calendar__
+ *
+ * A calendar is used for date selection.
+ *
+ * - [Examples](https://atlassian.design/components/calendar/examples)
+ * - [Code](https://atlassian.design/components/calendar/code)
+ * - [Usage](https://atlassian.design/components/calendar/usage)
+ */
+
 const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Calendar(props, ref) {
   return jsx(GlobalTheme.Consumer, null, ({
     mode

package/dist/es2019/internal/components/date.js

@@ -66,5 +66,6 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
     "data-testid": testId && isSelected ? `${testId}--selected-day` : undefined
   }, day);
 }));
-Date.displayName = 'Date';
+Date.displayName = 'Date'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default Date;

package/dist/es2019/internal/components/heading.js

@@ -31,6 +31,8 @@ const arrowRightStyles = css({
 const Heading = /*#__PURE__*/memo(function Heading({
   monthLongTitle,
   year,
+  previousMonthLabel = 'Last month',
+  nextMonthLabel = 'Next month',
   handleClickPrev,
   handleClickNext,
   mode,
@@ -48,9 +50,10 @@ const Heading = /*#__PURE__*/memo(function Heading({
     onClick: handleClickPrev,
     testId: testId && `${testId}--previous-month`,
     iconBefore: jsx(ArrowleftIcon, {
-      label: "Last month",
+      label: previousMonthLabel,
       size: "medium",
-      primaryColor: `var(--ds-text-subtlest, ${N70})`
+      primaryColor: `var(--ds-text-subtlest, ${N70})`,
+      testId: testId && `${testId}--previous-month-icon`
     })
   }), jsx("div", {
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -64,11 +67,13 @@ const Heading = /*#__PURE__*/memo(function Heading({
     onClick: handleClickNext,
     testId: testId && `${testId}--next-month`,
     iconBefore: jsx(ArrowrightIcon, {
-      label: "Next month",
+      label: nextMonthLabel,
       size: "medium",
-      primaryColor: `var(--ds-text-subtlest, ${N70})`
+      primaryColor: `var(--ds-text-subtlest, ${N70})`,
+      testId: testId && `${testId}--next-month-icon`
     })
   }));
 });
-Heading.displayName = 'Heading';
+Heading.displayName = 'Heading'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default Heading;

package/dist/es2019/internal/components/week-days.js

@@ -35,5 +35,6 @@ const WeekDays = /*#__PURE__*/memo(function WeekDays({
     testId: testId
   }, weekDay.day)))));
 });
-WeekDays.displayName = 'WeekDays';
+WeekDays.displayName = 'WeekDays'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default WeekDays;

package/dist/es2019/internal/components/week-header.js

@@ -29,5 +29,6 @@ const WeekHeader = /*#__PURE__*/memo(function WeekHeader({
     key: shortDay
   }, shortDay)));
 });
-WeekHeader.displayName = 'WeekHeader';
+WeekHeader.displayName = 'WeekHeader'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default WeekHeader;

package/dist/es2019/internal/hooks/use-calendar-ref.js

@@ -1,4 +1,5 @@
 import { useImperativeHandle } from 'react';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default function useCalendarRef(calendarRef, {
   navigate
 }) {

package/dist/es2019/internal/hooks/use-controlled-date-state.js

@@ -1,6 +1,7 @@
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import useLazyRef from '@atlaskit/ds-lib/use-lazy-ref';
-import pad from '../utils/pad';
+import pad from '../utils/pad'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useControlledDateState({
   day,
   defaultDay,

package/dist/es2019/internal/hooks/use-focusing.js

@@ -1,4 +1,5 @@
-import { useCallback } from 'react';
+import { useCallback } from 'react'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useFocusing({
   onBlur,
   onFocus

package/dist/es2019/internal/hooks/use-get-weeks.js

@@ -26,7 +26,8 @@ function useGetCalendarWithSixthWeek(calendar, {
       }));
     }
   }, [calendarLastValue, month, shouldDisplaySixthWeek, weekStartDay, year]);
-}
+} // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default function useGetWeeks({
   day,

package/dist/es2019/internal/hooks/use-handle-date-change.js

@@ -35,7 +35,8 @@ const getPrevMonth = (monthValue, yearValue) => {
     month,
     year
   };
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default function useHandleDateChange({
   day: [dayValue, setDayValue],

package/dist/es2019/internal/hooks/use-handle-date-select.js

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { arrowKeys } from '../constants';
-import dateToString from '../utils/date-to-string';
+import dateToString from '../utils/date-to-string'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useHandleDateSelect({
   day: [dayValue],
   month: [monthValue],

package/dist/es2019/internal/hooks/use-locale.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { createLocalizationProvider } from '@atlaskit/locale';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default function useLocale({
   locale,
   weekStartDay

package/dist/es2019/internal/hooks/use-unique-id.js

@@ -1,4 +1,5 @@
-import { useUIDSeed } from 'react-uid';
+import { useUIDSeed } from 'react-uid'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useUniqueId(prefix) {
   const seed = useUIDSeed();
   return `${prefix}-${seed(prefix)}`;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/calendar",
-	"version": "12.1.14",
+	"version": "12.3.1",
 	"sideEffects": false
 }

package/dist/esm/calendar.js

@@ -30,7 +30,7 @@ var lightWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
+  backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(N0, ")"),
   color: "var(--ds-text, ".concat(N900, ")"),
   outline: 'none',
   userSelect: 'none'
@@ -39,7 +39,7 @@ var darkWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
   padding: 16,
-  backgroundColor: "var(--ds-surface-overlay, ".concat(N700, ")"),
+  backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(N700, ")"),
   color: "var(--ds-text, ".concat(DN600, ")"),
   outline: 'none',
   userSelect: 'none'
@@ -54,7 +54,7 @@ var gridsContainerStyles = css({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.1.14"
+  packageVersion: "12.3.1"
 };
 var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -73,6 +73,7 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
       minDate = _ref.minDate,
       maxDate = _ref.maxDate,
       month = _ref.month,
+      nextMonthLabel = _ref.nextMonthLabel,
       _ref$onBlur = _ref.onBlur,
       onBlur = _ref$onBlur === void 0 ? noop : _ref$onBlur,
       _ref$onChange = _ref.onChange,
@@ -82,6 +83,7 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
       _ref$onSelect = _ref.onSelect,
       onSelect = _ref$onSelect === void 0 ? noop : _ref$onSelect,
       previouslySelected = _ref.previouslySelected,
+      previousMonthLabel = _ref.previousMonthLabel,
       selected = _ref.selected,
       today = _ref.today,
       _ref$locale = _ref.locale,
@@ -94,7 +96,9 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
       calendarRef = _ref.calendarRef,
       mode = _ref.mode,
       className = _ref.className,
-      style = _ref.style;
+      style = _ref.style,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 
   var _useControlledDateSta = useControlledDateState({
     day: day,
@@ -214,12 +218,14 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     "aria-describedby": announceId,
     "aria-label": "calendar",
     role: "grid",
-    tabIndex: 0
+    tabIndex: tabIndex
   }, jsx(HeadingComponent // The month number needs to be translated to index in the month
   // name array e.g. 1 (January) -> 0
   , {
     monthLongTitle: monthsLong[monthValue - 1],
     year: yearValue,
+    nextMonthLabel: nextMonthLabel,
+    previousMonthLabel: previousMonthLabel,
     handleClickNext: handleClickNext,
     handleClickPrev: handleClickPrev,
     mode: mode,
@@ -237,6 +243,16 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     testId: testId
   }))));
 });
+/**
+ * __Calendar__
+ *
+ * A calendar is used for date selection.
+ *
+ * - [Examples](https://atlassian.design/components/calendar/examples)
+ * - [Code](https://atlassian.design/components/calendar/code)
+ * - [Usage](https://atlassian.design/components/calendar/usage)
+ */
+
 var Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Calendar(props, ref) {
   return jsx(GlobalTheme.Consumer, null, function (_ref2) {
     var mode = _ref2.mode;

package/dist/esm/internal/components/date.js

@@ -73,5 +73,6 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
     "data-testid": testId && isSelected ? "".concat(testId, "--selected-day") : undefined
   }, day);
 }));
-Date.displayName = 'Date';
+Date.displayName = 'Date'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default Date;

package/dist/esm/internal/components/heading.js

@@ -34,6 +34,10 @@ var arrowRightStyles = css({
 var Heading = /*#__PURE__*/memo(function Heading(_ref) {
   var monthLongTitle = _ref.monthLongTitle,
       year = _ref.year,
+      _ref$previousMonthLab = _ref.previousMonthLabel,
+      previousMonthLabel = _ref$previousMonthLab === void 0 ? 'Last month' : _ref$previousMonthLab,
+      _ref$nextMonthLabel = _ref.nextMonthLabel,
+      nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
       handleClickPrev = _ref.handleClickPrev,
       handleClickNext = _ref.handleClickNext,
       mode = _ref.mode,
@@ -52,9 +56,10 @@ var Heading = /*#__PURE__*/memo(function Heading(_ref) {
     onClick: handleClickPrev,
     testId: testId && "".concat(testId, "--previous-month"),
     iconBefore: jsx(ArrowleftIcon, {
-      label: "Last month",
+      label: previousMonthLabel,
       size: "medium",
-      primaryColor: "var(--ds-text-subtlest, ".concat(N70, ")")
+      primaryColor: "var(--ds-text-subtlest, ".concat(N70, ")"),
+      testId: testId && "".concat(testId, "--previous-month-icon")
     })
   }), jsx("div", {
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -68,11 +73,13 @@ var Heading = /*#__PURE__*/memo(function Heading(_ref) {
     onClick: handleClickNext,
     testId: testId && "".concat(testId, "--next-month"),
     iconBefore: jsx(ArrowrightIcon, {
-      label: "Next month",
+      label: nextMonthLabel,
       size: "medium",
-      primaryColor: "var(--ds-text-subtlest, ".concat(N70, ")")
+      primaryColor: "var(--ds-text-subtlest, ".concat(N70, ")"),
+      testId: testId && "".concat(testId, "--next-month-icon")
     })
   }));
 });
-Heading.displayName = 'Heading';
+Heading.displayName = 'Heading'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default Heading;