@cloudscape-design/components 3.0.529 → 3.0.531

package/calendar/grid/calendar-grid-header.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export default function CalendarGridHeader({ locale, rows }: {
+    locale: string;
+    rows: Date[][];
+}): JSX.Element;
+//# sourceMappingURL=calendar-grid-header.d.ts.map

package/calendar/grid/calendar-grid-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-grid-header.d.ts","sourceRoot":"lib/default/","sources":["calendar/grid/calendar-grid-header.tsx"],"names":[],"mappings":";AASA,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAA;CAAE,eAmB9F"}

package/calendar/grid/calendar-grid-header.js

@@ -0,0 +1,16 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import ScreenreaderOnly from '../../internal/components/screenreader-only';
+import { renderDayName } from '../utils/intl';
+import styles from '../styles.css.js';
+export default function CalendarGridHeader({ locale, rows }) {
+    return (React.createElement("thead", null,
+        React.createElement("tr", null, rows[0]
+            .map(date => date.getDay())
+            .map(dayIndex => (React.createElement("th", { key: dayIndex, scope: "col", className: clsx(styles['calendar-grid-cell'], styles['calendar-date-header']) },
+            React.createElement("span", { "aria-hidden": "true" }, renderDayName(locale, dayIndex, 'short')),
+            React.createElement(ScreenreaderOnly, null, renderDayName(locale, dayIndex, 'long'))))))));
+}
+//# sourceMappingURL=calendar-grid-header.js.map

package/calendar/grid/calendar-grid-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-grid-header.js","sourceRoot":"lib/default/","sources":["calendar/grid/calendar-grid-header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,gBAAgB,MAAM,6CAA6C,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAsC;IAC7F,OAAO,CACL;QACE,gCACG,IAAI,CAAC,CAAC,CAAC;aACL,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;aAC1B,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CACf,4BACE,GAAG,EAAE,QAAQ,EACb,KAAK,EAAC,KAAK,EACX,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,sBAAsB,CAAC,CAAC;YAE7E,6CAAkB,MAAM,IAAE,aAAa,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAQ;YAC1E,oBAAC,gBAAgB,QAAE,aAAa,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAoB,CAC3E,CACN,CAAC,CACD,CACC,CACT,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\nimport { renderDayName } from '../utils/intl';\nimport styles from '../styles.css.js';\n\nexport default function CalendarGridHeader({ locale, rows }: { locale: string; rows: Date[][] }) {\n  return (\n    <thead>\n      <tr>\n        {rows[0]\n          .map(date => date.getDay())\n          .map(dayIndex => (\n            <th\n              key={dayIndex}\n              scope=\"col\"\n              className={clsx(styles['calendar-grid-cell'], styles['calendar-date-header'])}\n            >\n              <span aria-hidden=\"true\">{renderDayName(locale, dayIndex, 'short')}</span>\n              <ScreenreaderOnly>{renderDayName(locale, dayIndex, 'long')}</ScreenreaderOnly>\n            </th>\n          ))}\n      </tr>\n    </thead>\n  );\n}\n"]}

package/calendar/grid/index.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { DayIndex } from '../internal';
+import React from 'react';
 import { DatePickerProps } from '../../date-picker/interfaces';
 /**
  * Calendar grid supports two mechanisms of keyboard navigation:
@@ -16,18 +15,21 @@ import { DatePickerProps } from '../../date-picker/interfaces';
  * - (keyboard navigation) Safari/Chrome+VO - date announcements are not interruptive and can be missed if navigating fast.
  */
 export interface GridProps {
-    locale: string;
-    baseDate: Date;
     isDateEnabled: DatePickerProps.IsDateEnabledFunction;
     focusedDate: Date | null;
     focusableDate: Date | null;
     onSelectDate: (date: Date) => void;
     onFocusDate: (date: null | Date) => void;
-    onChangeMonth: (date: Date) => void;
-    startOfWeek: DayIndex;
-    todayAriaLabel?: string;
+    onChangePage: (date: Date) => void;
     selectedDate: Date | null;
     ariaLabelledby: string;
+    header?: React.ReactNode;
+    rows: ReadonlyArray<ReadonlyArray<Date>>;
+    isCurrentPage: (date: Date) => boolean;
+    renderDate: (date: Date) => string;
+    renderDateAnnouncement: (date: Date, isOnCurrentDate: boolean) => string;
+    isSameDate: (date: Date, baseDate: Date) => boolean;
+    onGridKeyDownHandler: (event: React.KeyboardEvent) => void;
 }
-export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, focusableDate, onSelectDate, onFocusDate, onChangeMonth, startOfWeek, todayAriaLabel, selectedDate, ariaLabelledby, }: GridProps): JSX.Element;
+export default function Grid({ isDateEnabled, focusedDate, focusableDate, onSelectDate, selectedDate, ariaLabelledby, header, rows, isCurrentPage, renderDate, renderDateAnnouncement, isSameDate, onGridKeyDownHandler, }: GridProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/calendar/grid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["calendar/grid/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAO/D;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,IAAI,CAAC;IACf,aAAa,EAAE,eAAe,CAAC,qBAAqB,CAAC;IACrD,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,aAAa,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,MAAM,EACN,QAAQ,EACR,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,EACb,WAAW,EACX,cAAc,EACd,YAAY,EACZ,cAAc,GACf,EAAE,SAAS,eAiIX"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["calendar/grid/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAK/D;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,SAAS;IACxB,aAAa,EAAE,eAAe,CAAC,qBAAqB,CAAC;IACrD,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,aAAa,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACnC,sBAAsB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,KAAK,MAAM,CAAC;IACzE,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,KAAK,OAAO,CAAC;IACpD,oBAAoB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC5D;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,MAAM,EACN,IAAI,EACJ,aAAa,EACb,UAAU,EACV,sBAAsB,EACtB,UAAU,EACV,oBAAoB,GACrB,EAAE,SAAS,eA+DX"}

package/calendar/grid/index.js

@@ -1,55 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useMemo, useRef } from 'react';
+import React, { useRef } from 'react';
 import styles from '../styles.css.js';
-import { KeyCode } from '../../internal/keycode';
-import { isSameDay, isSameMonth } from 'date-fns';
-import { getCalendarMonth } from 'mnth';
-import { getDateLabel, renderDayName } from '../utils/intl';
 import clsx from 'clsx';
 import { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update.js';
 import ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';
-import { moveNextDay, movePrevDay, moveNextWeek, movePrevWeek } from '../utils/navigation';
-export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, focusableDate, onSelectDate, onFocusDate, onChangeMonth, startOfWeek, todayAriaLabel, selectedDate, ariaLabelledby, }) {
+export default function Grid({ isDateEnabled, focusedDate, focusableDate, onSelectDate, selectedDate, ariaLabelledby, header, rows, isCurrentPage, renderDate, renderDateAnnouncement, isSameDate, onGridKeyDownHandler, }) {
     const focusedDateRef = useRef(null);
-    const onGridKeyDownHandler = (event) => {
-        let updatedFocusDate;
-        if (focusableDate === null) {
-            return;
-        }
-        switch (event.keyCode) {
-            case KeyCode.space:
-            case KeyCode.enter:
-                event.preventDefault();
-                if (focusableDate) {
-                    onFocusDate(null);
-                    onSelectDate(focusableDate);
-                }
-                return;
-            case KeyCode.right:
-                event.preventDefault();
-                updatedFocusDate = moveNextDay(focusableDate, isDateEnabled);
-                break;
-            case KeyCode.left:
-                event.preventDefault();
-                updatedFocusDate = movePrevDay(focusableDate, isDateEnabled);
-                break;
-            case KeyCode.up:
-                event.preventDefault();
-                updatedFocusDate = movePrevWeek(focusableDate, isDateEnabled);
-                break;
-            case KeyCode.down:
-                event.preventDefault();
-                updatedFocusDate = moveNextWeek(focusableDate, isDateEnabled);
-                break;
-            default:
-                return;
-        }
-        if (!isSameMonth(updatedFocusDate, baseDate)) {
-            onChangeMonth(updatedFocusDate);
-        }
-        onFocusDate(updatedFocusDate);
-    };
     // The focused date changes as a feedback to keyboard navigation in the grid.
     // Once changed, the corresponding date button needs to receive the actual focus.
     useEffectOnUpdate(() => {
@@ -57,18 +14,13 @@ export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, foc
             focusedDateRef.current.focus();
         }
     }, [focusedDate]);
-    const weeks = useMemo(() => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }), [baseDate, startOfWeek]);
-    const weekdays = weeks[0].map(date => date.getDay());
     return (React.createElement("table", { role: "grid", className: styles['calendar-grid'], "aria-labelledby": ariaLabelledby },
-        React.createElement("thead", null,
-            React.createElement("tr", null, weekdays.map(dayIndex => (React.createElement("th", { key: dayIndex, scope: "col", className: clsx(styles['calendar-grid-cell'], styles['calendar-date-header']) },
-                React.createElement("span", { "aria-hidden": "true" }, renderDayName(locale, dayIndex, 'short')),
-                React.createElement(ScreenreaderOnly, null, renderDayName(locale, dayIndex, 'long'))))))),
-        React.createElement("tbody", { onKeyDown: onGridKeyDownHandler }, weeks.map((week, weekIndex) => (React.createElement("tr", { key: weekIndex, className: styles['calendar-row'] }, week.map((date, dateIndex) => {
-            const isFocusable = !!focusableDate && isSameDay(date, focusableDate);
-            const isSelected = !!selectedDate && isSameDay(date, selectedDate);
+        header,
+        React.createElement("tbody", { onKeyDown: onGridKeyDownHandler }, rows.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex, className: styles['calendar-row'] }, row.map((date, dateIndex) => {
+            const isFocusable = !!focusableDate && isSameDate(date, focusableDate);
+            const isSelected = !!selectedDate && isSameDate(date, selectedDate);
             const isEnabled = !isDateEnabled || isDateEnabled(date);
-            const isDateOnSameDay = isSameDay(date, new Date());
+            const isCurrentDate = isSameDate(date, new Date());
             // Can't be focused.
             let tabIndex = undefined;
             if (isFocusable && isEnabled) {
@@ -79,21 +31,16 @@ export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, foc
                 // Can be focused programmatically.
                 tabIndex = -1;
             }
-            // Screen-reader announcement for the focused date.
-            let dayAnnouncement = getDateLabel(locale, date, 'short');
-            if (isDateOnSameDay && todayAriaLabel) {
-                dayAnnouncement += '. ' + todayAriaLabel;
-            }
-            return (React.createElement("td", { key: `${weekIndex}:${dateIndex}`, ref: tabIndex === 0 ? focusedDateRef : undefined, tabIndex: tabIndex, "aria-current": isDateOnSameDay ? 'date' : undefined, "aria-selected": isEnabled ? isSelected : undefined, "aria-disabled": !isEnabled, 
+            return (React.createElement("td", { key: `${rowIndex}:${dateIndex}`, ref: tabIndex === 0 ? focusedDateRef : undefined, tabIndex: tabIndex, "aria-current": isCurrentDate ? 'date' : undefined, "aria-selected": isEnabled ? isSelected : undefined, "aria-disabled": !isEnabled, 
                 // Do not attach click event when the date is disabled, otherwise VO+safari announces clickable
                 onClick: isEnabled ? () => onSelectDate(date) : undefined, className: clsx(styles['calendar-grid-cell'], styles['calendar-date'], {
-                    [styles['calendar-date-current-page']]: isSameMonth(date, baseDate),
+                    [styles['calendar-date-current-page']]: isCurrentPage(date),
                     [styles['calendar-date-enabled']]: isEnabled,
                     [styles['calendar-date-selected']]: isSelected,
-                    [styles['calendar-date-current']]: isDateOnSameDay,
+                    [styles['calendar-date-current']]: isCurrentDate,
                 }) },
-                React.createElement("span", { className: styles['date-inner'], "aria-hidden": "true" }, date.getDate()),
-                React.createElement(ScreenreaderOnly, null, dayAnnouncement)));
+                React.createElement("span", { className: styles['date-inner'], "aria-hidden": "true" }, renderDate(date)),
+                React.createElement(ScreenreaderOnly, null, renderDateAnnouncement(date, isCurrentDate))));
         })))))));
 }
 //# sourceMappingURL=index.js.map

package/calendar/grid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["calendar/grid/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo, useRef } from 'react';\nimport styles from '../styles.css.js';\nimport { KeyCode } from '../../internal/keycode';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { getCalendarMonth } from 'mnth';\nimport { DayIndex } from '../internal';\nimport { DatePickerProps } from '../../date-picker/interfaces';\nimport { getDateLabel, renderDayName } from '../utils/intl';\nimport clsx from 'clsx';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update.js';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';\nimport { moveNextDay, movePrevDay, moveNextWeek, movePrevWeek } from '../utils/navigation';\n\n/**\n * Calendar grid supports two mechanisms of keyboard navigation:\n * - Native screen-reader table navigation (semantic table markup);\n * - Keyboard arrow-keys navigation (a custom key-down handler).\n *\n * The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:\n * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;\n * - (table navigation) Safari+VO - \"dimmed\" state is announced twice;\n * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;\n * - (keyboard navigation) Firefox+NVDA - every date is announced as \"not selected\";\n * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;\n * - (keyboard navigation) Safari/Chrome+VO - dates are not announced as interactive (clickable or selectable);\n * - (keyboard navigation) Safari/Chrome+VO - date announcements are not interruptive and can be missed if navigating fast.\n */\n\nexport interface GridProps {\n  locale: string;\n  baseDate: Date;\n  isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n  focusedDate: Date | null;\n  focusableDate: Date | null;\n  onSelectDate: (date: Date) => void;\n  onFocusDate: (date: null | Date) => void;\n  onChangeMonth: (date: Date) => void;\n  startOfWeek: DayIndex;\n  todayAriaLabel?: string;\n  selectedDate: Date | null;\n  ariaLabelledby: string;\n}\n\nexport default function Grid({\n  locale,\n  baseDate,\n  isDateEnabled,\n  focusedDate,\n  focusableDate,\n  onSelectDate,\n  onFocusDate,\n  onChangeMonth,\n  startOfWeek,\n  todayAriaLabel,\n  selectedDate,\n  ariaLabelledby,\n}: GridProps) {\n  const focusedDateRef = useRef<HTMLTableCellElement>(null);\n\n  const onGridKeyDownHandler = (event: React.KeyboardEvent) => {\n    let updatedFocusDate;\n\n    if (focusableDate === null) {\n      return;\n    }\n\n    switch (event.keyCode) {\n      case KeyCode.space:\n      case KeyCode.enter:\n        event.preventDefault();\n        if (focusableDate) {\n          onFocusDate(null);\n          onSelectDate(focusableDate);\n        }\n        return;\n      case KeyCode.right:\n        event.preventDefault();\n        updatedFocusDate = moveNextDay(focusableDate, isDateEnabled);\n        break;\n      case KeyCode.left:\n        event.preventDefault();\n        updatedFocusDate = movePrevDay(focusableDate, isDateEnabled);\n        break;\n      case KeyCode.up:\n        event.preventDefault();\n        updatedFocusDate = movePrevWeek(focusableDate, isDateEnabled);\n        break;\n      case KeyCode.down:\n        event.preventDefault();\n        updatedFocusDate = moveNextWeek(focusableDate, isDateEnabled);\n        break;\n      default:\n        return;\n    }\n\n    if (!isSameMonth(updatedFocusDate, baseDate)) {\n      onChangeMonth(updatedFocusDate);\n    }\n    onFocusDate(updatedFocusDate);\n  };\n\n  // The focused date changes as a feedback to keyboard navigation in the grid.\n  // Once changed, the corresponding date button needs to receive the actual focus.\n  useEffectOnUpdate(() => {\n    if (focusedDate && focusedDateRef.current) {\n      (focusedDateRef.current as HTMLDivElement).focus();\n    }\n  }, [focusedDate]);\n\n  const weeks = useMemo<Date[][]>(\n    () => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),\n    [baseDate, startOfWeek]\n  );\n  const weekdays = weeks[0].map(date => date.getDay());\n\n  return (\n    <table role=\"grid\" className={styles['calendar-grid']} aria-labelledby={ariaLabelledby}>\n      <thead>\n        <tr>\n          {weekdays.map(dayIndex => (\n            <th\n              key={dayIndex}\n              scope=\"col\"\n              className={clsx(styles['calendar-grid-cell'], styles['calendar-date-header'])}\n            >\n              <span aria-hidden=\"true\">{renderDayName(locale, dayIndex, 'short')}</span>\n              <ScreenreaderOnly>{renderDayName(locale, dayIndex, 'long')}</ScreenreaderOnly>\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody onKeyDown={onGridKeyDownHandler}>\n        {weeks.map((week, weekIndex) => (\n          <tr key={weekIndex} className={styles['calendar-row']}>\n            {week.map((date, dateIndex) => {\n              const isFocusable = !!focusableDate && isSameDay(date, focusableDate);\n              const isSelected = !!selectedDate && isSameDay(date, selectedDate);\n              const isEnabled = !isDateEnabled || isDateEnabled(date);\n              const isDateOnSameDay = isSameDay(date, new Date());\n\n              // Can't be focused.\n              let tabIndex = undefined;\n              if (isFocusable && isEnabled) {\n                // Next focus target.\n                tabIndex = 0;\n              } else if (isEnabled) {\n                // Can be focused programmatically.\n                tabIndex = -1;\n              }\n\n              // Screen-reader announcement for the focused date.\n              let dayAnnouncement = getDateLabel(locale, date, 'short');\n              if (isDateOnSameDay && todayAriaLabel) {\n                dayAnnouncement += '. ' + todayAriaLabel;\n              }\n\n              return (\n                <td\n                  key={`${weekIndex}:${dateIndex}`}\n                  ref={tabIndex === 0 ? focusedDateRef : undefined}\n                  tabIndex={tabIndex}\n                  aria-current={isDateOnSameDay ? 'date' : undefined}\n                  aria-selected={isEnabled ? isSelected : undefined}\n                  aria-disabled={!isEnabled}\n                  // Do not attach click event when the date is disabled, otherwise VO+safari announces clickable\n                  onClick={isEnabled ? () => onSelectDate(date) : undefined}\n                  className={clsx(styles['calendar-grid-cell'], styles['calendar-date'], {\n                    [styles['calendar-date-current-page']]: isSameMonth(date, baseDate),\n                    [styles['calendar-date-enabled']]: isEnabled,\n                    [styles['calendar-date-selected']]: isSelected,\n                    [styles['calendar-date-current']]: isDateOnSameDay,\n                  })}\n                >\n                  <span className={styles['date-inner']} aria-hidden=\"true\">\n                    {date.getDate()}\n                  </span>\n                  <ScreenreaderOnly>{dayAnnouncement}</ScreenreaderOnly>\n                </td>\n              );\n            })}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["calendar/grid/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport styles from '../styles.css.js';\nimport { DatePickerProps } from '../../date-picker/interfaces';\nimport clsx from 'clsx';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update.js';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';\n\n/**\n * Calendar grid supports two mechanisms of keyboard navigation:\n * - Native screen-reader table navigation (semantic table markup);\n * - Keyboard arrow-keys navigation (a custom key-down handler).\n *\n * The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:\n * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;\n * - (table navigation) Safari+VO - \"dimmed\" state is announced twice;\n * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;\n * - (keyboard navigation) Firefox+NVDA - every date is announced as \"not selected\";\n * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;\n * - (keyboard navigation) Safari/Chrome+VO - dates are not announced as interactive (clickable or selectable);\n * - (keyboard navigation) Safari/Chrome+VO - date announcements are not interruptive and can be missed if navigating fast.\n */\n\nexport interface GridProps {\n  isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n  focusedDate: Date | null;\n  focusableDate: Date | null;\n  onSelectDate: (date: Date) => void;\n  onFocusDate: (date: null | Date) => void;\n  onChangePage: (date: Date) => void;\n  selectedDate: Date | null;\n  ariaLabelledby: string;\n  header?: React.ReactNode;\n  rows: ReadonlyArray<ReadonlyArray<Date>>;\n  isCurrentPage: (date: Date) => boolean;\n  renderDate: (date: Date) => string;\n  renderDateAnnouncement: (date: Date, isOnCurrentDate: boolean) => string;\n  isSameDate: (date: Date, baseDate: Date) => boolean;\n  onGridKeyDownHandler: (event: React.KeyboardEvent) => void;\n}\n\nexport default function Grid({\n  isDateEnabled,\n  focusedDate,\n  focusableDate,\n  onSelectDate,\n  selectedDate,\n  ariaLabelledby,\n  header,\n  rows,\n  isCurrentPage,\n  renderDate,\n  renderDateAnnouncement,\n  isSameDate,\n  onGridKeyDownHandler,\n}: GridProps) {\n  const focusedDateRef = useRef<HTMLTableCellElement>(null);\n\n  // The focused date changes as a feedback to keyboard navigation in the grid.\n  // Once changed, the corresponding date button needs to receive the actual focus.\n  useEffectOnUpdate(() => {\n    if (focusedDate && focusedDateRef.current) {\n      (focusedDateRef.current as HTMLDivElement).focus();\n    }\n  }, [focusedDate]);\n\n  return (\n    <table role=\"grid\" className={styles['calendar-grid']} aria-labelledby={ariaLabelledby}>\n      {header}\n      <tbody onKeyDown={onGridKeyDownHandler}>\n        {rows.map((row, rowIndex) => (\n          <tr key={rowIndex} className={styles['calendar-row']}>\n            {row.map((date, dateIndex) => {\n              const isFocusable = !!focusableDate && isSameDate(date, focusableDate);\n              const isSelected = !!selectedDate && isSameDate(date, selectedDate);\n              const isEnabled = !isDateEnabled || isDateEnabled(date);\n              const isCurrentDate = isSameDate(date, new Date());\n\n              // Can't be focused.\n              let tabIndex = undefined;\n              if (isFocusable && isEnabled) {\n                // Next focus target.\n                tabIndex = 0;\n              } else if (isEnabled) {\n                // Can be focused programmatically.\n                tabIndex = -1;\n              }\n\n              return (\n                <td\n                  key={`${rowIndex}:${dateIndex}`}\n                  ref={tabIndex === 0 ? focusedDateRef : undefined}\n                  tabIndex={tabIndex}\n                  aria-current={isCurrentDate ? 'date' : undefined}\n                  aria-selected={isEnabled ? isSelected : undefined}\n                  aria-disabled={!isEnabled}\n                  // Do not attach click event when the date is disabled, otherwise VO+safari announces clickable\n                  onClick={isEnabled ? () => onSelectDate(date) : undefined}\n                  className={clsx(styles['calendar-grid-cell'], styles['calendar-date'], {\n                    [styles['calendar-date-current-page']]: isCurrentPage(date),\n                    [styles['calendar-date-enabled']]: isEnabled,\n                    [styles['calendar-date-selected']]: isSelected,\n                    [styles['calendar-date-current']]: isCurrentDate,\n                  })}\n                >\n                  <span className={styles['date-inner']} aria-hidden=\"true\">\n                    {renderDate(date)}\n                  </span>\n                  {/* Screen-reader announcement for the focused date. */}\n                  <ScreenreaderOnly>{renderDateAnnouncement(date, isCurrentDate)}</ScreenreaderOnly>\n                </td>\n              );\n            })}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n"]}

package/calendar/grid/use-calendar-grid-keyboard-navigation.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CalendarProps } from '../interfaces';
+export default function useCalendarGridKeyboardNavigation({ baseDate, focusableDate, isDateEnabled, onChangePage, onFocusDate, onSelectDate, }: {
+    baseDate: Date;
+    focusableDate: Date | null;
+    isDateEnabled: CalendarProps.IsDateEnabledFunction;
+    onChangePage: (date: Date) => void;
+    onFocusDate: (date: null | Date) => void;
+    onSelectDate: (date: Date) => void;
+}): (event: React.KeyboardEvent) => void;
+//# sourceMappingURL=use-calendar-grid-keyboard-navigation.d.ts.map

package/calendar/grid/use-calendar-grid-keyboard-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-calendar-grid-keyboard-navigation.d.ts","sourceRoot":"lib/default/","sources":["calendar/grid/use-calendar-grid-keyboard-navigation.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI9C,MAAM,CAAC,OAAO,UAAU,iCAAiC,CAAC,EACxD,QAAQ,EACR,aAAa,EACb,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,GACb,EAAE;IACD,QAAQ,EAAE,IAAI,CAAC;IACf,aAAa,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC,qBAAqB,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACpC,WACsC,mBAAmB,UA2CzD"}

package/calendar/grid/use-calendar-grid-keyboard-navigation.js

@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { isSameMonth } from 'date-fns';
+import { moveNextDay, movePrevDay, moveNextWeek, movePrevWeek } from '../utils/navigation';
+import { KeyCode } from '../../internal/keycode';
+export default function useCalendarGridKeyboardNavigation({ baseDate, focusableDate, isDateEnabled, onChangePage, onFocusDate, onSelectDate, }) {
+    const onGridKeyDownHandler = (event) => {
+        let updatedFocusDate;
+        if (focusableDate === null) {
+            return;
+        }
+        switch (event.keyCode) {
+            case KeyCode.space:
+            case KeyCode.enter:
+                event.preventDefault();
+                if (focusableDate) {
+                    onFocusDate(null);
+                    onSelectDate(focusableDate);
+                }
+                return;
+            case KeyCode.right:
+                event.preventDefault();
+                updatedFocusDate = moveNextDay(focusableDate, isDateEnabled);
+                break;
+            case KeyCode.left:
+                event.preventDefault();
+                updatedFocusDate = movePrevDay(focusableDate, isDateEnabled);
+                break;
+            case KeyCode.up:
+                event.preventDefault();
+                updatedFocusDate = movePrevWeek(focusableDate, isDateEnabled);
+                break;
+            case KeyCode.down:
+                event.preventDefault();
+                updatedFocusDate = moveNextWeek(focusableDate, isDateEnabled);
+                break;
+            default:
+                return;
+        }
+        if (!isSameMonth(updatedFocusDate, baseDate)) {
+            onChangePage(updatedFocusDate);
+        }
+        onFocusDate(updatedFocusDate);
+    };
+    return onGridKeyDownHandler;
+}
+//# sourceMappingURL=use-calendar-grid-keyboard-navigation.js.map

package/calendar/grid/use-calendar-grid-keyboard-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-calendar-grid-keyboard-navigation.js","sourceRoot":"lib/default/","sources":["calendar/grid/use-calendar-grid-keyboard-navigation.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAGtC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,MAAM,CAAC,OAAO,UAAU,iCAAiC,CAAC,EACxD,QAAQ,EACR,aAAa,EACb,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,GAQb;IACC,MAAM,oBAAoB,GAAG,CAAC,KAA0B,EAAE,EAAE;QAC1D,IAAI,gBAAgB,CAAC;QAErB,IAAI,aAAa,KAAK,IAAI,EAAE;YAC1B,OAAO;SACR;QAED,QAAQ,KAAK,CAAC,OAAO,EAAE;YACrB,KAAK,OAAO,CAAC,KAAK,CAAC;YACnB,KAAK,OAAO,CAAC,KAAK;gBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,aAAa,EAAE;oBACjB,WAAW,CAAC,IAAI,CAAC,CAAC;oBAClB,YAAY,CAAC,aAAa,CAAC,CAAC;iBAC7B;gBACD,OAAO;YACT,KAAK,OAAO,CAAC,KAAK;gBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,gBAAgB,GAAG,WAAW,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;gBAC7D,MAAM;YACR,KAAK,OAAO,CAAC,IAAI;gBACf,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,gBAAgB,GAAG,WAAW,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;gBAC7D,MAAM;YACR,KAAK,OAAO,CAAC,EAAE;gBACb,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,gBAAgB,GAAG,YAAY,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;gBAC9D,MAAM;YACR,KAAK,OAAO,CAAC,IAAI;gBACf,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,gBAAgB,GAAG,YAAY,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;gBAC9D,MAAM;YACR;gBACE,OAAO;SACV;QAED,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE,QAAQ,CAAC,EAAE;YAC5C,YAAY,CAAC,gBAAgB,CAAC,CAAC;SAChC;QACD,WAAW,CAAC,gBAAgB,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,OAAO,oBAAoB,CAAC;AAC9B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport { isSameMonth } from 'date-fns';\nimport { CalendarProps } from '../interfaces';\nimport { moveNextDay, movePrevDay, moveNextWeek, movePrevWeek } from '../utils/navigation';\nimport { KeyCode } from '../../internal/keycode';\n\nexport default function useCalendarGridKeyboardNavigation({\n  baseDate,\n  focusableDate,\n  isDateEnabled,\n  onChangePage,\n  onFocusDate,\n  onSelectDate,\n}: {\n  baseDate: Date;\n  focusableDate: Date | null;\n  isDateEnabled: CalendarProps.IsDateEnabledFunction;\n  onChangePage: (date: Date) => void;\n  onFocusDate: (date: null | Date) => void;\n  onSelectDate: (date: Date) => void;\n}) {\n  const onGridKeyDownHandler = (event: React.KeyboardEvent) => {\n    let updatedFocusDate;\n\n    if (focusableDate === null) {\n      return;\n    }\n\n    switch (event.keyCode) {\n      case KeyCode.space:\n      case KeyCode.enter:\n        event.preventDefault();\n        if (focusableDate) {\n          onFocusDate(null);\n          onSelectDate(focusableDate);\n        }\n        return;\n      case KeyCode.right:\n        event.preventDefault();\n        updatedFocusDate = moveNextDay(focusableDate, isDateEnabled);\n        break;\n      case KeyCode.left:\n        event.preventDefault();\n        updatedFocusDate = movePrevDay(focusableDate, isDateEnabled);\n        break;\n      case KeyCode.up:\n        event.preventDefault();\n        updatedFocusDate = movePrevWeek(focusableDate, isDateEnabled);\n        break;\n      case KeyCode.down:\n        event.preventDefault();\n        updatedFocusDate = moveNextWeek(focusableDate, isDateEnabled);\n        break;\n      default:\n        return;\n    }\n\n    if (!isSameMonth(updatedFocusDate, baseDate)) {\n      onChangePage(updatedFocusDate);\n    }\n    onFocusDate(updatedFocusDate);\n  };\n\n  return onGridKeyDownHandler;\n}\n"]}

package/calendar/grid/use-calendar-grid-rows.d.ts

@@ -0,0 +1,6 @@
+export default function useCalendarGridRows({ baseDate, locale, startOfWeek, }: {
+    baseDate: Date;
+    locale: string;
+    startOfWeek?: number;
+}): Date[][];
+//# sourceMappingURL=use-calendar-grid-rows.d.ts.map

package/calendar/grid/use-calendar-grid-rows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-calendar-grid-rows.d.ts","sourceRoot":"lib/default/","sources":["calendar/grid/use-calendar-grid-rows.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,MAAM,EACN,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,YASA"}

package/calendar/grid/use-calendar-grid-rows.js

@@ -0,0 +1,11 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useMemo } from 'react';
+import { normalizeStartOfWeek } from '../../internal/utils/locale/index.js';
+import { getCalendarMonth } from 'mnth';
+export default function useCalendarGridRows({ baseDate, locale, startOfWeek, }) {
+    const normalizedStartOfWeek = normalizeStartOfWeek(startOfWeek, locale);
+    const rows = useMemo(() => getCalendarMonth(baseDate, { firstDayOfWeek: normalizedStartOfWeek }), [baseDate, normalizedStartOfWeek]);
+    return rows;
+}
+//# sourceMappingURL=use-calendar-grid-rows.js.map

package/calendar/grid/use-calendar-grid-rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-calendar-grid-rows.js","sourceRoot":"lib/default/","sources":["calendar/grid/use-calendar-grid-rows.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAExC,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,MAAM,EACN,WAAW,GAKZ;IACC,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAExE,MAAM,IAAI,GAAG,OAAO,CAClB,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,EAAE,cAAc,EAAE,qBAAqB,EAAE,CAAC,EAC3E,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAClC,CAAC;IAEF,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useMemo } from 'react';\nimport { normalizeStartOfWeek } from '../../internal/utils/locale/index.js';\nimport { getCalendarMonth } from 'mnth';\n\nexport default function useCalendarGridRows({\n  baseDate,\n  locale,\n  startOfWeek,\n}: {\n  baseDate: Date;\n  locale: string;\n  startOfWeek?: number;\n}) {\n  const normalizedStartOfWeek = normalizeStartOfWeek(startOfWeek, locale);\n\n  const rows = useMemo<Date[][]>(\n    () => getCalendarMonth(baseDate, { firstDayOfWeek: normalizedStartOfWeek }),\n    [baseDate, normalizedStartOfWeek]\n  );\n\n  return rows;\n}\n"]}

package/calendar/header/header-button.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 interface HeaderButtonProps {
     ariaLabel?: string;
-    baseDate: Date;
-    onChangeMonth: (date: Date) => void;
+    onChange: (n: number) => void;
 }
-export declare function PrevMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps): JSX.Element;
-export declare function NextMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps): JSX.Element;
+export declare function HeaderPrevButton({ ariaLabel, onChange }: HeaderButtonProps): JSX.Element;
+export declare function HeaderNextButton({ ariaLabel, onChange }: HeaderButtonProps): JSX.Element;
 export {};
 //# sourceMappingURL=header-button.d.ts.map

package/calendar/header/header-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header-button.d.ts","sourceRoot":"lib/default/","sources":["calendar/header/header-button.tsx"],"names":[],"mappings":";AAQA,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,IAAI,CAAC;IACf,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,iBAAiB,eAWxF;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,iBAAiB,eAWxF"}
+{"version":3,"file":"header-button.d.ts","sourceRoot":"lib/default/","sources":["calendar/header/header-button.tsx"],"names":[],"mappings":";AAOA,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,iBAAiB,eAW1E;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,iBAAiB,eAW1E"}

package/calendar/header/header-button.js

@@ -3,11 +3,10 @@
 import React from 'react';
 import { InternalButton } from '../../button/internal';
 import styles from '../styles.css.js';
-import { addMonths } from 'date-fns';
-export function PrevMonthButton({ ariaLabel, baseDate, onChangeMonth }) {
-    return (React.createElement(InternalButton, { iconName: "angle-left", ariaLabel: ariaLabel, variant: "icon", onClick: () => onChangeMonth(addMonths(baseDate, -1)), formAction: "none", className: styles['calendar-prev-btn'] }));
+export function HeaderPrevButton({ ariaLabel, onChange }) {
+    return (React.createElement(InternalButton, { iconName: "angle-left", ariaLabel: ariaLabel, variant: "icon", onClick: () => onChange(-1), formAction: "none", className: styles['calendar-prev-btn'] }));
 }
-export function NextMonthButton({ ariaLabel, baseDate, onChangeMonth }) {
-    return (React.createElement(InternalButton, { iconName: "angle-right", ariaLabel: ariaLabel, variant: "icon", onClick: () => onChangeMonth(addMonths(baseDate, 1)), formAction: "none", className: styles['calendar-next-btn'] }));
+export function HeaderNextButton({ ariaLabel, onChange }) {
+    return (React.createElement(InternalButton, { iconName: "angle-right", ariaLabel: ariaLabel, variant: "icon", onClick: () => onChange(1), formAction: "none", className: styles['calendar-next-btn'] }));
 }
 //# sourceMappingURL=header-button.js.map

package/calendar/header/header-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-button.js","sourceRoot":"lib/default/","sources":["calendar/header/header-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAQrC,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAqB;IACvF,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EACrD,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,GACtC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAqB;IACvF,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,aAAa,EACtB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EACpD,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,GACtC,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport { InternalButton } from '../../button/internal';\nimport styles from '../styles.css.js';\nimport { addMonths } from 'date-fns';\n\ninterface HeaderButtonProps {\n  ariaLabel?: string;\n  baseDate: Date;\n  onChangeMonth: (date: Date) => void;\n}\n\nexport function PrevMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps) {\n  return (\n    <InternalButton\n      iconName=\"angle-left\"\n      ariaLabel={ariaLabel}\n      variant=\"icon\"\n      onClick={() => onChangeMonth(addMonths(baseDate, -1))}\n      formAction=\"none\"\n      className={styles['calendar-prev-btn']}\n    />\n  );\n}\n\nexport function NextMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps) {\n  return (\n    <InternalButton\n      iconName=\"angle-right\"\n      ariaLabel={ariaLabel}\n      variant=\"icon\"\n      onClick={() => onChangeMonth(addMonths(baseDate, 1))}\n      formAction=\"none\"\n      className={styles['calendar-next-btn']}\n    />\n  );\n}\n"]}
+{"version":3,"file":"header-button.js","sourceRoot":"lib/default/","sources":["calendar/header/header-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAOtC,MAAM,UAAU,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAqB;IACzE,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAC3B,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,GACtC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAqB;IACzE,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,aAAa,EACtB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC1B,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,GACtC,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport { InternalButton } from '../../button/internal';\nimport styles from '../styles.css.js';\n\ninterface HeaderButtonProps {\n  ariaLabel?: string;\n  onChange: (n: number) => void;\n}\n\nexport function HeaderPrevButton({ ariaLabel, onChange }: HeaderButtonProps) {\n  return (\n    <InternalButton\n      iconName=\"angle-left\"\n      ariaLabel={ariaLabel}\n      variant=\"icon\"\n      onClick={() => onChange(-1)}\n      formAction=\"none\"\n      className={styles['calendar-prev-btn']}\n    />\n  );\n}\n\nexport function HeaderNextButton({ ariaLabel, onChange }: HeaderButtonProps) {\n  return (\n    <InternalButton\n      iconName=\"angle-right\"\n      ariaLabel={ariaLabel}\n      variant=\"icon\"\n      onClick={() => onChange(1)}\n      formAction=\"none\"\n      className={styles['calendar-next-btn']}\n    />\n  );\n}\n"]}

package/calendar/header/index.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="react" />
 interface CalendarHeaderProps {
-    baseDate: Date;
-    locale: string;
-    onChangeMonth: (date: Date) => void;
-    previousMonthLabel?: string;
-    nextMonthLabel?: string;
+    formattedDate: string;
+    onChange: (n: number) => void;
+    previousLabel?: string;
+    nextLabel?: string;
     headingId: string;
 }
-declare const CalendarHeader: ({ baseDate, locale, onChangeMonth, previousMonthLabel, nextMonthLabel, headingId, }: CalendarHeaderProps) => JSX.Element;
+declare const CalendarHeader: ({ formattedDate, onChange, previousLabel, nextLabel, headingId }: CalendarHeaderProps) => JSX.Element;
 export default CalendarHeader;
 //# sourceMappingURL=index.d.ts.map

package/calendar/header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["calendar/header/index.tsx"],"names":[],"mappings":";AAOA,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,cAAc,wFAOjB,mBAAmB,gBAUrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["calendar/header/index.tsx"],"names":[],"mappings":";AAMA,UAAU,mBAAmB;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,cAAc,qEAAsE,mBAAmB,gBAU5G,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/calendar/header/index.js

@@ -2,13 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import styles from '../styles.css.js';
-import { renderMonthAndYear } from '../utils/intl';
-import { PrevMonthButton, NextMonthButton } from './header-button';
-const CalendarHeader = ({ baseDate, locale, onChangeMonth, previousMonthLabel, nextMonthLabel, headingId, }) => {
+import { HeaderPrevButton, HeaderNextButton } from './header-button';
+const CalendarHeader = ({ formattedDate, onChange, previousLabel, nextLabel, headingId }) => {
     return (React.createElement("div", { className: styles['calendar-header'] },
-        React.createElement(PrevMonthButton, { ariaLabel: previousMonthLabel, baseDate: baseDate, onChangeMonth: onChangeMonth }),
-        React.createElement("h2", { className: styles['calendar-header-month'], id: headingId }, renderMonthAndYear(locale, baseDate)),
-        React.createElement(NextMonthButton, { ariaLabel: nextMonthLabel, baseDate: baseDate, onChangeMonth: onChangeMonth })));
+        React.createElement(HeaderPrevButton, { ariaLabel: previousLabel, onChange: onChange }),
+        React.createElement("h2", { className: styles['calendar-header-title'], id: headingId }, formattedDate),
+        React.createElement(HeaderNextButton, { ariaLabel: nextLabel, onChange: onChange })));
 };
 export default CalendarHeader;
 //# sourceMappingURL=index.js.map

package/calendar/header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["calendar/header/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAWnE,MAAM,cAAc,GAAG,CAAC,EACtB,QAAQ,EACR,MAAM,EACN,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,SAAS,GACW,EAAE,EAAE;IACxB,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;QACvC,oBAAC,eAAe,IAAC,SAAS,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,GAAI;QACpG,4BAAI,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,EAAE,SAAS,IAC1D,kBAAkB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAClC;QACL,oBAAC,eAAe,IAAC,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,GAAI,CAC5F,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from '../styles.css.js';\nimport { renderMonthAndYear } from '../utils/intl';\nimport { PrevMonthButton, NextMonthButton } from './header-button';\n\ninterface CalendarHeaderProps {\n  baseDate: Date;\n  locale: string;\n  onChangeMonth: (date: Date) => void;\n  previousMonthLabel?: string;\n  nextMonthLabel?: string;\n  headingId: string;\n}\n\nconst CalendarHeader = ({\n  baseDate,\n  locale,\n  onChangeMonth,\n  previousMonthLabel,\n  nextMonthLabel,\n  headingId,\n}: CalendarHeaderProps) => {\n  return (\n    <div className={styles['calendar-header']}>\n      <PrevMonthButton ariaLabel={previousMonthLabel} baseDate={baseDate} onChangeMonth={onChangeMonth} />\n      <h2 className={styles['calendar-header-month']} id={headingId}>\n        {renderMonthAndYear(locale, baseDate)}\n      </h2>\n      <NextMonthButton ariaLabel={nextMonthLabel} baseDate={baseDate} onChangeMonth={onChangeMonth} />\n    </div>\n  );\n};\n\nexport default CalendarHeader;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["calendar/header/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAUrE,MAAM,cAAc,GAAG,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAuB,EAAE,EAAE;IAC/G,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;QACvC,oBAAC,gBAAgB,IAAC,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAI;QAClE,4BAAI,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,EAAE,SAAS,IAC1D,aAAa,CACX;QACL,oBAAC,gBAAgB,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC1D,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from '../styles.css.js';\nimport { HeaderPrevButton, HeaderNextButton } from './header-button';\n\ninterface CalendarHeaderProps {\n  formattedDate: string;\n  onChange: (n: number) => void;\n  previousLabel?: string;\n  nextLabel?: string;\n  headingId: string;\n}\n\nconst CalendarHeader = ({ formattedDate, onChange, previousLabel, nextLabel, headingId }: CalendarHeaderProps) => {\n  return (\n    <div className={styles['calendar-header']}>\n      <HeaderPrevButton ariaLabel={previousLabel} onChange={onChange} />\n      <h2 className={styles['calendar-header-title']} id={headingId}>\n        {formattedDate}\n      </h2>\n      <HeaderNextButton ariaLabel={nextLabel} onChange={onChange} />\n    </div>\n  );\n};\n\nexport default CalendarHeader;\n"]}

package/calendar/internal.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { CalendarProps } from './interfaces.js';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';
-export type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-export default function Calendar({ value, locale, startOfWeek, isDateEnabled, ariaLabel, ariaLabelledby, ariaDescribedby, onChange, __internalRootRef, i18nStrings, ...rest }: CalendarProps & InternalBaseComponentProps): JSX.Element;
+export default function Calendar({ value, locale, startOfWeek, isDateEnabled, ariaLabel, ariaLabelledby, ariaDescribedby, onChange, __internalRootRef, i18nStrings, previousMonthAriaLabel, nextMonthAriaLabel, todayAriaLabel, ...rest }: CalendarProps & InternalBaseComponentProps): JSX.Element;
 //# sourceMappingURL=internal.d.ts.map

package/calendar/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["calendar/internal.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAM3F,MAAM,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,MAAW,EACX,WAAW,EACX,aAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,QAAQ,EACR,iBAAiB,EACjB,WAAW,EACX,GAAG,IAAI,EACR,EAAE,aAAa,GAAG,0BAA0B,eAoH5C"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["calendar/internal.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAS3F,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,MAAW,EACX,WAAW,EACX,aAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,QAAQ,EACR,iBAAiB,EACjB,WAAW,EACX,sBAAsB,EACtB,kBAAkB,EAClB,cAAc,EACd,GAAG,IAAI,EACR,EAAE,aAAa,GAAG,0BAA0B,eAuI5C"}

package/calendar/internal.js

@@ -2,27 +2,28 @@
 // SPDX-License-Identifier: Apache-2.0
 import { __rest } from "tslib";
 import React, { useEffect, useRef, useState } from 'react';
-import { isSameMonth } from 'date-fns';
+import { addMonths, isSameDay, isSameMonth } from 'date-fns';
 import styles from './styles.css.js';
 import CalendarHeader from './header';
 import Grid from './grid';
-import { normalizeLocale, normalizeStartOfWeek } from '../internal/utils/locale';
+import { normalizeLocale } from '../internal/utils/locale';
 import { formatDate, parseDate } from '../internal/utils/date-time';
 import { fireNonCancelableEvent } from '../internal/events/index.js';
 import checkControlled from '../internal/hooks/check-controlled/index.js';
 import clsx from 'clsx';
 import { getBaseProps } from '../internal/base-component';
-import { getBaseDate } from './utils/navigation';
+import { getBaseDay } from './utils/navigation';
 import { useDateCache } from '../internal/hooks/use-date-cache/index.js';
 import { useUniqueId } from '../internal/hooks/use-unique-id/index.js';
-import { useInternalI18n } from '../i18n/context.js';
+import useCalendarLabels from './use-calendar-labels';
+import useCalendarGridRows from './grid/use-calendar-grid-rows';
+import useCalendarGridKeyboardNavigation from './grid/use-calendar-grid-keyboard-navigation';
+import CalendarGridHeader from './grid/calendar-grid-header';
 export default function Calendar(_a) {
-    var _b, _c, _d;
-    var { value, locale = '', startOfWeek, isDateEnabled = () => true, ariaLabel, ariaLabelledby, ariaDescribedby, onChange, __internalRootRef, i18nStrings } = _a, rest = __rest(_a, ["value", "locale", "startOfWeek", "isDateEnabled", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "onChange", "__internalRootRef", "i18nStrings"]);
+    var { value, locale = '', startOfWeek, isDateEnabled = () => true, ariaLabel, ariaLabelledby, ariaDescribedby, onChange, __internalRootRef, i18nStrings, previousMonthAriaLabel, nextMonthAriaLabel, todayAriaLabel } = _a, rest = __rest(_a, ["value", "locale", "startOfWeek", "isDateEnabled", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "onChange", "__internalRootRef", "i18nStrings", "previousMonthAriaLabel", "nextMonthAriaLabel", "todayAriaLabel"]);
     checkControlled('Calendar', 'value', value, 'onChange', onChange);
     const baseProps = getBaseProps(rest);
     const normalizedLocale = normalizeLocale('Calendar', locale);
-    const normalizedStartOfWeek = normalizeStartOfWeek(startOfWeek, normalizedLocale);
     const gridWrapperRef = useRef(null);
     const [focusedDate, setFocusedDate] = useState(null);
     const valueDateCache = useDateCache();
@@ -33,10 +34,16 @@ export default function Calendar(_a) {
     const defaultDisplayedDate = memoizedValue !== null && memoizedValue !== void 0 ? memoizedValue : new Date();
     const [displayedDate, setDisplayedDate] = useState(defaultDisplayedDate);
     const headingId = useUniqueId('calendar-heading');
-    const i18n = useInternalI18n('calendar');
-    const nextMonthAriaLabel = i18n('nextMonthAriaLabel', (_b = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.nextMonthAriaLabel) !== null && _b !== void 0 ? _b : rest.nextMonthAriaLabel);
-    const previousMonthAriaLabel = i18n('previousMonthAriaLabel', (_c = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.previousMonthAriaLabel) !== null && _c !== void 0 ? _c : rest.previousMonthAriaLabel);
-    const todayAriaLabel = i18n('todayAriaLabel', (_d = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.todayAriaLabel) !== null && _d !== void 0 ? _d : rest.todayAriaLabel);
+    const baseDate = getBaseDay(displayedDate, isDateEnabled);
+    const isCurrentPage = (date) => isSameMonth(date, baseDate);
+    const { previousButtonLabel, nextButtonLabel, renderDate, renderDateAnnouncement, renderHeaderText } = useCalendarLabels({
+        i18nStrings,
+        locale: normalizedLocale,
+        previousMonthAriaLabel,
+        nextMonthAriaLabel,
+        todayAriaLabel,
+    });
+    const gridRows = useCalendarGridRows({ baseDate, startOfWeek, locale: normalizedLocale });
     // Update displayed date if value changes.
     useEffect(() => {
         memoizedValue && setDisplayedDate(prev => (prev.getTime() !== memoizedValue.getTime() ? memoizedValue : prev));
@@ -54,14 +61,13 @@ export default function Calendar(_a) {
         }
         return null;
     };
-    const baseDate = getBaseDate(displayedDate, isDateEnabled);
     const focusableDate = focusedDate || selectFocusedDate(memoizedValue, baseDate);
-    const onHeaderChangeMonthHandler = (date) => {
-        setDisplayedDate(date);
-        setFocusedDate(null);
+    const onHeaderChangePageHandler = (amount) => {
+        const newDate = addMonths(baseDate, amount);
+        onChangePageHandler(newDate);
     };
-    const onGridChangeMonthHandler = (newMonth) => {
-        setDisplayedDate(newMonth);
+    const onChangePageHandler = (newDate) => {
+        setDisplayedDate(newDate);
         setFocusedDate(null);
     };
     const onGridFocusDateHandler = (date) => {
@@ -80,10 +86,19 @@ export default function Calendar(_a) {
             setFocusedDate(null);
         }
     };
+    const onGridKeyDownHandler = useCalendarGridKeyboardNavigation({
+        baseDate,
+        focusableDate,
+        isDateEnabled,
+        onChangePage: onChangePageHandler,
+        onFocusDate: onGridFocusDateHandler,
+        onSelectDate: onGridSelectDateHandler,
+    });
+    const headerText = renderHeaderText(baseDate);
     return (React.createElement("div", Object.assign({ ref: __internalRootRef }, baseProps, { role: "group", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: clsx(styles.root, styles.calendar, baseProps.className) }),
         React.createElement("div", { className: styles['calendar-inner'] },
-            React.createElement(CalendarHeader, { baseDate: baseDate, locale: normalizedLocale, onChangeMonth: onHeaderChangeMonthHandler, previousMonthLabel: previousMonthAriaLabel, nextMonthLabel: nextMonthAriaLabel, headingId: headingId }),
+            React.createElement(CalendarHeader, { formattedDate: headerText, onChange: onHeaderChangePageHandler, previousLabel: previousButtonLabel, nextLabel: nextButtonLabel, headingId: headingId }),
             React.createElement("div", { onBlur: onGridBlur, ref: gridWrapperRef },
-                React.createElement(Grid, { locale: normalizedLocale, baseDate: baseDate, isDateEnabled: isDateEnabled, focusedDate: focusedDate, focusableDate: focusableDate, onSelectDate: onGridSelectDateHandler, onFocusDate: onGridFocusDateHandler, onChangeMonth: onGridChangeMonthHandler, startOfWeek: normalizedStartOfWeek, todayAriaLabel: todayAriaLabel, selectedDate: memoizedValue, ariaLabelledby: headingId })))));
+                React.createElement(Grid, { isDateEnabled: isDateEnabled, focusedDate: focusedDate, focusableDate: focusableDate, onSelectDate: onGridSelectDateHandler, onFocusDate: onGridFocusDateHandler, onChangePage: onChangePageHandler, selectedDate: memoizedValue, ariaLabelledby: headingId, header: React.createElement(CalendarGridHeader, { locale: normalizedLocale, rows: gridRows }), rows: gridRows, isCurrentPage: isCurrentPage, renderDate: renderDate, renderDateAnnouncement: renderDateAnnouncement, isSameDate: isSameDay, onGridKeyDownHandler: onGridKeyDownHandler })))));
 }
 //# sourceMappingURL=internal.js.map