@atlaskit/calendar 13.1.16 → 13.2.0

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

@@ -2,6 +2,8 @@
 import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Grid } from '@atlaskit/primitives';
 import { dateCellStyles as getDateCellStyles } from '../styles/date';
 var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
   var day = _ref.children,
@@ -11,7 +13,9 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
     isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
     _ref$isToday = _ref.isToday,
     isToday = _ref$isToday === void 0 ? false : _ref$isToday,
+    dayLong = _ref.dayLong,
     month = _ref.month,
+    monthLong = _ref.monthLong,
     _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
     _ref$isPreviouslySele = _ref.isPreviouslySelected,
@@ -22,6 +26,8 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
     isSibling = _ref$isSibling === void 0 ? false : _ref$isSibling,
     year = _ref.year,
     mode = _ref.mode,
+    shouldSetFocus = _ref.shouldSetFocus,
+    tabIndex = _ref.tabIndex,
     testId = _ref.testId;
   var dateRef = useRef({
     day: day,
@@ -37,6 +43,12 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
       isDisabled: isDisabled
     };
   }, [day, month, year, isDisabled]);
+  var focusRef = useRef(null);
+  useEffect(function () {
+    if (getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') && isFocused && shouldSetFocus && focusRef.current) {
+      focusRef.current.focus();
+    }
+  }, [isFocused, shouldSetFocus]);
   var handleClick = useCallback(function () {
     var _dateRef$current = dateRef.current,
       dayValue = _dateRef$current.day,
@@ -54,28 +66,44 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
   var dateCellStyles = useMemo(function () {
     return css(getDateCellStyles(mode));
   }, [mode]);
-  return (
-    // TODO: Determine if there is a better way to render the button (should
-    // be fixed with introduction of keyboard accessibility of Calendar in
-    // DSP-9939) (DSP-11588)
-    jsx("button", {
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      css: dateCellStyles,
-      "aria-selected": isSelected ? 'true' : 'false',
-      tabIndex: isSelected ? 0 : -1,
-      type: "button",
-      role: "gridcell",
-      onClick: handleClick,
-      ref: ref,
-      "data-disabled": isDisabled || undefined,
-      "data-focused": isFocused || undefined,
-      "data-prev-selected": isPreviouslySelected || undefined,
-      "data-selected": isSelected || undefined,
-      "data-sibling": isSibling || undefined,
-      "data-today": isToday || undefined,
-      "data-testid": testId && isSelected ? "".concat(testId, "--selected-day") : undefined
-    }, day)
-  );
+  return getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? jsx(Grid, {
+    role: "gridcell",
+    alignItems: "center"
+  }, jsx("button", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: dateCellStyles,
+    "aria-current": isToday ? 'date' : undefined,
+    "aria-disabled": isDisabled || undefined,
+    "aria-label": "".concat(day, ", ").concat(dayLong, " ").concat(monthLong, " ").concat(year),
+    "aria-pressed": isSelected ? 'true' : 'false',
+    tabIndex: isFocused ? tabIndex : -1,
+    type: "button",
+    onClick: handleClick,
+    ref: focusRef,
+    "data-disabled": isDisabled || undefined,
+    "data-focused": isFocused || undefined,
+    "data-prev-selected": isPreviouslySelected || undefined,
+    "data-selected": isSelected || undefined,
+    "data-sibling": isSibling || undefined,
+    "data-today": isToday || undefined,
+    "data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(testId, "--day"))
+  }, day)) : jsx("button", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: dateCellStyles,
+    "aria-selected": isSelected ? 'true' : 'false',
+    tabIndex: isSelected ? 0 : -1,
+    type: "button",
+    role: "gridcell",
+    onClick: handleClick,
+    ref: ref,
+    "data-disabled": isDisabled || undefined,
+    "data-focused": isFocused || undefined,
+    "data-prev-selected": isPreviouslySelected || undefined,
+    "data-selected": isSelected || undefined,
+    "data-sibling": isSibling || undefined,
+    "data-today": isToday || undefined,
+    "data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(testId, "--day"))
+  }, day);
 }));
 Date.displayName = 'Date';
 

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

@@ -5,21 +5,34 @@ import Button from '@atlaskit/button/standard-button';
 import Heading from '@atlaskit/heading';
 import ArrowleftIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import ArrowrightIcon from '@atlaskit/icon/glyph/chevron-right-large';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, Inline } from '@atlaskit/primitives';
 import { N700 } from '@atlaskit/theme/colors';
+import useUniqueId from '../../internal/hooks/use-unique-id';
 var Header = /*#__PURE__*/memo(function Header(_ref) {
   var monthLongTitle = _ref.monthLongTitle,
     year = _ref.year,
     _ref$previousMonthLab = _ref.previousMonthLabel,
-    previousMonthLabel = _ref$previousMonthLab === void 0 ? 'Last month' : _ref$previousMonthLab,
+    previousMonthLabel = _ref$previousMonthLab === void 0 ? getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'Previous month' : 'Last month' : _ref$previousMonthLab,
+    previousHeading = _ref.previousHeading,
     _ref$nextMonthLabel = _ref.nextMonthLabel,
     nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
+    nextHeading = _ref.nextHeading,
     handleClickPrev = _ref.handleClickPrev,
     handleClickNext = _ref.handleClickNext,
+    headerId = _ref.headerId,
+    tabIndex = _ref.tabIndex,
     testId = _ref.testId;
+  var announceId = useUniqueId('month-year-announce');
+  var renderedHeading = jsx(Heading, {
+    level: "h400",
+    as: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'h2' : 'div',
+    id: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? headerId : undefined,
+    testId: testId && "".concat(testId, "--current-month-year")
+  }, "".concat(monthLongTitle, " ").concat(year));
   return jsx(Box, {
     paddingInline: "space.100",
-    "aria-hidden": "true"
+    "aria-hidden": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : 'true'
   }, jsx(Inline, {
     space: "space.0",
     alignBlock: "center",
@@ -27,27 +40,29 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
   }, jsx(Button, {
     appearance: "subtle",
     spacing: "none",
-    tabIndex: -1,
+    tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
     onClick: handleClickPrev,
     testId: testId && "".concat(testId, "--previous-month"),
     iconBefore: jsx(ArrowleftIcon, {
-      label: previousMonthLabel,
+      label: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? "".concat(previousMonthLabel, ", ").concat(previousHeading) : previousMonthLabel,
       size: "medium",
       primaryColor: "var(--ds-icon, ".concat(N700, ")"),
       testId: testId && "".concat(testId, "--previous-month-icon")
     })
-  }), jsx(Heading, {
-    level: "h400",
-    as: "div",
-    testId: testId && "".concat(testId, "--current-month-year")
-  }, "".concat(monthLongTitle, " ").concat(year)), jsx(Button, {
+  }), getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ?
+  // This is required to ensure that the new month/year is announced when the previous/next month buttons are activated
+  jsx(Box, {
+    "aria-live": "polite",
+    id: announceId,
+    testId: testId && "".concat(testId, "--current-month-year--container")
+  }, renderedHeading) : renderedHeading, jsx(Button, {
     appearance: "subtle",
     spacing: "none",
-    tabIndex: -1,
+    tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
     onClick: handleClickNext,
     testId: testId && "".concat(testId, "--next-month"),
     iconBefore: jsx(ArrowrightIcon, {
-      label: nextMonthLabel,
+      label: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? "".concat(nextMonthLabel, ", ").concat(nextHeading) : nextMonthLabel,
       size: "medium",
       primaryColor: "var(--ds-icon, ".concat(N700, ")"),
       testId: testId && "".concat(testId, "--next-month-icon")

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

@@ -8,6 +8,9 @@ var WeekDays = /*#__PURE__*/memo(function WeekDays(_ref) {
   var weeks = _ref.weeks,
     handleClickDay = _ref.handleClickDay,
     mode = _ref.mode,
+    monthsLong = _ref.monthsLong,
+    shouldSetFocus = _ref.shouldSetFocus,
+    tabIndex = _ref.tabIndex,
     testId = _ref.testId;
   return (
     // TODO: Determine if there is a better way to render the button (should be
@@ -26,13 +29,17 @@ var WeekDays = /*#__PURE__*/memo(function WeekDays(_ref) {
           isDisabled: weekDay.isDisabled,
           isFocused: weekDay.isFocused,
           isToday: weekDay.isToday,
+          dayLong: weekDay.weekDayName,
           month: weekDay.month,
+          monthLong: monthsLong[weekDay.month - 1],
           onClick: handleClickDay,
           isPreviouslySelected: weekDay.isPreviouslySelected,
           isSelected: weekDay.isSelected,
           isSibling: weekDay.isSiblingMonth,
           year: weekDay.year,
           mode: mode,
+          shouldSetFocus: shouldSetFocus,
+          tabIndex: tabIndex,
           testId: testId
         }, weekDay.day);
       }));

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

@@ -2,6 +2,7 @@
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
 import Text from '@atlaskit/ds-explorations/text';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import WeekDayGrid from './week-day-grid';
 var columnHeaderStyles = xcss({
@@ -20,22 +21,19 @@ var WeekHeader = /*#__PURE__*/memo(function WeekHeader(_ref) {
   return jsx(WeekDayGrid, {
     testId: testId && "".concat(testId, "--column-headers")
   }, daysShort.map(function (shortDay) {
-    return (
-      // TODO: Determine if there is a better way to render the button
-      // (should be fixed with introduction of keyboard accessibility of
-      // Calendar in DSP-9939) (DSP-11588)
-      jsx(Box, {
-        padding: "space.100",
-        xcss: columnHeaderStyles,
-        key: shortDay,
-        role: "columnheader"
-      }, jsx(Text, {
-        fontWeight: "bold",
-        fontSize: "size.050",
-        verticalAlign: "middle",
-        textTransform: "uppercase"
-      }, shortDay))
-    );
+    return jsx(Box, {
+      "aria-hidden": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'true' : undefined,
+      padding: "space.100",
+      xcss: columnHeaderStyles,
+      key: shortDay,
+      role: "columnheader",
+      testId: testId && "".concat(testId, "--column-header")
+    }, jsx(Text, {
+      fontWeight: "bold",
+      fontSize: "size.050",
+      verticalAlign: "middle",
+      textTransform: "uppercase"
+    }, shortDay));
   }));
 });
 WeekHeader.displayName = 'WeekHeader';

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

@@ -36,6 +36,7 @@ function useGetCalendarWithSixthWeek(calendar, _ref) {
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default function useGetWeeks(_ref2) {
   var day = _ref2.day,
+    daysLong = _ref2.daysLong,
     month = _ref2.month,
     year = _ref2.year,
     today = _ref2.today,
@@ -79,8 +80,10 @@ export default function useGetWeeks(_ref2) {
       } else {
         week = weeks[weeks.length - 1];
       }
+      var weekDayOffset = (date.weekDay - weekStartDay) % 7;
 
       // Define a bunch of `const`s
+      var weekDayName = daysLong[weekDayOffset];
       var isDisabledByArray = disabled ? disabled.indexOf(dateAsString) > -1 : false;
       var isDisabledByFilter = disabledDateFilter ? disabledDateFilter(dateAsString) : false;
       var isDisabledByMin = minDate && JSDate ? JSDate < minDate : false;
@@ -101,9 +104,10 @@ export default function useGetWeeks(_ref2) {
         isSelected: isSelected,
         isSiblingMonth: isSiblingMonth,
         year: date.year,
-        day: date.day
+        day: date.day,
+        weekDayName: weekDayName
       });
     });
     return weeks;
-  }, [calendar, day, disabled, disabledDateFilter, minDate, maxDate, needJsDate, previouslySelected, selected, today, weekStartDay]);
+  }, [calendar, day, disabled, disabledDateFilter, minDate, maxDate, needJsDate, previouslySelected, selected, today, weekStartDay, daysLong]);
 }

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

@@ -46,6 +46,9 @@ export default function useHandleDateChange(_ref) {
     _ref$year = _slicedToArray(_ref.year, 2),
     yearValue = _ref$year[0],
     setYearValue = _ref$year[1],
+    _ref$shouldSetFocus = _slicedToArray(_ref.shouldSetFocus, 2),
+    shouldSetFocus = _ref$shouldSetFocus[0],
+    setShouldSetFocus = _ref$shouldSetFocus[1],
     onChange = _ref.onChange;
   var dateRef = useRef({
     day: dayValue,
@@ -69,6 +72,7 @@ export default function useHandleDateChange(_ref) {
       month: month,
       day: day
     });
+    var isFocusableType = ['up', 'down', 'left', 'right'].includes(type);
     onChange({
       day: day,
       month: month,
@@ -79,7 +83,8 @@ export default function useHandleDateChange(_ref) {
     setDayValue(day);
     setMonthValue(month);
     setYearValue(year);
-  }, [onChange, setDayValue, setMonthValue, setYearValue]);
+    setShouldSetFocus(isFocusableType);
+  }, [onChange, setDayValue, setMonthValue, setYearValue, setShouldSetFocus]);
   var navigate = useCallback(function (type) {
     var _dateRef$current = dateRef.current,
       day = _dateRef$current.day,

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

@@ -13,8 +13,12 @@ export default function useLocale(_ref) {
   var daysShort = useMemo(function () {
     return l10n.getDaysShort(weekStartDay);
   }, [l10n, weekStartDay]);
+  var daysLong = useMemo(function () {
+    return l10n.getDaysLong(weekStartDay);
+  }, [l10n, weekStartDay]);
   return {
     monthsLong: monthsLong,
-    daysShort: daysShort
+    daysShort: daysShort,
+    daysLong: daysLong
   };
 }

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

@@ -1,4 +1,6 @@
-import { B100, B400, B50, B75, DN600, N0, N200, N30, N40, N500, N600, N700, N800, N900 } from '@atlaskit/theme/colors';
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B100, B200, B400, B50, DN600, N0, N200, N30, N40, N500, N600, N700, N800, N900 } from '@atlaskit/theme/colors';
 var textColor = {
   light: "var(--ds-text, ".concat(N900, ")"),
   dark: "var(--ds-text, ".concat(DN600, ")")
@@ -21,12 +23,14 @@ var selectedBackground = {
   dark: "var(--ds-background-selected, ".concat(N0, ")")
 };
 var borderColorFocused = {
-  light: "var(--ds-border-focused, ".concat(B100, ")"),
-  dark: "var(--ds-border-focused, ".concat(B75, ")")
+  light: "var(--ds-border-focused, ".concat(B200, ")"),
+  dark: "var(--ds-border-focused, ".concat(B100, ")")
 };
+var focusBorderSelector = getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? '&:focus-visible' : '&[data-focused]';
 export var dateCellStyles = function dateCellStyles() {
+  var _ref;
   var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
-  return {
+  return _ref = {
     all: 'unset',
     display: 'block',
     padding: "var(--ds-space-050, 4px)".concat(" 9px"),
@@ -67,31 +71,24 @@ export var dateCellStyles = function dateCellStyles() {
     '&[data-disabled]': {
       color: "var(--ds-text-disabled, ".concat(N40, ")"),
       cursor: 'not-allowed'
-    },
-    '&[data-focused]': {
-      border: "2px solid ".concat(borderColorFocused[mode])
-    },
-    '&:hover': {
-      backgroundColor: hoverBackground[mode],
-      color: textColor[mode]
-    },
-    '&:active': {
-      backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"),
-      color: textColor[mode]
-    },
-    '&[data-selected]:hover': {
-      backgroundColor: "var(--ds-background-selected-hovered, ".concat(B50, ")"),
-      color: "var(--ds-text-selected, ".concat(N600, ")")
-    },
-    '&[data-prev-selected]:hover': {
-      color: textColorMedium
-    },
-    '&[data-sibling]:hover': {
-      color: "var(--ds-text-subtlest, ".concat(N200, ")")
-    },
-    '&[data-disabled]:hover': {
-      backgroundColor: 'transparent',
-      color: "var(--ds-text-disabled, ".concat(N40, ")")
     }
-  };
+  }, _defineProperty(_ref, focusBorderSelector, {
+    border: "2px solid ".concat(borderColorFocused[mode])
+  }), _defineProperty(_ref, '&:hover', {
+    backgroundColor: hoverBackground[mode],
+    color: textColor[mode]
+  }), _defineProperty(_ref, '&:active', {
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"),
+    color: textColor[mode]
+  }), _defineProperty(_ref, '&[data-selected]:hover', {
+    backgroundColor: "var(--ds-background-selected-hovered, ".concat(B50, ")"),
+    color: "var(--ds-text-selected, ".concat(N600, ")")
+  }), _defineProperty(_ref, '&[data-prev-selected]:hover', {
+    color: textColorMedium
+  }), _defineProperty(_ref, '&[data-sibling]:hover', {
+    color: "var(--ds-text-subtlest, ".concat(N200, ")")
+  }), _defineProperty(_ref, '&[data-disabled]:hover', {
+    backgroundColor: 'transparent',
+    color: "var(--ds-text-disabled, ".concat(N40, ")")
+  }), _ref;
 };

package/dist/esm/version.json

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

package/dist/types/calendar.d.ts

@@ -9,5 +9,5 @@ import type { CalendarProps } from './types';
  * - [Code](https://atlassian.design/components/calendar/code)
  * - [Usage](https://atlassian.design/components/calendar/usage)
  */
-declare const Calendar: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "year" | "previousMonthLabel" | "nextMonthLabel" | "mode" | "testId" | "className" | "style" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | "onSelect" | "disabled" | "selected" | "analyticsContext" | "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabledDateFilter" | "maxDate" | "minDate" | "month" | "previouslySelected" | "today" | "locale" | "weekStartDay" | "calendarRef" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Calendar: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabled" | "disabledDateFilter" | "maxDate" | "minDate" | "month" | "nextMonthLabel" | "onBlur" | "onChange" | "onFocus" | "onSelect" | "previouslySelected" | "previousMonthLabel" | "selected" | "today" | "year" | "locale" | "analyticsContext" | "weekStartDay" | "testId" | "className" | "style" | "calendarRef" | "mode" | "tabIndex" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
 export default Calendar;

package/dist/types/internal/components/date.d.ts

@@ -1,18 +1,23 @@
 /// <reference types="react" />
 import { ThemeModes } from '@atlaskit/theme/types';
+import type { TabIndex } from '../../types';
 import type { DateObj } from '../types';
 interface DateProps {
     children: number;
     isDisabled?: boolean;
     isFocused?: boolean;
     isToday?: boolean;
+    dayLong: string;
     month: number;
+    monthLong: string;
     onClick?: ({ day, month, year }: DateObj) => void;
     isPreviouslySelected?: boolean;
     isSelected?: boolean;
     isSibling?: boolean;
     year: number;
     mode?: ThemeModes;
+    shouldSetFocus: boolean;
+    tabIndex: TabIndex;
     testId?: string;
 }
 declare const Date: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<DateProps & import("react").RefAttributes<HTMLButtonElement>>>;

package/dist/types/internal/components/header.d.ts

@@ -1,13 +1,18 @@
 /// <reference types="react" />
 import { ThemeModes } from '@atlaskit/theme/types';
+import { TabIndex } from '../../types';
 interface HeaderProps {
     monthLongTitle: string;
     year: number;
     previousMonthLabel?: string;
+    previousHeading: string;
     nextMonthLabel?: string;
+    nextHeading: string;
     handleClickNext?: () => void;
     handleClickPrev?: () => void;
     mode?: ThemeModes;
+    headerId: string;
+    tabIndex?: TabIndex;
     testId?: string;
 }
 declare const Header: import("react").NamedExoticComponent<HeaderProps>;

package/dist/types/internal/components/week-days.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import type { ThemeModes } from '@atlaskit/theme/types';
+import type { TabIndex } from '../../types';
 import { DateObj, Week } from '../types';
 interface WeekDaysProps {
     weeks: Week[];
     handleClickDay: (date: DateObj) => void;
     mode?: ThemeModes;
+    monthsLong: string[];
+    shouldSetFocus: boolean;
+    tabIndex: TabIndex;
     testId?: string;
 }
 declare const WeekDays: import("react").NamedExoticComponent<WeekDaysProps>;

package/dist/types/internal/hooks/use-get-weeks.d.ts

@@ -1,7 +1,8 @@
 import type { WeekDay } from '../../types';
 import type { Week } from '../types';
-export default function useGetWeeks({ day, month, year, today, disabled, disabledDateFilter, minDate: minDateString, maxDate: maxDateString, selected, previouslySelected, weekStartDay, }: {
+export default function useGetWeeks({ day, daysLong, month, year, today, disabled, disabledDateFilter, minDate: minDateString, maxDate: maxDateString, selected, previouslySelected, weekStartDay, }: {
     day: number;
+    daysLong: string[];
     month: number;
     year: number;
     today: string;

package/dist/types/internal/hooks/use-handle-date-change.d.ts

@@ -1,9 +1,10 @@
 import type { ChangeEvent } from '../../types';
 import type { ArrowKeys } from '../types';
-export default function useHandleDateChange({ day: [dayValue, setDayValue], month: [monthValue, setMonthValue], year: [yearValue, setYearValue], onChange, }: {
+export default function useHandleDateChange({ day: [dayValue, setDayValue], month: [monthValue, setMonthValue], year: [yearValue, setYearValue], shouldSetFocus: [shouldSetFocus, setShouldSetFocus], onChange, }: {
     day: readonly [number, (newValue: number) => void];
     month: readonly [number, (newValue: number) => void];
     year: readonly [number, (newValue: number) => void];
+    shouldSetFocus: readonly [boolean, (newValue: boolean) => void];
     onChange: (event: ChangeEvent) => void;
 }): {
     navigate: (type: ArrowKeys) => void;

package/dist/types/internal/hooks/use-locale.d.ts

@@ -5,4 +5,5 @@ export default function useLocale({ locale, weekStartDay, }: {
 }): {
     monthsLong: string[];
     daysShort: string[];
+    daysLong: string[];
 };

package/dist/types/internal/types.d.ts

@@ -17,6 +17,7 @@ export interface Week {
     id: string;
     values: Array<{
         id: string;
+        weekDayName: string;
     } & DateObj & WeekDayState>;
 }
 export interface CalendarDate extends DateObj {

package/dist/types/types.d.ts

@@ -3,6 +3,7 @@ import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-
 import { ThemeModes } from '@atlaskit/theme/types';
 import type { ArrowKeys, DateObj, ISODate } from './internal/types';
 export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type TabIndex = -1 | 0;
 export type ChangeEvent = {
     iso: ISODate;
     type: 'left' | 'up' | 'right' | 'down' | 'prev' | 'next';
@@ -150,9 +151,10 @@ export interface CalendarProps extends WithAnalyticsEventsProps {
      */
     mode?: ThemeModes;
     /**
-     * Tab index indicates if the calendar can be focused by keyboard or only programmatically.
+     * Indicates if the calendar can be focused by keyboard or only
+     * programmatically. Defaults to "0".
      */
-    tabIndex?: number;
+    tabIndex?: TabIndex;
 }
 export interface CalendarRef {
     navigate: (type: ArrowKeys) => void;

package/dist/types-ts4.5/calendar.d.ts

@@ -9,5 +9,5 @@ import type { CalendarProps } from './types';
  * - [Code](https://atlassian.design/components/calendar/code)
  * - [Usage](https://atlassian.design/components/calendar/usage)
  */
-declare const Calendar: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "year" | "previousMonthLabel" | "nextMonthLabel" | "mode" | "testId" | "className" | "style" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | "onSelect" | "disabled" | "selected" | "analyticsContext" | "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabledDateFilter" | "maxDate" | "minDate" | "month" | "previouslySelected" | "today" | "locale" | "weekStartDay" | "calendarRef" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Calendar: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabled" | "disabledDateFilter" | "maxDate" | "minDate" | "month" | "nextMonthLabel" | "onBlur" | "onChange" | "onFocus" | "onSelect" | "previouslySelected" | "previousMonthLabel" | "selected" | "today" | "year" | "locale" | "analyticsContext" | "weekStartDay" | "testId" | "className" | "style" | "calendarRef" | "mode" | "tabIndex" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
 export default Calendar;

package/dist/types-ts4.5/internal/components/date.d.ts

@@ -1,18 +1,23 @@
 /// <reference types="react" />
 import { ThemeModes } from '@atlaskit/theme/types';
+import type { TabIndex } from '../../types';
 import type { DateObj } from '../types';
 interface DateProps {
     children: number;
     isDisabled?: boolean;
     isFocused?: boolean;
     isToday?: boolean;
+    dayLong: string;
     month: number;
+    monthLong: string;
     onClick?: ({ day, month, year }: DateObj) => void;
     isPreviouslySelected?: boolean;
     isSelected?: boolean;
     isSibling?: boolean;
     year: number;
     mode?: ThemeModes;
+    shouldSetFocus: boolean;
+    tabIndex: TabIndex;
     testId?: string;
 }
 declare const Date: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<DateProps & import("react").RefAttributes<HTMLButtonElement>>>;

package/dist/types-ts4.5/internal/components/header.d.ts

@@ -1,13 +1,18 @@
 /// <reference types="react" />
 import { ThemeModes } from '@atlaskit/theme/types';
+import { TabIndex } from '../../types';
 interface HeaderProps {
     monthLongTitle: string;
     year: number;
     previousMonthLabel?: string;
+    previousHeading: string;
     nextMonthLabel?: string;
+    nextHeading: string;
     handleClickNext?: () => void;
     handleClickPrev?: () => void;
     mode?: ThemeModes;
+    headerId: string;
+    tabIndex?: TabIndex;
     testId?: string;
 }
 declare const Header: import("react").NamedExoticComponent<HeaderProps>;

package/dist/types-ts4.5/internal/components/week-days.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import type { ThemeModes } from '@atlaskit/theme/types';
+import type { TabIndex } from '../../types';
 import { DateObj, Week } from '../types';
 interface WeekDaysProps {
     weeks: Week[];
     handleClickDay: (date: DateObj) => void;
     mode?: ThemeModes;
+    monthsLong: string[];
+    shouldSetFocus: boolean;
+    tabIndex: TabIndex;
     testId?: string;
 }
 declare const WeekDays: import("react").NamedExoticComponent<WeekDaysProps>;

package/dist/types-ts4.5/internal/hooks/use-get-weeks.d.ts

@@ -1,7 +1,8 @@
 import type { WeekDay } from '../../types';
 import type { Week } from '../types';
-export default function useGetWeeks({ day, month, year, today, disabled, disabledDateFilter, minDate: minDateString, maxDate: maxDateString, selected, previouslySelected, weekStartDay, }: {
+export default function useGetWeeks({ day, daysLong, month, year, today, disabled, disabledDateFilter, minDate: minDateString, maxDate: maxDateString, selected, previouslySelected, weekStartDay, }: {
     day: number;
+    daysLong: string[];
     month: number;
     year: number;
     today: string;