@cloudscape-design/components-themeable 3.0.895 → 3.0.896

package/lib/internal/template/date-range-picker/calendar/grids/grid.js

@@ -0,0 +1,174 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { isLastDayOfMonth, isSameDay, isSameMonth, isSameYear, isThisMonth, isToday } from 'date-fns';
+import { useInternalI18n } from '../../../i18n/context';
+import ScreenreaderOnly from '../../../internal/components/screenreader-only';
+import { formatDate } from '../../../internal/utils/date-time';
+import { MonthCalendar, YearCalendar } from '../../../internal/utils/date-time/calendar';
+import { normalizeStartOfWeek } from '../../../internal/utils/locale/index.js';
+import { GridCell } from './grid-cell';
+import { renderDateAnnouncement, renderDayName } from './intl';
+import testutilStyles from '../../test-classes/styles.css.js';
+import styles from './styles.css.js';
+const dayUtils = {
+    getItemKey: (rowIndex, rowItemIndex) => `${rowIndex}:${rowItemIndex}`,
+    isSameItem: (date1, date2) => isSameDay(date1, date2),
+    isSamePage: (date1, date2) => isSameMonth(date1, date2),
+    checkIfCurrentDay: date => isToday(date),
+    checkIfCurrentMonth: () => false,
+    checkIfCurrent: date => isToday(date),
+    getPageName: () => 'month',
+};
+const monthUtils = {
+    getItemKey: (rowIndex, rowItemIndex) => `Month ${rowIndex * 3 + rowItemIndex + 1}`,
+    isSameItem: (date1, date2) => isSameMonth(date1, date2),
+    isSamePage: (date1, date2) => isSameYear(date1, date2),
+    checkIfCurrentDay: () => false,
+    checkIfCurrentMonth: date => isThisMonth(date),
+    checkIfCurrent: date => isThisMonth(date),
+    getPageName: () => 'year',
+};
+/**
+ * Calendar grid supports two mechanisms of keyboard navigation:
+ * - Native screen-reader table navigation (semantic table markup);
+ * - Keyboard arrow-keys navigation (a custom key-down handler).
+ *
+ * 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:
+ * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;
+ * - (table navigation) Safari+VO - "dimmed" state is announced twice;
+ * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;
+ * - (keyboard navigation) Firefox+NVDA - every day is announced as "not selected";
+ * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;
+ * - (keyboard navigation) Safari/Chrome+VO - days are not announced as interactive (clickable or selectable);
+ * - (keyboard navigation) Safari/Chrome+VO - day announcements are not interruptive and can be missed if navigating fast.
+ */
+export function Grid({ padDates, baseDate, selectedStartDate, selectedEndDate, rangeStartDate, rangeEndDate, focusedDate, focusedDateRef, onSelectDate, onGridKeyDownHandler, onFocusedDateChange, isDateEnabled, dateDisabledReason, locale, todayAriaLabel, currentMonthAriaLabel, ariaLabelledby, className, startOfWeek: rawStartOfWeek = 0, granularity = 'day', }) {
+    const baseDateTime = baseDate === null || baseDate === void 0 ? void 0 : baseDate.getTime();
+    const i18n = useInternalI18n('date-range-picker');
+    const isMonthPicker = granularity === 'month';
+    const startOfWeek = normalizeStartOfWeek(rawStartOfWeek, locale);
+    const calendar = useMemo(() => {
+        const startDate = rangeStartDate !== null && rangeStartDate !== void 0 ? rangeStartDate : rangeEndDate;
+        const endDate = rangeEndDate !== null && rangeEndDate !== void 0 ? rangeEndDate : rangeStartDate;
+        const selection = startDate && endDate ? [startDate, endDate] : null;
+        if (isMonthPicker) {
+            const calendarData = new YearCalendar({ baseDate, selection });
+            return {
+                header: [],
+                rows: calendarData.quarters,
+                range: calendarData.range,
+            };
+        }
+        const calendarData = new MonthCalendar({ padDates, startOfWeek, baseDate, selection });
+        return {
+            header: calendarData.weekdays,
+            rows: calendarData.weeks,
+            range: calendarData.range,
+        };
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [padDates, startOfWeek, baseDateTime, rangeStartDate, rangeEndDate]);
+    const currentAnnouncement = i18n(isMonthPicker ? 'i18nStrings.currentMonthAriaLabel' : 'i18nStrings.todayAriaLabel', isMonthPicker ? currentMonthAriaLabel : todayAriaLabel);
+    return (React.createElement("table", { role: "grid", "aria-labelledby": ariaLabelledby, className: clsx(styles.grid, className) },
+        !isMonthPicker && (React.createElement("thead", null,
+            React.createElement("tr", null, calendar.header.map(dayIndex => (React.createElement("th", { key: dayIndex, scope: "col", className: clsx(styles['grid-cell'], styles['day-header'], testutilStyles['day-header']) },
+                React.createElement("span", { "aria-hidden": "true" }, renderDayName(locale, dayIndex, 'short')),
+                React.createElement(ScreenreaderOnly, null, renderDayName(locale, dayIndex, 'long')))))))),
+        React.createElement("tbody", { onKeyDown: onGridKeyDownHandler }, calendar.rows.map((row, rowIndex) => {
+            const rowItems = isMonthPicker ? row.months : row.days;
+            const weekTestIndex = !isMonthPicker ? row.testIndex : undefined;
+            return (React.createElement("tr", Object.assign({ key: rowIndex, className: clsx({
+                    [testutilStyles['calendar-quarter']]: isMonthPicker,
+                    [testutilStyles['calendar-week']]: !isMonthPicker,
+                }) }, (!isMonthPicker && weekTestIndex
+                ? {
+                    ['data-awsui-weekindex']: weekTestIndex,
+                }
+                : {})), rowItems.map(({ date, isVisible, isInRange, isSelectionTop, isSelectionBottom, isSelectionLeft, isSelectionRight }, rowItemIndex) => {
+                const { getItemKey, isSameItem, isSamePage, checkIfCurrent, checkIfCurrentDay, checkIfCurrentMonth, getPageName, } = isMonthPicker ? monthUtils : dayUtils;
+                const itemKey = getItemKey(rowIndex, rowItemIndex);
+                const pageName = getPageName();
+                const isCurrentDay = checkIfCurrentDay(date);
+                const isCurrentMonth = checkIfCurrentMonth(date);
+                const isCurrent = checkIfCurrent(date);
+                const isStartDate = !!selectedStartDate && isSameItem(date, selectedStartDate);
+                const isEndDate = !!selectedEndDate && isSameItem(date, selectedEndDate);
+                const isSelected = isStartDate || isEndDate;
+                const isFocused = !!focusedDate && isSameItem(date, focusedDate) && isSamePage(date, baseDate);
+                const onlyOneSelected = !!rangeStartDate && !!rangeEndDate
+                    ? isSameItem(rangeStartDate, rangeEndDate)
+                    : !selectedStartDate || !selectedEndDate;
+                const isEnabled = (!isDateEnabled || isDateEnabled(date)) && isSamePage(date, baseDate);
+                const disabledReason = dateDisabledReason(date);
+                const isDisabledWithReason = !isEnabled && !!disabledReason;
+                const isFocusable = isFocused && (isEnabled || isDisabledWithReason);
+                const baseClasses = {
+                    [testutilStyles['calendar-date']]: !isMonthPicker && isSameMonth(date, baseDate),
+                    [testutilStyles['calendar-month']]: isMonthPicker && isSameYear(date, baseDate),
+                    [styles.day]: !isMonthPicker,
+                    [styles.month]: isMonthPicker,
+                    [styles['grid-cell']]: true,
+                    [styles['in-first-row']]: rowIndex === 0,
+                    [styles['in-first-column']]: rowItemIndex === 0,
+                };
+                if (!isVisible) {
+                    return (React.createElement("td", { key: itemKey, ref: isFocused ? focusedDateRef : undefined, className: clsx(baseClasses, {
+                            [styles[`last-day-of-month`]]: !isMonthPicker && isLastDayOfMonth(date),
+                            [styles[`last-month-of-year`]]: isMonthPicker && date.getMonth() === 11,
+                        }) }));
+                }
+                const handlers = {};
+                if (isEnabled) {
+                    handlers.onClick = () => onSelectDate(date);
+                    handlers.onFocus = () => onFocusedDateChange(date);
+                }
+                // Screen-reader announcement for the focused day/month.
+                let announcement = renderDateAnnouncement({
+                    date,
+                    isCurrent,
+                    locale,
+                    granularity,
+                });
+                if (currentAnnouncement) {
+                    if (isMonthPicker && isThisMonth(date)) {
+                        announcement += `. ${currentAnnouncement}`;
+                    }
+                    else if (!isMonthPicker && isToday(date)) {
+                        announcement += `. ${currentAnnouncement}`;
+                    }
+                }
+                // Can't be focused.
+                let tabIndex = undefined;
+                if (isEnabled || isDisabledWithReason) {
+                    tabIndex = isFocusable
+                        ? 0 // Next focus target.
+                        : -1; // Can be focused programmatically.
+                }
+                return (React.createElement(GridCell, Object.assign({ ref: isFocused ? focusedDateRef : undefined, key: itemKey, className: clsx(baseClasses, {
+                        [styles['in-visible-calendar']]: true,
+                        [styles[`in-current-${pageName}`]]: isSamePage(date, baseDate),
+                        [styles.enabled]: isEnabled,
+                        [styles.selected]: isSelected,
+                        [styles['start-date']]: isStartDate,
+                        [styles['end-date']]: isEndDate,
+                        [testutilStyles['start-date']]: isStartDate,
+                        [testutilStyles['end-date']]: isEndDate,
+                        [styles['no-range']]: isSelected && onlyOneSelected,
+                        [styles['in-range']]: isInRange,
+                        [styles['in-range-border-block-start']]: isSelectionTop,
+                        [styles['in-range-border-block-end']]: isSelectionBottom,
+                        [styles['in-range-border-inline-start']]: isSelectionLeft,
+                        [styles['in-range-border-inline-end']]: isSelectionRight,
+                        [styles.today]: isCurrentDay,
+                        [testutilStyles.today]: isCurrentDay,
+                        [styles['this-month']]: isCurrentMonth,
+                        [testutilStyles['this-month']]: isCurrentMonth,
+                    }), "aria-selected": isEnabled ? isSelected || isInRange : undefined, "aria-current": isCurrent ? 'date' : undefined, "data-date": formatDate(date, granularity), "aria-disabled": !isEnabled, tabIndex: tabIndex, disabledReason: isDisabledWithReason ? disabledReason : undefined }, handlers),
+                    React.createElement("span", { className: styles[`${granularity}-inner`], "aria-hidden": "true" }, isMonthPicker ? date.toLocaleString(locale, { month: 'short' }) : date.getDate()),
+                    React.createElement(ScreenreaderOnly, null, announcement)));
+            })));
+        }))));
+}
+//# sourceMappingURL=grid.js.map

package/lib/internal/template/date-range-picker/calendar/grids/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/grid.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 } from 'react';\nimport clsx from 'clsx';\nimport { isLastDayOfMonth, isSameDay, isSameMonth, isSameYear, isThisMonth, isToday } from 'date-fns';\n\nimport { useInternalI18n } from '../../../i18n/context';\nimport ScreenreaderOnly from '../../../internal/components/screenreader-only';\nimport { formatDate } from '../../../internal/utils/date-time';\nimport { CalendarQuarter, CalendarWeek, MonthCalendar, YearCalendar } from '../../../internal/utils/date-time/calendar';\nimport { normalizeStartOfWeek } from '../../../internal/utils/locale/index.js';\nimport { GridCell } from './grid-cell';\nimport { GridProps } from './interfaces';\nimport { renderDateAnnouncement, renderDayName } from './intl';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface DatePickerUtils {\n  getItemKey: (rowIndex: number, rowItemIndex: number) => string;\n  isSameItem: (date1: Date, date2: Date) => boolean;\n  isSamePage: (date1: Date, date2: Date) => boolean;\n  checkIfCurrentDay: (date: Date) => boolean;\n  checkIfCurrentMonth: (date: Date) => boolean;\n  checkIfCurrent: (date: Date) => boolean;\n  getPageName: () => string;\n}\n\nconst dayUtils: DatePickerUtils = {\n  getItemKey: (rowIndex, rowItemIndex) => `${rowIndex}:${rowItemIndex}`,\n  isSameItem: (date1: Date, date2: Date) => isSameDay(date1, date2),\n  isSamePage: (date1: Date, date2: Date) => isSameMonth(date1, date2),\n  checkIfCurrentDay: date => isToday(date),\n  checkIfCurrentMonth: () => false,\n  checkIfCurrent: date => isToday(date),\n  getPageName: () => 'month',\n};\n\nconst monthUtils: DatePickerUtils = {\n  getItemKey: (rowIndex, rowItemIndex) => `Month ${rowIndex * 3 + rowItemIndex + 1}`,\n  isSameItem: (date1: Date, date2: Date) => isSameMonth(date1, date2),\n  isSamePage: (date1: Date, date2: Date) => isSameYear(date1, date2),\n  checkIfCurrentDay: () => false,\n  checkIfCurrentMonth: date => isThisMonth(date),\n  checkIfCurrent: date => isThisMonth(date),\n  getPageName: () => 'year',\n};\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 day is announced as \"not selected\";\n * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;\n * - (keyboard navigation) Safari/Chrome+VO - days are not announced as interactive (clickable or selectable);\n * - (keyboard navigation) Safari/Chrome+VO - day announcements are not interruptive and can be missed if navigating fast.\n */\n\nexport function Grid({\n  padDates,\n  baseDate,\n  selectedStartDate,\n  selectedEndDate,\n  rangeStartDate,\n  rangeEndDate,\n  focusedDate,\n\n  focusedDateRef,\n\n  onSelectDate,\n  onGridKeyDownHandler,\n  onFocusedDateChange,\n\n  isDateEnabled,\n  dateDisabledReason,\n\n  locale,\n  todayAriaLabel,\n  currentMonthAriaLabel,\n  ariaLabelledby,\n  className,\n  startOfWeek: rawStartOfWeek = 0,\n  granularity = 'day',\n}: GridProps) {\n  const baseDateTime = baseDate?.getTime();\n  const i18n = useInternalI18n('date-range-picker');\n  const isMonthPicker = granularity === 'month';\n  const startOfWeek = normalizeStartOfWeek(rawStartOfWeek, locale);\n  const calendar = useMemo(\n    () => {\n      const startDate = rangeStartDate ?? rangeEndDate;\n      const endDate = rangeEndDate ?? rangeStartDate;\n      const selection = startDate && endDate ? ([startDate, endDate] as [Date, Date]) : null;\n      if (isMonthPicker) {\n        const calendarData = new YearCalendar({ baseDate, selection });\n        return {\n          header: [],\n          rows: calendarData.quarters,\n          range: calendarData.range,\n        };\n      }\n\n      const calendarData = new MonthCalendar({ padDates, startOfWeek, baseDate, selection });\n      return {\n        header: calendarData.weekdays,\n        rows: calendarData.weeks,\n        range: calendarData.range,\n      };\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [padDates, startOfWeek, baseDateTime, rangeStartDate, rangeEndDate]\n  );\n\n  const currentAnnouncement = i18n(\n    isMonthPicker ? 'i18nStrings.currentMonthAriaLabel' : 'i18nStrings.todayAriaLabel',\n    isMonthPicker ? currentMonthAriaLabel : todayAriaLabel\n  );\n\n  return (\n    <table role=\"grid\" aria-labelledby={ariaLabelledby} className={clsx(styles.grid, className)}>\n      {!isMonthPicker && (\n        <thead>\n          <tr>\n            {calendar.header.map(dayIndex => (\n              <th\n                key={dayIndex}\n                scope=\"col\"\n                className={clsx(styles['grid-cell'], styles['day-header'], testutilStyles['day-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      <tbody onKeyDown={onGridKeyDownHandler}>\n        {calendar.rows.map((row, rowIndex) => {\n          const rowItems = isMonthPicker ? (row as CalendarQuarter).months : (row as CalendarWeek).days;\n          const weekTestIndex = !isMonthPicker ? (row as CalendarWeek).testIndex : undefined;\n          return (\n            <tr\n              key={rowIndex}\n              className={clsx({\n                [testutilStyles['calendar-quarter']]: isMonthPicker,\n                [testutilStyles['calendar-week']]: !isMonthPicker,\n              })}\n              {...(!isMonthPicker && weekTestIndex\n                ? {\n                    ['data-awsui-weekindex']: weekTestIndex,\n                  }\n                : {})}\n            >\n              {rowItems.map(\n                (\n                  { date, isVisible, isInRange, isSelectionTop, isSelectionBottom, isSelectionLeft, isSelectionRight },\n                  rowItemIndex\n                ) => {\n                  const {\n                    getItemKey,\n                    isSameItem,\n                    isSamePage,\n                    checkIfCurrent,\n                    checkIfCurrentDay,\n                    checkIfCurrentMonth,\n                    getPageName,\n                  } = isMonthPicker ? monthUtils : dayUtils;\n                  const itemKey = getItemKey(rowIndex, rowItemIndex);\n                  const pageName = getPageName();\n                  const isCurrentDay = checkIfCurrentDay(date);\n                  const isCurrentMonth = checkIfCurrentMonth(date);\n                  const isCurrent = checkIfCurrent(date);\n                  const isStartDate = !!selectedStartDate && isSameItem(date, selectedStartDate);\n                  const isEndDate = !!selectedEndDate && isSameItem(date, selectedEndDate);\n                  const isSelected = isStartDate || isEndDate;\n\n                  const isFocused = !!focusedDate && isSameItem(date, focusedDate) && isSamePage(date, baseDate);\n\n                  const onlyOneSelected =\n                    !!rangeStartDate && !!rangeEndDate\n                      ? isSameItem(rangeStartDate, rangeEndDate)\n                      : !selectedStartDate || !selectedEndDate;\n\n                  const isEnabled = (!isDateEnabled || isDateEnabled(date)) && isSamePage(date, baseDate);\n                  const disabledReason = dateDisabledReason(date);\n\n                  const isDisabledWithReason = !isEnabled && !!disabledReason;\n                  const isFocusable = isFocused && (isEnabled || isDisabledWithReason);\n\n                  const baseClasses = {\n                    [testutilStyles['calendar-date']]: !isMonthPicker && isSameMonth(date, baseDate),\n                    [testutilStyles['calendar-month']]: isMonthPicker && isSameYear(date, baseDate),\n                    [styles.day]: !isMonthPicker,\n                    [styles.month]: isMonthPicker,\n                    [styles['grid-cell']]: true,\n                    [styles['in-first-row']]: rowIndex === 0,\n                    [styles['in-first-column']]: rowItemIndex === 0,\n                  };\n\n                  if (!isVisible) {\n                    return (\n                      <td\n                        key={itemKey}\n                        ref={isFocused ? focusedDateRef : undefined}\n                        className={clsx(baseClasses, {\n                          [styles[`last-day-of-month`]]: !isMonthPicker && isLastDayOfMonth(date),\n                          [styles[`last-month-of-year`]]: isMonthPicker && date.getMonth() === 11,\n                        })}\n                      />\n                    );\n                  }\n\n                  const handlers: React.HTMLAttributes<HTMLDivElement> = {};\n                  if (isEnabled) {\n                    handlers.onClick = () => onSelectDate(date);\n                    handlers.onFocus = () => onFocusedDateChange(date);\n                  }\n\n                  // Screen-reader announcement for the focused day/month.\n                  let announcement = renderDateAnnouncement({\n                    date,\n                    isCurrent,\n                    locale,\n                    granularity,\n                  });\n\n                  if (currentAnnouncement) {\n                    if (isMonthPicker && isThisMonth(date)) {\n                      announcement += `. ${currentAnnouncement}`;\n                    } else if (!isMonthPicker && isToday(date)) {\n                      announcement += `. ${currentAnnouncement}`;\n                    }\n                  }\n\n                  // Can't be focused.\n                  let tabIndex: number | undefined = undefined;\n                  if (isEnabled || isDisabledWithReason) {\n                    tabIndex = isFocusable\n                      ? 0 // Next focus target.\n                      : -1; // Can be focused programmatically.\n                  }\n\n                  return (\n                    <GridCell\n                      ref={isFocused ? focusedDateRef : undefined}\n                      key={itemKey}\n                      className={clsx(baseClasses, {\n                        [styles['in-visible-calendar']]: true,\n                        [styles[`in-current-${pageName}`]]: isSamePage(date, baseDate),\n                        [styles.enabled]: isEnabled,\n                        [styles.selected]: isSelected,\n                        [styles['start-date']]: isStartDate,\n                        [styles['end-date']]: isEndDate,\n                        [testutilStyles['start-date']]: isStartDate,\n                        [testutilStyles['end-date']]: isEndDate,\n                        [styles['no-range']]: isSelected && onlyOneSelected,\n                        [styles['in-range']]: isInRange,\n                        [styles['in-range-border-block-start']]: isSelectionTop,\n                        [styles['in-range-border-block-end']]: isSelectionBottom,\n                        [styles['in-range-border-inline-start']]: isSelectionLeft,\n                        [styles['in-range-border-inline-end']]: isSelectionRight,\n                        [styles.today]: isCurrentDay,\n                        [testutilStyles.today]: isCurrentDay,\n                        [styles['this-month']]: isCurrentMonth,\n                        [testutilStyles['this-month']]: isCurrentMonth,\n                      })}\n                      aria-selected={isEnabled ? isSelected || isInRange : undefined}\n                      aria-current={isCurrent ? 'date' : undefined}\n                      data-date={formatDate(date, granularity)}\n                      aria-disabled={!isEnabled}\n                      tabIndex={tabIndex}\n                      disabledReason={isDisabledWithReason ? disabledReason : undefined}\n                      {...handlers}\n                    >\n                      <span className={styles[`${granularity}-inner`]} aria-hidden=\"true\">\n                        {isMonthPicker ? date.toLocaleString(locale, { month: 'short' }) : date.getDate()}\n                      </span>\n                      <ScreenreaderOnly>{announcement}</ScreenreaderOnly>\n                    </GridCell>\n                  );\n                }\n              )}\n            </tr>\n          );\n        })}\n      </tbody>\n    </table>\n  );\n}\n"]}

package/lib/internal/template/date-range-picker/calendar/grids/index.d.ts

@@ -1,21 +1,4 @@
-import React from 'react';
-import { DateRangePickerProps, DayIndex } from '../../interfaces';
-interface GridProps {
-    baseDate: Date;
-    selectedStartDate: Date | null;
-    selectedEndDate: Date | null;
-    focusedDate: Date | null;
-    onFocusedDateChange: React.Dispatch<React.SetStateAction<Date | null>>;
-    isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;
-    dateDisabledReason: DateRangePickerProps.DateDisabledReasonFunction;
-    isSingleGrid: boolean;
-    onSelectDate: (date: Date) => void;
-    onChangeMonth: (date: Date) => void;
-    locale: string;
-    startOfWeek: DayIndex;
-    todayAriaLabel?: string;
-    headingIdPrefix: string;
-}
-export declare const Grids: ({ baseDate, selectedStartDate, selectedEndDate, focusedDate, onFocusedDateChange, isDateEnabled, dateDisabledReason, isSingleGrid, onSelectDate, onChangeMonth, locale, startOfWeek, todayAriaLabel, headingIdPrefix, }: GridProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { SelectGridProps } from './interfaces';
+export declare const Grids: ({ baseDate, selectedStartDate, selectedEndDate, focusedDate, onFocusedDateChange, isDateEnabled, dateDisabledReason, isSingleGrid, onSelectDate, onPageChange, locale, todayAriaLabel, currentMonthAriaLabel, headingIdPrefix, startOfWeek, granularity, }: SelectGridProps) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/date-range-picker/calendar/grids/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAexE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAgBlE,UAAU,SAAS;IACjB,QAAQ,EAAE,IAAI,CAAC;IACf,iBAAiB,EAAE,IAAI,GAAG,IAAI,CAAC;IAC/B,eAAe,EAAE,IAAI,GAAG,IAAI,CAAC;IAE7B,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC;IAEvE,aAAa,EAAE,oBAAoB,CAAC,qBAAqB,CAAC;IAC1D,kBAAkB,EAAE,oBAAoB,CAAC,0BAA0B,CAAC;IACpE,YAAY,EAAE,OAAO,CAAC;IAEtB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAEpC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,KAAK,4NAmBf,SAAS,gBAmJX,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/index.tsx"],"names":[],"mappings":";AA2BA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAgB/C,eAAO,MAAM,KAAK,+PAqBf,eAAe,gBAkJjB,CAAC"}

package/lib/internal/template/date-range-picker/calendar/grids/index.js

@@ -1,27 +1,37 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { addMonths, isAfter, isBefore, isSameMonth, max, min } from 'date-fns';
+import { addMonths, addYears, isAfter, isBefore, isSameMonth, isSameYear, max, min } from 'date-fns';
 import { getBaseDay, moveNextDay, moveNextWeek, movePrevDay, movePrevWeek, } from '../../../calendar/utils/navigation-day';
+import { getBaseMonth, moveMonthDown, moveMonthUp, moveNextMonth, movePrevMonth, } from '../../../calendar/utils/navigation-month';
 import { useDateCache } from '../../../internal/hooks/use-date-cache';
 import { KeyCode } from '../../../internal/keycode';
 import handleKey from '../../../internal/utils/handle-key';
 import { hasValue } from '../../../internal/utils/has-value';
 import InternalSpaceBetween from '../../../space-between/internal';
 import { findDateToFocus } from '../utils';
-import { MonthlyGrid } from './monthly-grid';
-import styles from '../../styles.css.js';
-function isVisible(date, baseDate, isSingleGrid) {
+import { Grid } from './grid';
+import testutilStyles from '../../test-classes/styles.css.js';
+function isVisible(date, baseDate, isSingleGrid, granularity) {
+    const isSame = granularity === 'day' ? isSameMonth : isSameYear;
+    const add = granularity === 'day' ? addMonths : addYears;
     if (isSingleGrid) {
-        return isSameMonth(date, baseDate);
+        return isSame(date, baseDate);
     }
-    const previousMonth = addMonths(baseDate, -1);
-    return isSameMonth(date, previousMonth) || isSameMonth(date, baseDate);
+    const previous = add(baseDate, -1);
+    return isSame(date, previous) || isSame(date, baseDate);
 }
-export const Grids = ({ baseDate, selectedStartDate, selectedEndDate, focusedDate, onFocusedDateChange, isDateEnabled, dateDisabledReason, isSingleGrid, onSelectDate, onChangeMonth, locale, startOfWeek, todayAriaLabel, headingIdPrefix, }) => {
+export const Grids = ({ baseDate, selectedStartDate, selectedEndDate, focusedDate, onFocusedDateChange, isDateEnabled, dateDisabledReason, isSingleGrid, onSelectDate, onPageChange, locale, todayAriaLabel, currentMonthAriaLabel, headingIdPrefix, startOfWeek = 0, granularity = 'day', }) => {
     const containerRef = useRef(null);
     const [gridHasFocus, setGridHasFocus] = useState(false);
+    const isMonthPicker = granularity === 'month';
     const focusedDateRef = useRef(null);
+    const addPages = !isMonthPicker ? addMonths : addYears;
+    const getBase = !isMonthPicker ? getBaseDay : getBaseMonth;
+    const moveDown = isMonthPicker ? moveMonthDown : moveNextWeek;
+    const moveLeft = isMonthPicker ? movePrevMonth : movePrevDay;
+    const moveRight = isMonthPicker ? moveNextMonth : moveNextDay;
+    const moveUp = isMonthPicker ? moveMonthUp : movePrevWeek;
     const dateCache = useDateCache();
     baseDate = dateCache(baseDate);
     focusedDate = focusedDate ? dateCache(focusedDate) : null;
@@ -29,16 +39,16 @@ export const Grids = ({ baseDate, selectedStartDate, selectedEndDate, focusedDat
         return isDateEnabled(date) || (!isDateEnabled(date) && !!dateDisabledReason(date));
     }, [isDateEnabled, dateDisabledReason]);
     useEffect(() => {
-        if (focusedDate && !isVisible(focusedDate, baseDate, isSingleGrid)) {
+        if (focusedDate && !isVisible(focusedDate, baseDate, isSingleGrid, granularity)) {
             const direction = isAfter(focusedDate, baseDate) ? -1 : 1;
-            const newMonth = !isSingleGrid && direction === -1 ? addMonths(baseDate, -1) : baseDate;
-            const nearestBaseDate = getBaseDay(newMonth, isDateFocusable);
+            const newPage = !isSingleGrid && direction === -1 ? addPages(baseDate, -1) : baseDate;
+            const nearestBaseDate = getBase(newPage, isDateFocusable);
             const newFocusedDate = findDateToFocus(focusedDate, nearestBaseDate, isDateFocusable);
             onFocusedDateChange(newFocusedDate);
         }
-    }, [baseDate, focusedDate, isSingleGrid, isDateFocusable, onFocusedDateChange]);
+    }, [baseDate, focusedDate, isSingleGrid, granularity, addPages, isDateFocusable, onFocusedDateChange, getBase]);
     const onGridKeyDownHandler = (event) => {
-        let updatedFocusDate;
+        let updatedFocusDate = null;
         const keys = [KeyCode.up, KeyCode.down, KeyCode.left, KeyCode.right, KeyCode.space, KeyCode.enter];
         if (focusedDate === null || keys.indexOf(event.keyCode) === -1) {
             return;
@@ -51,18 +61,18 @@ export const Grids = ({ baseDate, selectedStartDate, selectedEndDate, focusedDat
                 }
                 onSelectDate(focusedDate);
             },
-            onBlockEnd: () => focusedDate && (updatedFocusDate = moveNextWeek(focusedDate, isDateFocusable)),
-            onBlockStart: () => focusedDate && (updatedFocusDate = movePrevWeek(focusedDate, isDateFocusable)),
-            onInlineEnd: () => focusedDate && (updatedFocusDate = moveNextDay(focusedDate, isDateFocusable)),
-            onInlineStart: () => focusedDate && (updatedFocusDate = movePrevDay(focusedDate, isDateFocusable)),
+            onBlockEnd: () => focusedDate && (updatedFocusDate = moveDown(focusedDate, isDateFocusable)),
+            onBlockStart: () => focusedDate && (updatedFocusDate = moveUp(focusedDate, isDateFocusable)),
+            onInlineStart: () => focusedDate && (updatedFocusDate = moveLeft(focusedDate, isDateFocusable)),
+            onInlineEnd: () => focusedDate && (updatedFocusDate = moveRight(focusedDate, isDateFocusable)),
         });
         if (!updatedFocusDate) {
             return;
         }
-        const updatedDateIsVisible = isVisible(updatedFocusDate, baseDate, isSingleGrid);
+        const updatedDateIsVisible = isVisible(updatedFocusDate, baseDate, isSingleGrid, granularity);
         if (!updatedDateIsVisible) {
-            const newMonthIsOnLeftSide = !isSingleGrid && isBefore(updatedFocusDate, baseDate);
-            onChangeMonth(newMonthIsOnLeftSide ? addMonths(updatedFocusDate, 1) : updatedFocusDate);
+            const newPageIsOnLeftSide = !isSingleGrid && isBefore(updatedFocusDate, baseDate);
+            onPageChange(newPageIsOnLeftSide ? addPages(updatedFocusDate, 1) : updatedFocusDate);
         }
         onFocusedDateChange(updatedFocusDate);
     };
@@ -91,9 +101,28 @@ export const Grids = ({ baseDate, selectedStartDate, selectedEndDate, focusedDat
     const rangeEnds = [selectedStartDate !== null && selectedStartDate !== void 0 ? selectedStartDate : focusedDate, selectedEndDate !== null && selectedEndDate !== void 0 ? selectedEndDate : focusedDate].filter(hasValue);
     const rangeStartDate = min(rangeEnds);
     const rangeEndDate = max(rangeEnds);
+    const pageUnit = isMonthPicker ? 'year' : 'month';
+    const sharedGridProps = {
+        selectedEndDate,
+        selectedStartDate,
+        focusedDate,
+        focusedDateRef,
+        rangeStartDate: isRangeVisible ? rangeStartDate : null,
+        rangeEndDate: isRangeVisible ? rangeEndDate : null,
+        isDateEnabled,
+        dateDisabledReason,
+        onSelectDate,
+        onGridKeyDownHandler,
+        onFocusedDateChange,
+        locale,
+        granularity,
+        currentMonthAriaLabel,
+        startOfWeek,
+        todayAriaLabel,
+    };
     return (React.createElement("div", { ref: containerRef, onFocus: onGridFocus, onBlur: onGridBlur },
         React.createElement(InternalSpaceBetween, { size: "xs", direction: "horizontal" },
-            !isSingleGrid && (React.createElement(MonthlyGrid, { padDates: "before", className: styles['first-grid'], baseDate: addMonths(baseDate, -1), selectedEndDate: selectedEndDate, selectedStartDate: selectedStartDate, rangeStartDate: isRangeVisible ? rangeStartDate : null, rangeEndDate: isRangeVisible ? rangeEndDate : null, focusedDate: focusedDate, focusedDateRef: focusedDateRef, isDateEnabled: isDateEnabled, dateDisabledReason: dateDisabledReason, onSelectDate: onSelectDate, onGridKeyDownHandler: onGridKeyDownHandler, onFocusedDateChange: onFocusedDateChange, locale: locale, startOfWeek: startOfWeek, todayAriaLabel: todayAriaLabel, ariaLabelledby: `${headingIdPrefix}-prevmonth` })),
-            React.createElement(MonthlyGrid, { padDates: "after", className: styles['second-grid'], baseDate: baseDate, selectedEndDate: selectedEndDate, selectedStartDate: selectedStartDate, rangeStartDate: isRangeVisible ? rangeStartDate : null, rangeEndDate: isRangeVisible ? rangeEndDate : null, focusedDate: focusedDate, focusedDateRef: focusedDateRef, isDateEnabled: isDateEnabled, dateDisabledReason: dateDisabledReason, onSelectDate: onSelectDate, onGridKeyDownHandler: onGridKeyDownHandler, onFocusedDateChange: onFocusedDateChange, locale: locale, startOfWeek: startOfWeek, todayAriaLabel: todayAriaLabel, ariaLabelledby: `${headingIdPrefix}-currentmonth` }))));
+            !isSingleGrid && (React.createElement(Grid, Object.assign({}, sharedGridProps, { padDates: 'before', className: testutilStyles['first-grid'], baseDate: addPages(baseDate, -1), ariaLabelledby: `${headingIdPrefix}-prev${pageUnit}` }))),
+            React.createElement(Grid, Object.assign({}, sharedGridProps, { padDates: 'after', className: testutilStyles['second-grid'], baseDate: baseDate, ariaLabelledby: `${headingIdPrefix}-current${pageUnit}` })))));
 };
 //# sourceMappingURL=index.js.map

package/lib/internal/template/date-range-picker/calendar/grids/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/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, { useCallback, useEffect, useRef, useState } from 'react';\nimport { addMonths, isAfter, isBefore, isSameMonth, max, min } from 'date-fns';\n\nimport {\n  getBaseDay,\n  moveNextDay,\n  moveNextWeek,\n  movePrevDay,\n  movePrevWeek,\n} from '../../../calendar/utils/navigation-day';\nimport { useDateCache } from '../../../internal/hooks/use-date-cache';\nimport { KeyCode } from '../../../internal/keycode';\nimport handleKey from '../../../internal/utils/handle-key';\nimport { hasValue } from '../../../internal/utils/has-value';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport { DateRangePickerProps, DayIndex } from '../../interfaces';\nimport { findDateToFocus } from '../utils';\nimport { MonthlyGrid } from './monthly-grid';\n\nimport styles from '../../styles.css.js';\n\nfunction isVisible(date: Date, baseDate: Date, isSingleGrid: boolean) {\n  if (isSingleGrid) {\n    return isSameMonth(date, baseDate);\n  }\n\n  const previousMonth = addMonths(baseDate, -1);\n\n  return isSameMonth(date, previousMonth) || isSameMonth(date, baseDate);\n}\n\ninterface GridProps {\n  baseDate: Date;\n  selectedStartDate: Date | null;\n  selectedEndDate: Date | null;\n\n  focusedDate: Date | null;\n  onFocusedDateChange: React.Dispatch<React.SetStateAction<Date | null>>;\n\n  isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;\n  dateDisabledReason: DateRangePickerProps.DateDisabledReasonFunction;\n  isSingleGrid: boolean;\n\n  onSelectDate: (date: Date) => void;\n  onChangeMonth: (date: Date) => void;\n\n  locale: string;\n  startOfWeek: DayIndex;\n  todayAriaLabel?: string;\n  headingIdPrefix: string;\n}\n\nexport const Grids = ({\n  baseDate,\n  selectedStartDate,\n  selectedEndDate,\n\n  focusedDate,\n  onFocusedDateChange,\n\n  isDateEnabled,\n  dateDisabledReason,\n  isSingleGrid,\n\n  onSelectDate,\n  onChangeMonth,\n\n  locale,\n  startOfWeek,\n  todayAriaLabel,\n  headingIdPrefix,\n}: GridProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [gridHasFocus, setGridHasFocus] = useState(false);\n\n  const focusedDateRef = useRef<HTMLTableCellElement>(null);\n\n  const dateCache = useDateCache();\n  baseDate = dateCache(baseDate);\n  focusedDate = focusedDate ? dateCache(focusedDate) : null;\n\n  const isDateFocusable = useCallback(\n    (date: Date) => {\n      return isDateEnabled(date) || (!isDateEnabled(date) && !!dateDisabledReason(date));\n    },\n    [isDateEnabled, dateDisabledReason]\n  );\n\n  useEffect(() => {\n    if (focusedDate && !isVisible(focusedDate, baseDate, isSingleGrid)) {\n      const direction = isAfter(focusedDate, baseDate) ? -1 : 1;\n\n      const newMonth = !isSingleGrid && direction === -1 ? addMonths(baseDate, -1) : baseDate;\n      const nearestBaseDate = getBaseDay(newMonth, isDateFocusable);\n\n      const newFocusedDate = findDateToFocus(focusedDate, nearestBaseDate, isDateFocusable);\n\n      onFocusedDateChange(newFocusedDate);\n    }\n  }, [baseDate, focusedDate, isSingleGrid, isDateFocusable, onFocusedDateChange]);\n\n  const onGridKeyDownHandler = (event: React.KeyboardEvent<HTMLElement>) => {\n    let updatedFocusDate;\n\n    const keys = [KeyCode.up, KeyCode.down, KeyCode.left, KeyCode.right, KeyCode.space, KeyCode.enter];\n\n    if (focusedDate === null || keys.indexOf(event.keyCode) === -1) {\n      return;\n    }\n\n    event.preventDefault();\n\n    handleKey(event, {\n      onActivate: () => {\n        if (!focusedDate || !isDateEnabled(focusedDate)) {\n          return;\n        }\n\n        onSelectDate(focusedDate);\n      },\n      onBlockEnd: () => focusedDate && (updatedFocusDate = moveNextWeek(focusedDate, isDateFocusable)),\n      onBlockStart: () => focusedDate && (updatedFocusDate = movePrevWeek(focusedDate, isDateFocusable)),\n      onInlineEnd: () => focusedDate && (updatedFocusDate = moveNextDay(focusedDate, isDateFocusable)),\n      onInlineStart: () => focusedDate && (updatedFocusDate = movePrevDay(focusedDate, isDateFocusable)),\n    });\n\n    if (!updatedFocusDate) {\n      return;\n    }\n\n    const updatedDateIsVisible = isVisible(updatedFocusDate, baseDate, isSingleGrid);\n\n    if (!updatedDateIsVisible) {\n      const newMonthIsOnLeftSide = !isSingleGrid && isBefore(updatedFocusDate, baseDate);\n\n      onChangeMonth(newMonthIsOnLeftSide ? addMonths(updatedFocusDate, 1) : updatedFocusDate);\n    }\n    onFocusedDateChange(updatedFocusDate);\n  };\n\n  useEffect(() => {\n    // focus current date if the focus is already inside the calendar\n    if (focusedDate !== null && gridHasFocus) {\n      if (focusedDateRef.current && focusedDateRef.current !== document.activeElement) {\n        focusedDateRef.current.focus();\n      }\n    }\n  }, [focusedDate, gridHasFocus]);\n\n  const onGridBlur = (event: React.FocusEvent) => {\n    const newFocusTarget = event.relatedTarget || document.activeElement;\n    const newFocusTargetIsInGrid = containerRef.current?.contains(newFocusTarget as Node);\n    if (newFocusTarget && !newFocusTargetIsInGrid && gridHasFocus) {\n      setGridHasFocus(false);\n    }\n  };\n\n  const onGridFocus = () => {\n    if (!gridHasFocus) {\n      setGridHasFocus(true);\n    }\n  };\n\n  const isRangeVisible = (selectedStartDate && selectedEndDate) || gridHasFocus;\n\n  const rangeEnds: Date[] = [selectedStartDate ?? focusedDate, selectedEndDate ?? focusedDate].filter(hasValue);\n\n  const rangeStartDate = min(rangeEnds);\n  const rangeEndDate = max(rangeEnds);\n\n  return (\n    <div ref={containerRef} onFocus={onGridFocus} onBlur={onGridBlur}>\n      <InternalSpaceBetween size=\"xs\" direction=\"horizontal\">\n        {!isSingleGrid && (\n          <MonthlyGrid\n            padDates=\"before\"\n            className={styles['first-grid']}\n            baseDate={addMonths(baseDate, -1)}\n            selectedEndDate={selectedEndDate}\n            selectedStartDate={selectedStartDate}\n            rangeStartDate={isRangeVisible ? rangeStartDate : null}\n            rangeEndDate={isRangeVisible ? rangeEndDate : null}\n            focusedDate={focusedDate}\n            focusedDateRef={focusedDateRef}\n            isDateEnabled={isDateEnabled}\n            dateDisabledReason={dateDisabledReason}\n            onSelectDate={onSelectDate}\n            onGridKeyDownHandler={onGridKeyDownHandler}\n            onFocusedDateChange={onFocusedDateChange}\n            locale={locale}\n            startOfWeek={startOfWeek}\n            todayAriaLabel={todayAriaLabel}\n            ariaLabelledby={`${headingIdPrefix}-prevmonth`}\n          />\n        )}\n        <MonthlyGrid\n          padDates=\"after\"\n          className={styles['second-grid']}\n          baseDate={baseDate}\n          selectedEndDate={selectedEndDate}\n          selectedStartDate={selectedStartDate}\n          rangeStartDate={isRangeVisible ? rangeStartDate : null}\n          rangeEndDate={isRangeVisible ? rangeEndDate : null}\n          focusedDate={focusedDate}\n          focusedDateRef={focusedDateRef}\n          isDateEnabled={isDateEnabled}\n          dateDisabledReason={dateDisabledReason}\n          onSelectDate={onSelectDate}\n          onGridKeyDownHandler={onGridKeyDownHandler}\n          onFocusedDateChange={onFocusedDateChange}\n          locale={locale}\n          startOfWeek={startOfWeek}\n          todayAriaLabel={todayAriaLabel}\n          ariaLabelledby={`${headingIdPrefix}-currentmonth`}\n        />\n      </InternalSpaceBetween>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/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, { useCallback, useEffect, useRef, useState } from 'react';\nimport { addMonths, addYears, isAfter, isBefore, isSameMonth, isSameYear, max, min } from 'date-fns';\n\nimport {\n  getBaseDay,\n  moveNextDay,\n  moveNextWeek,\n  movePrevDay,\n  movePrevWeek,\n} from '../../../calendar/utils/navigation-day';\nimport {\n  getBaseMonth,\n  moveMonthDown,\n  moveMonthUp,\n  moveNextMonth,\n  movePrevMonth,\n} from '../../../calendar/utils/navigation-month';\nimport { useDateCache } from '../../../internal/hooks/use-date-cache';\nimport { KeyCode } from '../../../internal/keycode';\nimport handleKey from '../../../internal/utils/handle-key';\nimport { hasValue } from '../../../internal/utils/has-value';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport { DateRangePickerProps } from '../../interfaces';\nimport { findDateToFocus } from '../utils';\nimport { Grid } from './grid';\nimport { SelectGridProps } from './interfaces';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\n\nfunction isVisible(date: Date, baseDate: Date, isSingleGrid: boolean, granularity: DateRangePickerProps.Granularity) {\n  const isSame = granularity === 'day' ? isSameMonth : isSameYear;\n  const add = granularity === 'day' ? addMonths : addYears;\n  if (isSingleGrid) {\n    return isSame(date, baseDate);\n  }\n\n  const previous = add(baseDate, -1);\n\n  return isSame(date, previous) || isSame(date, baseDate);\n}\n\nexport const Grids = ({\n  baseDate,\n  selectedStartDate,\n  selectedEndDate,\n\n  focusedDate,\n  onFocusedDateChange,\n\n  isDateEnabled,\n  dateDisabledReason,\n  isSingleGrid,\n\n  onSelectDate,\n  onPageChange,\n\n  locale,\n  todayAriaLabel,\n  currentMonthAriaLabel,\n  headingIdPrefix,\n  startOfWeek = 0,\n  granularity = 'day',\n}: SelectGridProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [gridHasFocus, setGridHasFocus] = useState(false);\n  const isMonthPicker = granularity === 'month';\n\n  const focusedDateRef = useRef<HTMLTableCellElement>(null);\n\n  const addPages = !isMonthPicker ? addMonths : addYears;\n  const getBase = !isMonthPicker ? getBaseDay : getBaseMonth;\n  const moveDown = isMonthPicker ? moveMonthDown : moveNextWeek;\n  const moveLeft = isMonthPicker ? movePrevMonth : movePrevDay;\n  const moveRight = isMonthPicker ? moveNextMonth : moveNextDay;\n  const moveUp = isMonthPicker ? moveMonthUp : movePrevWeek;\n\n  const dateCache = useDateCache();\n  baseDate = dateCache(baseDate);\n  focusedDate = focusedDate ? dateCache(focusedDate) : null;\n\n  const isDateFocusable = useCallback(\n    (date: Date) => {\n      return isDateEnabled(date) || (!isDateEnabled(date) && !!dateDisabledReason(date));\n    },\n    [isDateEnabled, dateDisabledReason]\n  );\n\n  useEffect(() => {\n    if (focusedDate && !isVisible(focusedDate, baseDate, isSingleGrid, granularity)) {\n      const direction = isAfter(focusedDate, baseDate) ? -1 : 1;\n\n      const newPage = !isSingleGrid && direction === -1 ? addPages(baseDate, -1) : baseDate;\n      const nearestBaseDate = getBase(newPage, isDateFocusable);\n\n      const newFocusedDate = findDateToFocus(focusedDate, nearestBaseDate, isDateFocusable);\n\n      onFocusedDateChange(newFocusedDate);\n    }\n  }, [baseDate, focusedDate, isSingleGrid, granularity, addPages, isDateFocusable, onFocusedDateChange, getBase]);\n\n  const onGridKeyDownHandler = (event: React.KeyboardEvent<HTMLElement>) => {\n    let updatedFocusDate: Date | null = null;\n\n    const keys = [KeyCode.up, KeyCode.down, KeyCode.left, KeyCode.right, KeyCode.space, KeyCode.enter];\n\n    if (focusedDate === null || keys.indexOf(event.keyCode) === -1) {\n      return;\n    }\n\n    event.preventDefault();\n\n    handleKey(event, {\n      onActivate: () => {\n        if (!focusedDate || !isDateEnabled(focusedDate)) {\n          return;\n        }\n        onSelectDate(focusedDate);\n      },\n      onBlockEnd: () => focusedDate && (updatedFocusDate = moveDown(focusedDate, isDateFocusable)),\n      onBlockStart: () => focusedDate && (updatedFocusDate = moveUp(focusedDate, isDateFocusable)),\n      onInlineStart: () => focusedDate && (updatedFocusDate = moveLeft(focusedDate, isDateFocusable)),\n      onInlineEnd: () => focusedDate && (updatedFocusDate = moveRight(focusedDate, isDateFocusable)),\n    });\n\n    if (!updatedFocusDate) {\n      return;\n    }\n\n    const updatedDateIsVisible = isVisible(updatedFocusDate, baseDate, isSingleGrid, granularity);\n\n    if (!updatedDateIsVisible) {\n      const newPageIsOnLeftSide = !isSingleGrid && isBefore(updatedFocusDate, baseDate);\n      onPageChange(newPageIsOnLeftSide ? addPages(updatedFocusDate, 1) : updatedFocusDate);\n    }\n    onFocusedDateChange(updatedFocusDate);\n  };\n\n  useEffect(() => {\n    // focus current date if the focus is already inside the calendar\n    if (focusedDate !== null && gridHasFocus) {\n      if (focusedDateRef.current && focusedDateRef.current !== document.activeElement) {\n        focusedDateRef.current.focus();\n      }\n    }\n  }, [focusedDate, gridHasFocus]);\n\n  const onGridBlur = (event: React.FocusEvent) => {\n    const newFocusTarget = event.relatedTarget || document.activeElement;\n    const newFocusTargetIsInGrid = containerRef.current?.contains(newFocusTarget as Node);\n    if (newFocusTarget && !newFocusTargetIsInGrid && gridHasFocus) {\n      setGridHasFocus(false);\n    }\n  };\n\n  const onGridFocus = () => {\n    if (!gridHasFocus) {\n      setGridHasFocus(true);\n    }\n  };\n\n  const isRangeVisible = (selectedStartDate && selectedEndDate) || gridHasFocus;\n\n  const rangeEnds: Date[] = [selectedStartDate ?? focusedDate, selectedEndDate ?? focusedDate].filter(hasValue);\n  const rangeStartDate = min(rangeEnds);\n  const rangeEndDate = max(rangeEnds);\n  const pageUnit = isMonthPicker ? 'year' : 'month';\n\n  const sharedGridProps = {\n    selectedEndDate,\n    selectedStartDate,\n    focusedDate,\n    focusedDateRef,\n    rangeStartDate: isRangeVisible ? rangeStartDate : null,\n    rangeEndDate: isRangeVisible ? rangeEndDate : null,\n    isDateEnabled,\n    dateDisabledReason,\n    onSelectDate,\n    onGridKeyDownHandler,\n    onFocusedDateChange,\n    locale,\n    granularity,\n    currentMonthAriaLabel,\n    startOfWeek,\n    todayAriaLabel,\n  };\n\n  return (\n    <div ref={containerRef} onFocus={onGridFocus} onBlur={onGridBlur}>\n      <InternalSpaceBetween size=\"xs\" direction=\"horizontal\">\n        {!isSingleGrid && (\n          <Grid\n            {...sharedGridProps}\n            padDates={'before'}\n            className={testutilStyles['first-grid']}\n            baseDate={addPages(baseDate, -1)}\n            ariaLabelledby={`${headingIdPrefix}-prev${pageUnit}`}\n          />\n        )}\n        <Grid\n          {...sharedGridProps}\n          padDates={'after'}\n          className={testutilStyles['second-grid']}\n          baseDate={baseDate}\n          ariaLabelledby={`${headingIdPrefix}-current${pageUnit}`}\n        />\n      </InternalSpaceBetween>\n    </div>\n  );\n};\n"]}

package/lib/internal/template/date-range-picker/calendar/grids/interfaces.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { DateRangePickerProps, DayIndex } from '../../interfaces';
+export interface GridBaseProps {
+    baseDate: Date;
+    selectedStartDate: Date | null;
+    selectedEndDate: Date | null;
+    focusedDate: Date | null;
+    onFocusedDateChange: React.Dispatch<React.SetStateAction<Date | null>>;
+    onSelectDate: (date: Date) => void;
+    isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;
+    dateDisabledReason: DateRangePickerProps.DateDisabledReasonFunction;
+    locale: string;
+}
+export interface GridProps extends GridBaseProps {
+    rangeStartDate: Date | null;
+    rangeEndDate: Date | null;
+    focusedDateRef: React.RefObject<HTMLTableCellElement>;
+    onGridKeyDownHandler: (e: React.KeyboardEvent<HTMLElement>) => void;
+    ariaLabelledby: string;
+    className?: string;
+    /**
+     * Used to only add the dates of previous and next months outside the month pages
+     */
+    padDates: 'before' | 'after';
+    currentMonthAriaLabel?: string;
+    startOfWeek?: DayIndex;
+    todayAriaLabel?: string;
+    granularity: DateRangePickerProps.Granularity;
+}
+export interface SelectGridProps extends GridBaseProps {
+    /**
+     * changes the page/view of the calendar. Doing so will change to another month or year
+     * @param date
+     * @returns
+     */
+    onPageChange: (date: Date) => void;
+    isSingleGrid: boolean;
+    headingIdPrefix: string;
+    /**
+     * not needed for grids with a month granularity
+     */
+    startOfWeek?: DayIndex;
+    granularity?: DateRangePickerProps.Granularity;
+    todayAriaLabel?: string;
+    currentMonthAriaLabel?: string;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/date-range-picker/calendar/grids/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,IAAI,CAAC;IACf,iBAAiB,EAAE,IAAI,GAAG,IAAI,CAAC;IAC/B,eAAe,EAAE,IAAI,GAAG,IAAI,CAAC;IAC7B,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IAEzB,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC;IACvE,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,aAAa,EAAE,oBAAoB,CAAC,qBAAqB,CAAC;IAC1D,kBAAkB,EAAE,oBAAoB,CAAC,0BAA0B,CAAC;IAEpE,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C,cAAc,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;IAEtD,oBAAoB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEpE,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,oBAAoB,CAAC,WAAW,CAAC;CAC/C;AAED,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD;;;;OAIG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAEnC,YAAY,EAAE,OAAO,CAAC;IAEtB,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC"}

package/lib/internal/template/date-range-picker/calendar/grids/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/lib/internal/template/date-range-picker/calendar/grids/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DateRangePickerProps, DayIndex } from '../../interfaces';\n\nexport interface GridBaseProps {\n  baseDate: Date;\n  selectedStartDate: Date | null;\n  selectedEndDate: Date | null;\n  focusedDate: Date | null;\n\n  onFocusedDateChange: React.Dispatch<React.SetStateAction<Date | null>>;\n  onSelectDate: (date: Date) => void;\n  isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;\n  dateDisabledReason: DateRangePickerProps.DateDisabledReasonFunction;\n\n  locale: string;\n}\n\nexport interface GridProps extends GridBaseProps {\n  rangeStartDate: Date | null;\n  rangeEndDate: Date | null;\n  focusedDateRef: React.RefObject<HTMLTableCellElement>;\n\n  onGridKeyDownHandler: (e: React.KeyboardEvent<HTMLElement>) => void;\n\n  ariaLabelledby: string;\n  className?: string;\n\n  /**\n   * Used to only add the dates of previous and next months outside the month pages\n   */\n  padDates: 'before' | 'after';\n  currentMonthAriaLabel?: string;\n  startOfWeek?: DayIndex;\n  todayAriaLabel?: string;\n  granularity: DateRangePickerProps.Granularity;\n}\n\nexport interface SelectGridProps extends GridBaseProps {\n  /**\n   * changes the page/view of the calendar. Doing so will change to another month or year\n   * @param date\n   * @returns\n   */\n  onPageChange: (date: Date) => void;\n\n  isSingleGrid: boolean;\n\n  headingIdPrefix: string;\n  /**\n   * not needed for grids with a month granularity\n   */\n  startOfWeek?: DayIndex;\n  granularity?: DateRangePickerProps.Granularity;\n  todayAriaLabel?: string;\n  currentMonthAriaLabel?: string;\n}\n"]}

package/lib/internal/template/date-range-picker/calendar/grids/intl.d.ts

@@ -0,0 +1,17 @@
+import { DateRangePickerProps } from '../../interfaces';
+export declare function setDayIndex(date: Date, dayIndex: number): void;
+export declare function renderDayName(locale: string, dayIndex: number, mode: 'short' | 'long'): string;
+export declare function renderMonthAndYear(locale: string, baseDate: Date): string;
+export declare function renderYear(locale: string, date: Date): string;
+export declare function getDateLabel(locale: string, date: Date, mode?: 'full' | 'short'): string;
+export declare function renderTimeLabel(locale: string, date: Date, format?: DateRangePickerProps['timeInputFormat']): string;
+interface RenderDateAnnouncementProps {
+    date: Date;
+    isCurrent: boolean;
+    locale: string;
+    granularity?: DateRangePickerProps['granularity'];
+    currentLabel?: string;
+}
+export declare function renderDateAnnouncement({ date, isCurrent, locale, granularity, currentLabel, }: RenderDateAnnouncementProps): string;
+export {};
+//# sourceMappingURL=intl.d.ts.map

package/lib/internal/template/date-range-picker/calendar/grids/intl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"intl.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/intl.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAG9D;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAI9F;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,CAOzE;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,CAI7D;AAGD,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAE,MAAM,GAAG,OAAgB,GAAG,MAAM,CAchG;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAUpH;AAED,UAAU,2BAA2B;IACnC,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,SAAS,EACT,MAAM,EACN,WAAmB,EACnB,YAAY,GACb,EAAE,2BAA2B,GAAG,MAAM,CAStC"}

package/lib/internal/template/date-range-picker/calendar/grids/intl.js

@@ -0,0 +1,56 @@
+export function setDayIndex(date, dayIndex) {
+    const diff = dayIndex - date.getDay();
+    date.setDate(date.getDate() + diff);
+}
+export function renderDayName(locale, dayIndex, mode) {
+    const tempDate = new Date();
+    setDayIndex(tempDate, dayIndex);
+    return tempDate.toLocaleDateString(locale, { weekday: mode });
+}
+export function renderMonthAndYear(locale, baseDate) {
+    const result = baseDate.toLocaleDateString(locale, {
+        year: 'numeric',
+        month: 'long',
+    });
+    return result;
+}
+export function renderYear(locale, date) {
+    return date.toLocaleDateString(locale, {
+        year: 'numeric',
+    });
+}
+const dayLabelCache = new Map();
+export function getDateLabel(locale, date, mode = 'full') {
+    const cacheKey = locale + date.getTime() + mode;
+    const cachedValue = dayLabelCache.get(cacheKey);
+    if (cachedValue) {
+        return cachedValue;
+    }
+    const value = date.toLocaleDateString(locale, {
+        weekday: mode === 'full' ? 'long' : undefined,
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+    });
+    dayLabelCache.set(cacheKey, value);
+    return value;
+}
+export function renderTimeLabel(locale, date, format) {
+    let options = {};
+    if (format === 'hh') {
+        options = { hour: '2-digit' };
+    }
+    if (format === 'hh:mm') {
+        options = { hour: '2-digit', minute: '2-digit' };
+    }
+    const value = date.toLocaleTimeString(locale, options);
+    return value;
+}
+export function renderDateAnnouncement({ date, isCurrent, locale, granularity = 'day', currentLabel, }) {
+    const formattedDate = granularity === 'month' ? renderMonthAndYear(locale, date) : getDateLabel(locale, date, 'short');
+    if (isCurrent && currentLabel) {
+        return `${formattedDate}. ${currentLabel}`;
+    }
+    return formattedDate;
+}
+//# sourceMappingURL=intl.js.map

package/lib/internal/template/date-range-picker/calendar/grids/intl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"intl.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/intl.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,WAAW,CAAC,IAAU,EAAE,QAAgB;IACtD,MAAM,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,MAAc,EAAE,QAAgB,EAAE,IAAsB;IACpF,MAAM,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAC;IAC5B,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAChC,OAAO,QAAQ,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,MAAc,EAAE,QAAc;IAC/D,MAAM,MAAM,GAAG,QAAQ,CAAC,kBAAkB,CAAC,MAAM,EAAE;QACjD,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,MAAM;KACd,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,IAAU;IACnD,OAAO,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE;QACrC,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;AACL,CAAC;AAED,MAAM,aAAa,GAAG,IAAI,GAAG,EAAkB,CAAC;AAChD,MAAM,UAAU,YAAY,CAAC,MAAc,EAAE,IAAU,EAAE,OAAyB,MAAM;IACtF,MAAM,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;IAChD,MAAM,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,WAAW,EAAE;QACf,OAAO,WAAW,CAAC;KACpB;IACD,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE;QAC5C,OAAO,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAC7C,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,SAAS;QACd,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;IACH,aAAa,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IACnC,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,MAAc,EAAE,IAAU,EAAE,MAAgD;IAC1G,IAAI,OAAO,GAA+B,EAAE,CAAC;IAC7C,IAAI,MAAM,KAAK,IAAI,EAAE;QACnB,OAAO,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;KAC/B;IACD,IAAI,MAAM,KAAK,OAAO,EAAE;QACtB,OAAO,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;KAClD;IACD,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvD,OAAO,KAAK,CAAC;AACf,CAAC;AAUD,MAAM,UAAU,sBAAsB,CAAC,EACrC,IAAI,EACJ,SAAS,EACT,MAAM,EACN,WAAW,GAAG,KAAK,EACnB,YAAY,GACgB;IAC5B,MAAM,aAAa,GACjB,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;IAEnG,IAAI,SAAS,IAAI,YAAY,EAAE;QAC7B,OAAO,GAAG,aAAa,KAAK,YAAY,EAAE,CAAC;KAC5C;IAED,OAAO,aAAa,CAAC;AACvB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DateRangePickerProps } from '../../interfaces';\n\nexport function setDayIndex(date: Date, dayIndex: number): void {\n  const diff = dayIndex - date.getDay();\n  date.setDate(date.getDate() + diff);\n}\n\nexport function renderDayName(locale: string, dayIndex: number, mode: 'short' | 'long'): string {\n  const tempDate = new Date();\n  setDayIndex(tempDate, dayIndex);\n  return tempDate.toLocaleDateString(locale, { weekday: mode });\n}\n\nexport function renderMonthAndYear(locale: string, baseDate: Date): string {\n  const result = baseDate.toLocaleDateString(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  return result;\n}\n\nexport function renderYear(locale: string, date: Date): string {\n  return date.toLocaleDateString(locale, {\n    year: 'numeric',\n  });\n}\n\nconst dayLabelCache = new Map<string, string>();\nexport function getDateLabel(locale: string, date: Date, mode: 'full' | 'short' = 'full'): string {\n  const cacheKey = locale + date.getTime() + mode;\n  const cachedValue = dayLabelCache.get(cacheKey);\n  if (cachedValue) {\n    return cachedValue;\n  }\n  const value = date.toLocaleDateString(locale, {\n    weekday: mode === 'full' ? 'long' : undefined,\n    month: 'long',\n    day: 'numeric',\n    year: 'numeric',\n  });\n  dayLabelCache.set(cacheKey, value);\n  return value;\n}\n\nexport function renderTimeLabel(locale: string, date: Date, format?: DateRangePickerProps['timeInputFormat']): string {\n  let options: Intl.DateTimeFormatOptions = {};\n  if (format === 'hh') {\n    options = { hour: '2-digit' };\n  }\n  if (format === 'hh:mm') {\n    options = { hour: '2-digit', minute: '2-digit' };\n  }\n  const value = date.toLocaleTimeString(locale, options);\n  return value;\n}\n\ninterface RenderDateAnnouncementProps {\n  date: Date;\n  isCurrent: boolean;\n  locale: string;\n  granularity?: DateRangePickerProps['granularity'];\n  currentLabel?: string;\n}\n\nexport function renderDateAnnouncement({\n  date,\n  isCurrent,\n  locale,\n  granularity = 'day',\n  currentLabel,\n}: RenderDateAnnouncementProps): string {\n  const formattedDate =\n    granularity === 'month' ? renderMonthAndYear(locale, date) : getDateLabel(locale, date, 'short');\n\n  if (isCurrent && currentLabel) {\n    return `${formattedDate}. ${currentLabel}`;\n  }\n\n  return formattedDate;\n}\n"]}