@cloudscape-design/components-themeable 3.0.889 → 3.0.891

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "c357e206802e520ac990260852b182fcd2b36ad9"
+  "commit": "baad5f74be6dbca16b1c8e66b1aeab46709a7a6b"
 }

package/lib/internal/scss/date-range-picker/calendar/grids/styles.scss

@@ -102,9 +102,9 @@
 }
 
 .in-first-column {
-  border-inline-start: 1px solid transparent;
+  border-inline-start: 1px solid calendar.$grid-border;
 
-  &.in-current-month {
+  &.in-visible-calendar {
     border-inline-start: calendar.$grid-border;
   }
 }
@@ -112,7 +112,7 @@
 .enabled {
   cursor: pointer;
 
-  &.in-current-month {
+  &.in-visible-calendar {
     color: calendar.$grid-date-color;
     &:not(.in-range),
     &.end-date.start-date,
@@ -171,19 +171,8 @@
   }
 
   &.start-date,
-  &.range-start-date {
-    @include border-radius(start, start);
-    &.in-range-border-bottom {
-      @include border-radius(end, start);
-    }
-  }
-
-  &.end-date,
-  &.range-end-date {
-    @include border-radius(end, end);
-    &.in-range-border-top {
-      @include border-radius(start, end);
-    }
+  &.end-date {
+    /* used in test utils */
   }
 
   > .day-inner {

package/lib/internal/scss/date-range-picker/test-classes/styles.scss

@@ -0,0 +1,9 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.calendar-week,
+.calendar-date {
+  /* used in test-utils */
+}

package/lib/internal/scss/popover/styles.scss

@@ -12,8 +12,6 @@
 @import './container';
 @import './motion';
 
-$trigger-underline-offset: 0.25em;
-
 .root {
   @include styles.styles-reset;
   color: inherit;
@@ -38,31 +36,8 @@ $trigger-underline-offset: 0.25em;
   @include styles.text-wrapping;
 }
 
-.trigger-type-text-inline {
-  border-block: 0;
-  /*
-    This transparent border is necessary to maintain space between the trigger and the bottom-positioned popover.
-  */
-  border-block-end: awsui.$border-divider-list-width dashed transparent;
-  text-decoration: underline dashed currentColor;
-  text-decoration-thickness: awsui.$border-divider-list-width;
-  text-underline-offset: $trigger-underline-offset;
-
-  &.overflow-ellipsis {
-    /*
-      This line-height needs to be overridden because the overflow: hidden would otherwise conceal the underline styles.
-    */
-    line-height: calc(1 + #{$trigger-underline-offset} + #{awsui.$border-divider-list-width});
-  }
-}
-
 .trigger-type-text {
   border-block: 0;
-  border-block-end: awsui.$border-divider-list-width dashed currentColor;
-}
-
-.trigger-type-text-inline,
-.trigger-type-text {
   border-inline: 0;
   margin-block: 0;
   margin-inline: 0;
@@ -71,6 +46,7 @@ $trigger-underline-offset: 0.25em;
   background-color: transparent;
 
   cursor: pointer;
+  border-block-end: awsui.$border-divider-list-width dashed currentColor;
 
   &:focus {
     outline: none;

package/lib/internal/template/calendar/grid/use-calendar-grid-rows.d.ts

@@ -1,5 +1,5 @@
 import { CalendarProps } from '../interfaces.js';
-export default function useCalendarGridRows({ baseDate, granularity, locale, startOfWeek, }: {
+export default function useCalendarGridRows({ baseDate, granularity, locale, startOfWeek: rawStartOfWeek, }: {
     baseDate: Date;
     granularity: CalendarProps.Granularity;
     locale: string;

package/lib/internal/template/calendar/grid/use-calendar-grid-rows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-calendar-grid-rows.d.ts","sourceRoot":"","sources":["../../../../src/calendar/grid/use-calendar-grid-rows.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,WAAW,EACX,MAAM,EACN,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,IAAI,CAAC;IACf,WAAW,EAAE,aAAa,CAAC,WAAW,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,YAYA"}
+{"version":3,"file":"use-calendar-grid-rows.d.ts","sourceRoot":"","sources":["../../../../src/calendar/grid/use-calendar-grid-rows.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,WAAW,EACX,MAAM,EACN,WAAW,EAAE,cAAc,GAC5B,EAAE;IACD,QAAQ,EAAE,IAAI,CAAC;IACf,WAAW,EAAE,aAAa,CAAC,WAAW,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,YAaA"}

package/lib/internal/template/calendar/grid/use-calendar-grid-rows.js

@@ -1,20 +1,19 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { useMemo } from 'react';
-import { getCalendarMonth } from 'mnth';
+import { getCalendarMonthWithSixRows, getCalendarYear } from '../../internal/utils/date-time/calendar.js';
 import { normalizeStartOfWeek } from '../../internal/utils/locale/index.js';
-export default function useCalendarGridRows({ baseDate, granularity, locale, startOfWeek, }) {
+export default function useCalendarGridRows({ baseDate, granularity, locale, startOfWeek: rawStartOfWeek, }) {
     const isMonthPicker = granularity === 'month';
-    const rows = useMemo(() => isMonthPicker
-        ? getCalendarYear(baseDate)
-        : getCalendarMonth(baseDate, { firstDayOfWeek: normalizeStartOfWeek(startOfWeek, locale) }), [baseDate, isMonthPicker, startOfWeek, locale]);
+    const rows = useMemo(() => {
+        if (isMonthPicker) {
+            return getCalendarYear(baseDate);
+        }
+        else {
+            const startOfWeek = normalizeStartOfWeek(rawStartOfWeek, locale);
+            return getCalendarMonthWithSixRows(baseDate, { startOfWeek, padDates: 'after' });
+        }
+    }, [baseDate, isMonthPicker, rawStartOfWeek, locale]);
     return rows;
 }
-// Returns a 3-by-4 matrix with dates corresponding to the initial date-time of each month of the year for a given date.
-function getCalendarYear(date) {
-    const year = date.getFullYear();
-    return new Array(4)
-        .fill(0)
-        .map((_, i) => new Array(3).fill(0).map((_, j) => new Date(year, i * 3 + j)));
-}
 //# sourceMappingURL=use-calendar-grid-rows.js.map

package/lib/internal/template/calendar/grid/use-calendar-grid-rows.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-calendar-grid-rows.js","sourceRoot":"","sources":["../../../../src/calendar/grid/use-calendar-grid-rows.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAExC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAG5E,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,WAAW,EACX,MAAM,EACN,WAAW,GAMZ;IACC,MAAM,aAAa,GAAG,WAAW,KAAK,OAAO,CAAC;IAE9C,MAAM,IAAI,GAAG,OAAO,CAClB,GAAG,EAAE,CACH,aAAa;QACX,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC;QAC3B,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE,EAAE,cAAc,EAAE,oBAAoB,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,CAAC,EAC/F,CAAC,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,CAAC,CAC/C,CAAC;IAEF,OAAO,IAAI,CAAC;AACd,CAAC;AAED,wHAAwH;AACxH,SAAS,eAAe,CAAC,IAAU;IACjC,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IAChC,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC;SAChB,IAAI,CAAC,CAAC,CAAC;SACP,GAAG,CAAC,CAAC,CAAC,EAAE,CAAS,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAS,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAClG,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 { getCalendarMonth } from 'mnth';\n\nimport { normalizeStartOfWeek } from '../../internal/utils/locale/index.js';\nimport { CalendarProps } from '../interfaces.js';\n\nexport default function useCalendarGridRows({\n  baseDate,\n  granularity,\n  locale,\n  startOfWeek,\n}: {\n  baseDate: Date;\n  granularity: CalendarProps.Granularity;\n  locale: string;\n  startOfWeek?: number;\n}) {\n  const isMonthPicker = granularity === 'month';\n\n  const rows = useMemo<Date[][]>(\n    () =>\n      isMonthPicker\n        ? getCalendarYear(baseDate)\n        : getCalendarMonth(baseDate, { firstDayOfWeek: normalizeStartOfWeek(startOfWeek, locale) }),\n    [baseDate, isMonthPicker, startOfWeek, locale]\n  );\n\n  return rows;\n}\n\n// Returns a 3-by-4 matrix with dates corresponding to the initial date-time of each month of the year for a given date.\nfunction getCalendarYear(date: Date): Date[][] {\n  const year = date.getFullYear();\n  return new Array(4)\n    .fill(0)\n    .map((_, i: number) => new Array(3).fill(0).map((_, j: number) => new Date(year, i * 3 + j)));\n}\n"]}
+{"version":3,"file":"use-calendar-grid-rows.js","sourceRoot":"","sources":["../../../../src/calendar/grid/use-calendar-grid-rows.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,2BAA2B,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAC1G,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAG5E,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,WAAW,EACX,MAAM,EACN,WAAW,EAAE,cAAc,GAM5B;IACC,MAAM,aAAa,GAAG,WAAW,KAAK,OAAO,CAAC;IAE9C,MAAM,IAAI,GAAG,OAAO,CAAW,GAAG,EAAE;QAClC,IAAI,aAAa,EAAE;YACjB,OAAO,eAAe,CAAC,QAAQ,CAAC,CAAC;SAClC;aAAM;YACL,MAAM,WAAW,GAAG,oBAAoB,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;YACjE,OAAO,2BAA2B,CAAC,QAAQ,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;SAClF;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;IAEtD,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';\n\nimport { getCalendarMonthWithSixRows, getCalendarYear } from '../../internal/utils/date-time/calendar.js';\nimport { normalizeStartOfWeek } from '../../internal/utils/locale/index.js';\nimport { CalendarProps } from '../interfaces.js';\n\nexport default function useCalendarGridRows({\n  baseDate,\n  granularity,\n  locale,\n  startOfWeek: rawStartOfWeek,\n}: {\n  baseDate: Date;\n  granularity: CalendarProps.Granularity;\n  locale: string;\n  startOfWeek?: number;\n}) {\n  const isMonthPicker = granularity === 'month';\n\n  const rows = useMemo<Date[][]>(() => {\n    if (isMonthPicker) {\n      return getCalendarYear(baseDate);\n    } else {\n      const startOfWeek = normalizeStartOfWeek(rawStartOfWeek, locale);\n      return getCalendarMonthWithSixRows(baseDate, { startOfWeek, padDates: 'after' });\n    }\n  }, [baseDate, isMonthPicker, rawStartOfWeek, locale]);\n\n  return rows;\n}\n"]}

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,gBAiJX,CAAC"}
+{"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"}

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

@@ -93,7 +93,7 @@ export const Grids = ({ baseDate, selectedStartDate, selectedEndDate, focusedDat
     const rangeEndDate = max(rangeEnds);
     return (React.createElement("div", { ref: containerRef, onFocus: onGridFocus, onBlur: onGridBlur },
         React.createElement(InternalSpaceBetween, { size: "xs", direction: "horizontal" },
-            !isSingleGrid && (React.createElement(MonthlyGrid, { 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, { 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(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` }))));
 };
 //# 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            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          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, 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"]}

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

@@ -15,6 +15,7 @@ import { DateRangePickerProps, DayIndex } from '../../interfaces';
  * - (keyboard navigation) Safari/Chrome+VO - day announcements are not interruptive and can be missed if navigating fast.
  */
 interface GridProps {
+    padDates: 'before' | 'after';
     baseDate: Date;
     selectedStartDate: Date | null;
     selectedEndDate: Date | null;
@@ -33,6 +34,6 @@ interface GridProps {
     ariaLabelledby: string;
     className?: string;
 }
-export declare function MonthlyGrid({ baseDate, selectedStartDate, selectedEndDate, rangeStartDate, rangeEndDate, focusedDate, focusedDateRef, onSelectDate, onGridKeyDownHandler, onFocusedDateChange, isDateEnabled, dateDisabledReason, locale, startOfWeek, todayAriaLabel, ariaLabelledby, className, }: GridProps): JSX.Element;
+export declare function MonthlyGrid({ padDates, baseDate, selectedStartDate, selectedEndDate, rangeStartDate, rangeEndDate, focusedDate, focusedDateRef, onSelectDate, onGridKeyDownHandler, onFocusedDateChange, isDateEnabled, dateDisabledReason, locale, startOfWeek, todayAriaLabel, ariaLabelledby, className, }: GridProps): JSX.Element;
 export {};
 //# sourceMappingURL=monthly-grid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"monthly-grid.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/monthly-grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAkBvC,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKlE;;;;;;;;;;;;;GAaG;AAEH,UAAU,SAAS;IACjB,QAAQ,EAAE,IAAI,CAAC;IACf,iBAAiB,EAAE,IAAI,GAAG,IAAI,CAAC;IAC/B,eAAe,EAAE,IAAI,GAAG,IAAI,CAAC;IAE7B,cAAc,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAE1B,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;IAEtD,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,oBAAoB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACpE,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;IAEpE,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,YAAY,EACZ,WAAW,EAEX,cAAc,EAEd,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EAEnB,aAAa,EACb,kBAAkB,EAElB,MAAM,EACN,WAAW,EACX,cAAc,EACd,cAAc,EAEd,SAAS,GACV,EAAE,SAAS,eAyIX"}
+{"version":3,"file":"monthly-grid.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/monthly-grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAQvC,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMlE;;;;;;;;;;;;;GAaG;AAEH,UAAU,SAAS;IACjB,QAAQ,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B,QAAQ,EAAE,IAAI,CAAC;IACf,iBAAiB,EAAE,IAAI,GAAG,IAAI,CAAC;IAC/B,eAAe,EAAE,IAAI,GAAG,IAAI,CAAC;IAE7B,cAAc,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAE1B,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;IAEtD,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,oBAAoB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACpE,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;IAEpE,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,YAAY,EACZ,WAAW,EAEX,cAAc,EAEd,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EAEnB,aAAa,EACb,kBAAkB,EAElB,MAAM,EACN,WAAW,EACX,cAAc,EACd,cAAc,EAEd,SAAS,GACV,EAAE,SAAS,eA0IX"}

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

@@ -2,50 +2,53 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useMemo } from 'react';
 import clsx from 'clsx';
-import { addDays, addWeeks, getDaysInMonth, isAfter, isBefore, isLastDayOfMonth, isSameDay, isSameMonth, isToday, } from 'date-fns';
-import { getCalendarMonth } from 'mnth';
+import { isAfter, isBefore, isLastDayOfMonth, isSameDay, isSameMonth, isToday } from 'date-fns';
 import { getDateLabel, renderDayName } from '../../../calendar/utils/intl';
 import ScreenreaderOnly from '../../../internal/components/screenreader-only/index.js';
 import { formatDate } from '../../../internal/utils/date-time';
+import { MonthCalendar } from '../../../internal/utils/date-time/calendar';
 import { GridCell } from './grid-cell';
+import testStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
-export function MonthlyGrid({ baseDate, selectedStartDate, selectedEndDate, rangeStartDate, rangeEndDate, focusedDate, focusedDateRef, onSelectDate, onGridKeyDownHandler, onFocusedDateChange, isDateEnabled, dateDisabledReason, locale, startOfWeek, todayAriaLabel, ariaLabelledby, className, }) {
-    const baseDateTime = baseDate === null || baseDate === void 0 ? void 0 : baseDate.getTime();
+export function MonthlyGrid({ padDates, baseDate, selectedStartDate, selectedEndDate, rangeStartDate, rangeEndDate, focusedDate, focusedDateRef, onSelectDate, onGridKeyDownHandler, onFocusedDateChange, isDateEnabled, dateDisabledReason, locale, startOfWeek, todayAriaLabel, ariaLabelledby, className, }) {
     // `baseDateTime` is used as a more stable replacement for baseDate
-    const weeks = useMemo(() => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }), 
+    const baseDateTime = baseDate === null || baseDate === void 0 ? void 0 : baseDate.getTime();
+    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;
+        return new MonthCalendar({ padDates, startOfWeek, baseDate, selection });
+    }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [baseDateTime, startOfWeek]);
-    const weekdays = weeks[0].map(date => date.getDay());
+    [padDates, startOfWeek, baseDateTime, rangeStartDate, rangeEndDate]);
     return (React.createElement("table", { role: "grid", "aria-labelledby": ariaLabelledby, className: clsx(styles.grid, className) },
         React.createElement("thead", null,
-            React.createElement("tr", null, weekdays.map(dayIndex => (React.createElement("th", { key: dayIndex, scope: "col", className: clsx(styles['grid-cell'], styles['day-header']) },
+            React.createElement("tr", null, calendar.weekdays.map(dayIndex => (React.createElement("th", { key: dayIndex, scope: "col", className: clsx(styles['grid-cell'], styles['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 }, weeks.map((week, weekIndex) => {
-            return (React.createElement("tr", { key: weekIndex, className: styles.week }, week.map((date, dateIndex) => {
+        React.createElement("tbody", { onKeyDown: onGridKeyDownHandler }, calendar.weeks.map(({ days, testIndex }, weekIndex) => {
+            const isWeekBelongsToMonth = days.some(({ date }) => isSameMonth(date, baseDate));
+            return (React.createElement("tr", { key: weekIndex, className: clsx(styles.week, isWeekBelongsToMonth && testStyles['calendar-week']), "data-awsui-weekindex": testIndex }, days.map(({ date, isVisible, isInRange, isSelectionTop, isSelectionBottom, isSelectionLeft, isSelectionRight }, dateIndex) => {
                 const isStartDate = !!selectedStartDate && isSameDay(date, selectedStartDate);
                 const isEndDate = !!selectedEndDate && isSameDay(date, selectedEndDate);
                 const isSelected = isStartDate || isEndDate;
-                const isRangeStartDate = !!rangeStartDate && isSameDay(date, rangeStartDate);
-                const isRangeEndDate = !!rangeEndDate && isSameDay(date, rangeEndDate);
-                const isFocused = !!focusedDate && isSameDay(date, focusedDate) && isSameMonth(date, baseDate);
-                const dateIsInRange = isStartDate || isEndDate || isInRange(date, rangeStartDate, rangeEndDate);
-                const inRangeStartWeek = rangeStartDate && isInRange(date, rangeStartDate, addDays(addWeeks(rangeStartDate, 1), -1));
-                const inRangeEndWeek = rangeEndDate && isInRange(date, rangeEndDate, addDays(addWeeks(rangeEndDate, -1), 1));
+                const isFocused = !!focusedDate && isSameDay(date, focusedDate);
                 const onlyOneSelected = !!rangeStartDate && !!rangeEndDate
                     ? isSameDay(rangeStartDate, rangeEndDate)
                     : !selectedStartDate || !selectedEndDate;
-                const isEnabled = !isDateEnabled || isDateEnabled(date);
+                const isDateBelongsToMonth = isSameMonth(date, baseDate);
+                const isEnabled = (!isDateEnabled || isDateEnabled(date)) && isDateBelongsToMonth;
                 const disabledReason = dateDisabledReason(date);
                 const isDisabledWithReason = !isEnabled && !!disabledReason;
                 const isFocusable = isFocused && (isEnabled || isDisabledWithReason);
                 const baseClasses = {
                     [styles.day]: true,
+                    [testStyles['calendar-date']]: isDateBelongsToMonth,
                     [styles['grid-cell']]: true,
                     [styles['in-first-row']]: weekIndex === 0,
                     [styles['in-first-column']]: dateIndex === 0,
                 };
-                if (!isSameMonth(date, baseDate)) {
+                if (!isVisible) {
                     return (React.createElement("td", { key: `${weekIndex}:${dateIndex}`, ref: isFocused ? focusedDateRef : undefined, className: clsx(baseClasses, {
                             [styles['in-previous-month']]: isBefore(date, baseDate),
                             [styles['last-day-of-month']]: isLastDayOfMonth(date),
@@ -73,31 +76,22 @@ export function MonthlyGrid({ baseDate, selectedStartDate, selectedEndDate, rang
                     dayAnnouncement += '. ' + todayAriaLabel;
                 }
                 return (React.createElement(GridCell, Object.assign({ ref: isFocused ? focusedDateRef : undefined, key: `${weekIndex}:${dateIndex}`, className: clsx(baseClasses, {
-                        [styles['in-current-month']]: isSameMonth(date, baseDate),
+                        [styles['in-visible-calendar']]: true,
                         [styles.enabled]: isEnabled,
                         [styles.selected]: isSelected,
                         [styles['start-date']]: isStartDate,
                         [styles['end-date']]: isEndDate,
-                        [styles['range-start-date']]: isRangeStartDate,
-                        [styles['range-end-date']]: isRangeEndDate,
                         [styles['no-range']]: isSelected && onlyOneSelected,
-                        [styles['in-range']]: dateIsInRange,
-                        [styles['in-range-border-block-start']]: !!inRangeStartWeek || date.getDate() <= 7,
-                        [styles['in-range-border-block-end']]: !!inRangeEndWeek || date.getDate() > getDaysInMonth(date) - 7,
-                        [styles['in-range-border-inline-start']]: dateIndex === 0 || date.getDate() === 1 || isRangeStartDate,
-                        [styles['in-range-border-inline-end']]: dateIndex === week.length - 1 || isLastDayOfMonth(date) || isRangeEndDate,
+                        [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]: isToday(date),
-                    }), "aria-selected": isEnabled ? isSelected || dateIsInRange : undefined, "aria-current": isToday(date) ? 'date' : undefined, "data-date": formatDate(date), "aria-disabled": !isEnabled, tabIndex: tabIndex, disabledReason: isDisabledWithReason ? disabledReason : undefined }, handlers),
+                    }), "aria-selected": isEnabled ? isSelected || isInRange : undefined, "aria-current": isToday(date) ? 'date' : undefined, "data-date": formatDate(date), "aria-disabled": !isEnabled, tabIndex: tabIndex, disabledReason: isDisabledWithReason ? disabledReason : undefined }, handlers),
                     React.createElement("span", { className: styles['day-inner'], "aria-hidden": "true" }, date.getDate()),
                     React.createElement(ScreenreaderOnly, null, dayAnnouncement)));
             })));
         }))));
 }
-function isInRange(date, dateOne, dateTwo) {
-    if (!dateOne || !dateTwo || isSameDay(dateOne, dateTwo)) {
-        return false;
-    }
-    const inRange = (isAfter(date, dateOne) && isBefore(date, dateTwo)) || (isAfter(date, dateTwo) && isBefore(date, dateOne));
-    return inRange || isSameDay(date, dateOne) || isSameDay(date, dateTwo);
-}
 //# sourceMappingURL=monthly-grid.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"monthly-grid.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/monthly-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 {\n  addDays,\n  addWeeks,\n  getDaysInMonth,\n  isAfter,\n  isBefore,\n  isLastDayOfMonth,\n  isSameDay,\n  isSameMonth,\n  isToday,\n} from 'date-fns';\nimport { getCalendarMonth } from 'mnth';\n\nimport { getDateLabel, renderDayName } from '../../../calendar/utils/intl';\nimport ScreenreaderOnly from '../../../internal/components/screenreader-only/index.js';\nimport { formatDate } from '../../../internal/utils/date-time';\nimport { DateRangePickerProps, DayIndex } from '../../interfaces';\nimport { GridCell } from './grid-cell';\n\nimport styles from './styles.css.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 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\ninterface GridProps {\n  baseDate: Date;\n  selectedStartDate: Date | null;\n  selectedEndDate: Date | null;\n\n  rangeStartDate: Date | null;\n  rangeEndDate: Date | null;\n\n  focusedDate: Date | null;\n  focusedDateRef: React.RefObject<HTMLTableCellElement>;\n\n  onSelectDate: (date: Date) => void;\n  onGridKeyDownHandler: (e: React.KeyboardEvent<HTMLElement>) => void;\n  onFocusedDateChange: React.Dispatch<React.SetStateAction<Date | null>>;\n\n  isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;\n  dateDisabledReason: DateRangePickerProps.DateDisabledReasonFunction;\n\n  locale: string;\n  startOfWeek: DayIndex;\n  todayAriaLabel?: string;\n  ariaLabelledby: string;\n\n  className?: string;\n}\n\nexport function MonthlyGrid({\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  startOfWeek,\n  todayAriaLabel,\n  ariaLabelledby,\n\n  className,\n}: GridProps) {\n  const baseDateTime = baseDate?.getTime();\n  // `baseDateTime` is used as a more stable replacement for baseDate\n  const weeks = useMemo<Date[][]>(\n    () => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [baseDateTime, startOfWeek]\n  );\n  const weekdays = weeks[0].map(date => date.getDay());\n\n  return (\n    <table role=\"grid\" aria-labelledby={ariaLabelledby} className={clsx(styles.grid, className)}>\n      <thead>\n        <tr>\n          {weekdays.map(dayIndex => (\n            <th key={dayIndex} scope=\"col\" className={clsx(styles['grid-cell'], styles['day-header'])}>\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          return (\n            <tr key={weekIndex} className={styles.week}>\n              {week.map((date, dateIndex) => {\n                const isStartDate = !!selectedStartDate && isSameDay(date, selectedStartDate);\n                const isEndDate = !!selectedEndDate && isSameDay(date, selectedEndDate);\n                const isSelected = isStartDate || isEndDate;\n                const isRangeStartDate = !!rangeStartDate && isSameDay(date, rangeStartDate);\n                const isRangeEndDate = !!rangeEndDate && isSameDay(date, rangeEndDate);\n\n                const isFocused = !!focusedDate && isSameDay(date, focusedDate) && isSameMonth(date, baseDate);\n\n                const dateIsInRange = isStartDate || isEndDate || isInRange(date, rangeStartDate, rangeEndDate);\n                const inRangeStartWeek =\n                  rangeStartDate && isInRange(date, rangeStartDate, addDays(addWeeks(rangeStartDate, 1), -1));\n                const inRangeEndWeek =\n                  rangeEndDate && isInRange(date, rangeEndDate, addDays(addWeeks(rangeEndDate, -1), 1));\n                const onlyOneSelected =\n                  !!rangeStartDate && !!rangeEndDate\n                    ? isSameDay(rangeStartDate, rangeEndDate)\n                    : !selectedStartDate || !selectedEndDate;\n\n                const isEnabled = !isDateEnabled || isDateEnabled(date);\n                const disabledReason = dateDisabledReason(date);\n                const isDisabledWithReason = !isEnabled && !!disabledReason;\n                const isFocusable = isFocused && (isEnabled || isDisabledWithReason);\n\n                const baseClasses = {\n                  [styles.day]: true,\n                  [styles['grid-cell']]: true,\n                  [styles['in-first-row']]: weekIndex === 0,\n                  [styles['in-first-column']]: dateIndex === 0,\n                };\n\n                if (!isSameMonth(date, baseDate)) {\n                  return (\n                    <td\n                      key={`${weekIndex}:${dateIndex}`}\n                      ref={isFocused ? focusedDateRef : undefined}\n                      className={clsx(baseClasses, {\n                        [styles['in-previous-month']]: isBefore(date, baseDate),\n                        [styles['last-day-of-month']]: isLastDayOfMonth(date),\n                        [styles['in-next-month']]: isAfter(date, baseDate),\n                      })}\n                    ></td>\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                // Can't be focused.\n                let tabIndex = undefined;\n                if (isFocusable && (isEnabled || isDisabledWithReason)) {\n                  // Next focus target.\n                  tabIndex = 0;\n                } else if (isEnabled || isDisabledWithReason) {\n                  // Can be focused programmatically.\n                  tabIndex = -1;\n                }\n\n                // Screen-reader announcement for the focused day.\n                let dayAnnouncement = getDateLabel(locale, date, 'short');\n                if (isToday(date)) {\n                  dayAnnouncement += '. ' + todayAriaLabel;\n                }\n\n                return (\n                  <GridCell\n                    ref={isFocused ? focusedDateRef : undefined}\n                    key={`${weekIndex}:${dateIndex}`}\n                    className={clsx(baseClasses, {\n                      [styles['in-current-month']]: isSameMonth(date, baseDate),\n                      [styles.enabled]: isEnabled,\n                      [styles.selected]: isSelected,\n                      [styles['start-date']]: isStartDate,\n                      [styles['end-date']]: isEndDate,\n                      [styles['range-start-date']]: isRangeStartDate,\n                      [styles['range-end-date']]: isRangeEndDate,\n                      [styles['no-range']]: isSelected && onlyOneSelected,\n                      [styles['in-range']]: dateIsInRange,\n                      [styles['in-range-border-block-start']]: !!inRangeStartWeek || date.getDate() <= 7,\n                      [styles['in-range-border-block-end']]:\n                        !!inRangeEndWeek || date.getDate() > getDaysInMonth(date) - 7,\n                      [styles['in-range-border-inline-start']]:\n                        dateIndex === 0 || date.getDate() === 1 || isRangeStartDate,\n                      [styles['in-range-border-inline-end']]:\n                        dateIndex === week.length - 1 || isLastDayOfMonth(date) || isRangeEndDate,\n                      [styles.today]: isToday(date),\n                    })}\n                    aria-selected={isEnabled ? isSelected || dateIsInRange : undefined}\n                    aria-current={isToday(date) ? 'date' : undefined}\n                    data-date={formatDate(date)}\n                    aria-disabled={!isEnabled}\n                    tabIndex={tabIndex}\n                    disabledReason={isDisabledWithReason ? disabledReason : undefined}\n                    {...handlers}\n                  >\n                    <span className={styles['day-inner']} aria-hidden=\"true\">\n                      {date.getDate()}\n                    </span>\n                    <ScreenreaderOnly>{dayAnnouncement}</ScreenreaderOnly>\n                  </GridCell>\n                );\n              })}\n            </tr>\n          );\n        })}\n      </tbody>\n    </table>\n  );\n}\n\nfunction isInRange(date: Date, dateOne: Date | null, dateTwo: Date | null) {\n  if (!dateOne || !dateTwo || isSameDay(dateOne, dateTwo)) {\n    return false;\n  }\n\n  const inRange =\n    (isAfter(date, dateOne) && isBefore(date, dateTwo)) || (isAfter(date, dateTwo) && isBefore(date, dateOne));\n\n  return inRange || isSameDay(date, dateOne) || isSameDay(date, dateTwo);\n}\n"]}
+{"version":3,"file":"monthly-grid.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/monthly-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 { isAfter, isBefore, isLastDayOfMonth, isSameDay, isSameMonth, isToday } from 'date-fns';\n\nimport { getDateLabel, renderDayName } from '../../../calendar/utils/intl';\nimport ScreenreaderOnly from '../../../internal/components/screenreader-only/index.js';\nimport { formatDate } from '../../../internal/utils/date-time';\nimport { MonthCalendar } from '../../../internal/utils/date-time/calendar';\nimport { DateRangePickerProps, DayIndex } from '../../interfaces';\nimport { GridCell } from './grid-cell';\n\nimport testStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.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 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\ninterface GridProps {\n  padDates: 'before' | 'after';\n  baseDate: Date;\n  selectedStartDate: Date | null;\n  selectedEndDate: Date | null;\n\n  rangeStartDate: Date | null;\n  rangeEndDate: Date | null;\n\n  focusedDate: Date | null;\n  focusedDateRef: React.RefObject<HTMLTableCellElement>;\n\n  onSelectDate: (date: Date) => void;\n  onGridKeyDownHandler: (e: React.KeyboardEvent<HTMLElement>) => void;\n  onFocusedDateChange: React.Dispatch<React.SetStateAction<Date | null>>;\n\n  isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;\n  dateDisabledReason: DateRangePickerProps.DateDisabledReasonFunction;\n\n  locale: string;\n  startOfWeek: DayIndex;\n  todayAriaLabel?: string;\n  ariaLabelledby: string;\n\n  className?: string;\n}\n\nexport function MonthlyGrid({\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  startOfWeek,\n  todayAriaLabel,\n  ariaLabelledby,\n\n  className,\n}: GridProps) {\n  // `baseDateTime` is used as a more stable replacement for baseDate\n  const baseDateTime = baseDate?.getTime();\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      return new MonthCalendar({ padDates, startOfWeek, baseDate, selection });\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [padDates, startOfWeek, baseDateTime, rangeStartDate, rangeEndDate]\n  );\n  return (\n    <table role=\"grid\" aria-labelledby={ariaLabelledby} className={clsx(styles.grid, className)}>\n      <thead>\n        <tr>\n          {calendar.weekdays.map(dayIndex => (\n            <th key={dayIndex} scope=\"col\" className={clsx(styles['grid-cell'], styles['day-header'])}>\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        {calendar.weeks.map(({ days, testIndex }, weekIndex) => {\n          const isWeekBelongsToMonth = days.some(({ date }) => isSameMonth(date, baseDate));\n          return (\n            <tr\n              key={weekIndex}\n              className={clsx(styles.week, isWeekBelongsToMonth && testStyles['calendar-week'])}\n              data-awsui-weekindex={testIndex}\n            >\n              {days.map(\n                (\n                  { date, isVisible, isInRange, isSelectionTop, isSelectionBottom, isSelectionLeft, isSelectionRight },\n                  dateIndex\n                ) => {\n                  const isStartDate = !!selectedStartDate && isSameDay(date, selectedStartDate);\n                  const isEndDate = !!selectedEndDate && isSameDay(date, selectedEndDate);\n                  const isSelected = isStartDate || isEndDate;\n                  const isFocused = !!focusedDate && isSameDay(date, focusedDate);\n                  const onlyOneSelected =\n                    !!rangeStartDate && !!rangeEndDate\n                      ? isSameDay(rangeStartDate, rangeEndDate)\n                      : !selectedStartDate || !selectedEndDate;\n\n                  const isDateBelongsToMonth = isSameMonth(date, baseDate);\n                  const isEnabled = (!isDateEnabled || isDateEnabled(date)) && isDateBelongsToMonth;\n                  const disabledReason = dateDisabledReason(date);\n                  const isDisabledWithReason = !isEnabled && !!disabledReason;\n                  const isFocusable = isFocused && (isEnabled || isDisabledWithReason);\n\n                  const baseClasses = {\n                    [styles.day]: true,\n                    [testStyles['calendar-date']]: isDateBelongsToMonth,\n                    [styles['grid-cell']]: true,\n                    [styles['in-first-row']]: weekIndex === 0,\n                    [styles['in-first-column']]: dateIndex === 0,\n                  };\n\n                  if (!isVisible) {\n                    return (\n                      <td\n                        key={`${weekIndex}:${dateIndex}`}\n                        ref={isFocused ? focusedDateRef : undefined}\n                        className={clsx(baseClasses, {\n                          [styles['in-previous-month']]: isBefore(date, baseDate),\n                          [styles['last-day-of-month']]: isLastDayOfMonth(date),\n                          [styles['in-next-month']]: isAfter(date, baseDate),\n                        })}\n                      ></td>\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                  // Can't be focused.\n                  let tabIndex = undefined;\n                  if (isFocusable && (isEnabled || isDisabledWithReason)) {\n                    // Next focus target.\n                    tabIndex = 0;\n                  } else if (isEnabled || isDisabledWithReason) {\n                    // Can be focused programmatically.\n                    tabIndex = -1;\n                  }\n\n                  // Screen-reader announcement for the focused day.\n                  let dayAnnouncement = getDateLabel(locale, date, 'short');\n                  if (isToday(date)) {\n                    dayAnnouncement += '. ' + todayAriaLabel;\n                  }\n\n                  return (\n                    <GridCell\n                      ref={isFocused ? focusedDateRef : undefined}\n                      key={`${weekIndex}:${dateIndex}`}\n                      className={clsx(baseClasses, {\n                        [styles['in-visible-calendar']]: true,\n                        [styles.enabled]: isEnabled,\n                        [styles.selected]: isSelected,\n                        [styles['start-date']]: isStartDate,\n                        [styles['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]: isToday(date),\n                      })}\n                      aria-selected={isEnabled ? isSelected || isInRange : undefined}\n                      aria-current={isToday(date) ? 'date' : undefined}\n                      data-date={formatDate(date)}\n                      aria-disabled={!isEnabled}\n                      tabIndex={tabIndex}\n                      disabledReason={isDisabledWithReason ? disabledReason : undefined}\n                      {...handlers}\n                    >\n                      <span className={styles['day-inner']} aria-hidden=\"true\">\n                        {date.getDate()}\n                      </span>\n                      <ScreenreaderOnly>{dayAnnouncement}</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/styles.css.js

@@ -1,33 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "grid": "awsui_grid_1mfbn_1agc5_149",
-  "grid-cell": "awsui_grid-cell_1mfbn_1agc5_154",
-  "day-header": "awsui_day-header_1mfbn_1agc5_161",
-  "week": "awsui_week_1mfbn_1agc5_171",
-  "day": "awsui_day_1mfbn_1agc5_161",
-  "day-inner": "awsui_day-inner_1mfbn_1agc5_218",
-  "in-first-row": "awsui_in-first-row_1mfbn_1agc5_223",
-  "in-previous-month": "awsui_in-previous-month_1mfbn_1agc5_223",
-  "last-day-of-month": "awsui_last-day-of-month_1mfbn_1agc5_227",
-  "in-next-month": "awsui_in-next-month_1mfbn_1agc5_231",
-  "in-first-column": "awsui_in-first-column_1mfbn_1agc5_235",
-  "in-current-month": "awsui_in-current-month_1mfbn_1agc5_238",
-  "enabled": "awsui_enabled_1mfbn_1agc5_242",
-  "in-range": "awsui_in-range_1mfbn_1agc5_248",
-  "end-date": "awsui_end-date_1mfbn_1agc5_248",
-  "start-date": "awsui_start-date_1mfbn_1agc5_248",
-  "no-range": "awsui_no-range_1mfbn_1agc5_248",
-  "selected": "awsui_selected_1mfbn_1agc5_258",
-  "today": "awsui_today_1mfbn_1agc5_263",
-  "range-start-date": "awsui_range-start-date_1mfbn_1agc5_308",
-  "in-range-border-bottom": "awsui_in-range-border-bottom_1mfbn_1agc5_311",
-  "range-end-date": "awsui_range-end-date_1mfbn_1agc5_314",
-  "in-range-border-top": "awsui_in-range-border-top_1mfbn_1agc5_317",
-  "in-range-border-block-start": "awsui_in-range-border-block-start_1mfbn_1agc5_330",
-  "in-range-border-inline-end": "awsui_in-range-border-inline-end_1mfbn_1agc5_333",
-  "in-range-border-block-end": "awsui_in-range-border-block-end_1mfbn_1agc5_336",
-  "in-range-border-inline-start": "awsui_in-range-border-inline-start_1mfbn_1agc5_339",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_1mfbn_1agc5_355"
+  "grid": "awsui_grid_1mfbn_1xshi_149",
+  "grid-cell": "awsui_grid-cell_1mfbn_1xshi_154",
+  "day-header": "awsui_day-header_1mfbn_1xshi_161",
+  "week": "awsui_week_1mfbn_1xshi_171",
+  "day": "awsui_day_1mfbn_1xshi_161",
+  "day-inner": "awsui_day-inner_1mfbn_1xshi_218",
+  "in-first-row": "awsui_in-first-row_1mfbn_1xshi_223",
+  "in-previous-month": "awsui_in-previous-month_1mfbn_1xshi_223",
+  "last-day-of-month": "awsui_last-day-of-month_1mfbn_1xshi_227",
+  "in-next-month": "awsui_in-next-month_1mfbn_1xshi_231",
+  "in-first-column": "awsui_in-first-column_1mfbn_1xshi_235",
+  "in-visible-calendar": "awsui_in-visible-calendar_1mfbn_1xshi_238",
+  "enabled": "awsui_enabled_1mfbn_1xshi_242",
+  "in-range": "awsui_in-range_1mfbn_1xshi_248",
+  "end-date": "awsui_end-date_1mfbn_1xshi_248",
+  "start-date": "awsui_start-date_1mfbn_1xshi_248",
+  "no-range": "awsui_no-range_1mfbn_1xshi_248",
+  "selected": "awsui_selected_1mfbn_1xshi_258",
+  "today": "awsui_today_1mfbn_1xshi_263",
+  "in-range-border-block-start": "awsui_in-range-border-block-start_1mfbn_1xshi_321",
+  "in-range-border-inline-end": "awsui_in-range-border-inline-end_1mfbn_1xshi_324",
+  "in-range-border-block-end": "awsui_in-range-border-block-end_1mfbn_1xshi_327",
+  "in-range-border-inline-start": "awsui_in-range-border-inline-start_1mfbn_1xshi_330",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_1mfbn_1xshi_346"
 };