From c204e536cbbffd152d6a171ed4aab5dfdb9fdc5c Mon Sep 17 00:00:00 2001
From: Georgii Lobko <47106899+georgylobko@users.noreply.github.com>
Date: Mon, 27 Jan 2025 13:58:28 +0100
Subject: [PATCH 1/4] revert: "chore: Underline styles for popover text trigger
 (#3060)" (#3223)

---
 pages/popover/text-wrap.page.tsx              |  1 -
 .../__snapshots__/documenter.test.ts.snap     |  4 +--
 src/popover/interfaces.ts                     |  5 ++--
 src/popover/internal.tsx                      |  4 +--
 src/popover/styles.scss                       | 26 +------------------
 5 files changed, 6 insertions(+), 34 deletions(-)

diff --git a/pages/popover/text-wrap.page.tsx b/pages/popover/text-wrap.page.tsx
index e46a4b7bb1..1e21a81c90 100644
--- a/pages/popover/text-wrap.page.tsx
+++ b/pages/popover/text-wrap.page.tsx
@@ -26,7 +26,6 @@ const triggerPermutations = createPermutations<PopoverProps & { size: PopoverPro
       'Reallylongpopovercontentwithalotoftextbutnospacesthatwillprobablyoverflowthepopovertrigger',
     ],
     wrapTriggerText: [true, false],
-    triggerType: ['text', 'text-inline'],
   },
 ]);
 
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index fcda60b2aa..f83e1c2da5 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -12178,15 +12178,13 @@ that don't have visible text, and to distinguish between multiple triggers with
     {
       "defaultValue": "'text'",
       "description": "Specifies the type of content inside the trigger region. The following types are available:
-- \`text\` - Use for triggers containing inline components, like status indicator.
-- \`text-inline\` - Use for triggers containing plain text only.
+- \`text\` - Use for inline text triggers.
 - \`custom\` - Use for the [button](/components/button/) component.",
       "inlineType": {
         "name": "PopoverProps.TriggerType",
         "type": "union",
         "values": [
           "text",
-          "text-inline",
           "custom",
         ],
       },
diff --git a/src/popover/interfaces.ts b/src/popover/interfaces.ts
index 289277a3e0..617ba9f7fd 100644
--- a/src/popover/interfaces.ts
+++ b/src/popover/interfaces.ts
@@ -23,8 +23,7 @@ export interface PopoverProps extends BaseComponentProps {
 
   /**
    * Specifies the type of content inside the trigger region. The following types are available:
-   * - `text` - Use for triggers containing inline components, like status indicator.
-   * - `text-inline` - Use for triggers containing plain text only.
+   * - `text` - Use for inline text triggers.
    * - `custom` - Use for the [button](/components/button/) component.
    */
   triggerType?: PopoverProps.TriggerType;
@@ -115,7 +114,7 @@ export type Rect = BoundingBox & {
 export namespace PopoverProps {
   export type Position = 'top' | 'right' | 'bottom' | 'left';
   export type Size = 'small' | 'medium' | 'large';
-  export type TriggerType = 'text' | 'text-inline' | 'custom';
+  export type TriggerType = 'text' | 'custom';
 
   export interface Ref {
     /**
diff --git a/src/popover/internal.tsx b/src/popover/internal.tsx
index 3e22356a03..b9fb844731 100644
--- a/src/popover/internal.tsx
+++ b/src/popover/internal.tsx
@@ -74,7 +74,7 @@ function InternalPopover(
   const [visible, setVisible] = useState(false);
 
   const focusTrigger = useCallback(() => {
-    if (['text', 'text-inline'].includes(triggerType)) {
+    if (triggerType === 'text') {
       triggerRef.current?.focus();
     } else {
       triggerRef.current && getFirstFocusable(triggerRef.current)?.focus();
@@ -198,7 +198,7 @@ function InternalPopover(
         });
       }}
     >
-      {['text', 'text-inline'].includes(triggerType) ? (
+      {triggerType === 'text' ? (
         <button
           {...triggerProps}
           className={clsx(triggerProps.className, wrapTriggerText === false && styles['overflow-ellipsis'])}
diff --git a/src/popover/styles.scss b/src/popover/styles.scss
index bd07666e46..34c6f92b1c 100644
--- a/src/popover/styles.scss
+++ b/src/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;

From 5daebffa47ad1fd72b4f839254db6830177457ed Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Mon, 27 Jan 2025 14:48:40 +0100
Subject: [PATCH 2/4] chore: Attaches tooltip classes to popover container
 (#3219)

---
 src/internal/components/tooltip/index.tsx    |  4 ++--
 src/popover/container.tsx                    |  4 +++-
 src/select/__integ__/disabled-reason.test.ts | 16 ++++++++--------
 src/select/__tests__/disabled.test.tsx       |  2 +-
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/internal/components/tooltip/index.tsx b/src/internal/components/tooltip/index.tsx
index c2fd98a9ac..975201401b 100644
--- a/src/internal/components/tooltip/index.tsx
+++ b/src/internal/components/tooltip/index.tsx
@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import clsx from 'clsx';
 
 import PopoverArrow from '../../../popover/arrow';
 import PopoverBody from '../../../popover/body';
@@ -39,7 +38,7 @@ export default function Tooltip({
 
   return (
     <Portal>
-      <div className={clsx(styles.root, className)} {...contentAttributes} data-testid={trackKey}>
+      <div className={styles.root} {...contentAttributes} data-testid={trackKey}>
         <Transition in={true}>
           {() => (
             <PopoverContainer
@@ -51,6 +50,7 @@ export default function Tooltip({
               zIndex={7000}
               arrow={position => <PopoverArrow position={position} />}
               hideOnOverscroll={hideOnOverscroll}
+              className={className}
             >
               <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={undefined} header={undefined}>
                 {value}
diff --git a/src/popover/container.tsx b/src/popover/container.tsx
index faa4a72b6f..b5d3744a8d 100644
--- a/src/popover/container.tsx
+++ b/src/popover/container.tsx
@@ -41,6 +41,7 @@ interface PopoverContainerProps {
   allowVerticalOverflow?: boolean;
   // Whether the popover should be hidden when the trigger is scrolled away.
   hideOnOverscroll?: boolean;
+  className?: string;
 }
 
 export default function PopoverContainer({
@@ -58,6 +59,7 @@ export default function PopoverContainer({
   allowScrollToFit,
   allowVerticalOverflow,
   hideOnOverscroll,
+  className,
 }: PopoverContainerProps) {
   const bodyRef = useRef<HTMLDivElement | null>(null);
   const contentRef = useRef<HTMLDivElement | null>(null);
@@ -134,7 +136,7 @@ export default function PopoverContainer({
     <div
       ref={popoverRef}
       style={{ ...popoverStyle, zIndex }}
-      className={clsx(styles.container, isRefresh && styles.refresh)}
+      className={clsx(styles.container, isRefresh && styles.refresh, className)}
     >
       <div
         ref={arrowRef}
diff --git a/src/select/__integ__/disabled-reason.test.ts b/src/select/__integ__/disabled-reason.test.ts
index b7ed4c0eff..a8d1148557 100644
--- a/src/select/__integ__/disabled-reason.test.ts
+++ b/src/select/__integ__/disabled-reason.test.ts
@@ -38,16 +38,16 @@ describe('Disabled reasons', () => {
         await page.assertDropdownOpen(true);
         const dropdown = select.findDropdown();
         const disabledOption = select.findDropdown().findOption(1);
-        const disabledOptionToolipSelector = disabledOption.findDisabledReason().toSelector();
+        const disabledOptionTooltipSelector = disabledOption.findDisabledReason().toSelector();
 
         await page.hoverElement(disabledOption.toSelector());
-        expect(await page.isDisplayed(disabledOptionToolipSelector)).toBe(true);
+        expect(await page.isDisplayed(disabledOptionTooltipSelector)).toBe(true);
         await page.elementScrollTo(dropdown.findOptionsContainer().toSelector(), { top: 500 });
         await page.waitForJsTimers();
-        expect(await page.isDisplayed(disabledOptionToolipSelector)).toBe(false);
+        expect(await page.isDisplayed(disabledOptionTooltipSelector)).toBe(false);
         await page.elementScrollTo(dropdown.findOptionsContainer().toSelector(), { top: 0 });
         await page.waitForJsTimers();
-        expect(await page.isDisplayed(disabledOptionToolipSelector)).toBe(true);
+        expect(await page.isDisplayed(disabledOptionTooltipSelector)).toBe(true);
       })
     );
 
@@ -59,17 +59,17 @@ describe('Disabled reasons', () => {
         await page.assertDropdownOpen(true);
         const dropdown = select.findDropdown();
         const disabledOption = select.findDropdown().findOption(50);
-        const disabledOptionToolipSelector = disabledOption.findDisabledReason().toSelector();
+        const disabledOptionTooltipSelector = disabledOption.findDisabledReason().toSelector();
 
         await page.elementScrollTo(dropdown.findOptionsContainer().toSelector(), { top: 1000 });
         await page.hoverElement(disabledOption.toSelector());
-        expect(await page.isDisplayed(disabledOptionToolipSelector)).toBe(true);
+        expect(await page.isDisplayed(disabledOptionTooltipSelector)).toBe(true);
         await page.elementScrollTo(dropdown.findOptionsContainer().toSelector(), { top: 500 });
         await page.waitForJsTimers();
-        expect(await page.isDisplayed(disabledOptionToolipSelector)).toBe(false);
+        expect(await page.isDisplayed(disabledOptionTooltipSelector)).toBe(false);
         await page.elementScrollTo(dropdown.findOptionsContainer().toSelector(), { top: 1000 });
         await page.waitForJsTimers();
-        expect(await page.isDisplayed(disabledOptionToolipSelector)).toBe(true);
+        expect(await page.isDisplayed(disabledOptionTooltipSelector)).toBe(true);
       })
     );
   });
diff --git a/src/select/__tests__/disabled.test.tsx b/src/select/__tests__/disabled.test.tsx
index 607609a19a..da73f77553 100644
--- a/src/select/__tests__/disabled.test.tsx
+++ b/src/select/__tests__/disabled.test.tsx
@@ -152,7 +152,7 @@ describe.each([false, true])('expandToViewport=%s', expandToViewport => {
         expect(dropdown.findOption(1)!.findDisabledReason()!.getElement()).toHaveTextContent('disabled reason');
         window.dispatchEvent(new Event('scroll'));
         await waitFor(() => {
-          expect(dropdown.findOption(1)!.findDisabledReason()!.getElement()).toBeEmptyDOMElement();
+          expect(dropdown.findOption(1)!.findDisabledReason()).toBe(null);
         });
       });
     });

From baad5f74be6dbca16b1c8e66b1aeab46709a7a6b Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Mon, 27 Jan 2025 16:58:29 +0100
Subject: [PATCH 3/4] fix: Fixes calendar jumping when switching months (#3178)

Co-authored-by: Connor Lanigan <dev@connorlanigan.com>
---
 .../test-utils-selectors.test.tsx.snap        |   4 +-
 src/calendar/__tests__/calendar.test.tsx      |  51 ++--
 src/calendar/grid/use-calendar-grid-rows.ts   |  27 +-
 .../__tests__/date-picker-calendar.test.tsx   |  21 +-
 .../calendar/grids/index.tsx                  |   2 +
 .../calendar/grids/monthly-grid.tsx           | 245 ++++++++----------
 .../calendar/grids/styles.scss                |  21 +-
 .../test-classes/styles.scss                  |   9 +
 src/internal/utils/date-time/calendar.ts      | 165 ++++++++++++
 src/internal/utils/locale/index.ts            |   2 +-
 .../utils/locale/normalize-start-of-week.ts   |   2 +-
 src/test-utils/dom/date-range-picker/index.ts |   3 +-
 12 files changed, 354 insertions(+), 198 deletions(-)
 create mode 100644 src/date-range-picker/test-classes/styles.scss
 create mode 100644 src/internal/utils/date-time/calendar.ts

diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
index 153b69189e..9792e2468b 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
@@ -212,14 +212,15 @@ exports[`test-utils selectors 1`] = `
   ],
   "date-range-picker": [
     "awsui_apply-button_mgja0",
+    "awsui_calendar-date_1afkv",
     "awsui_calendar-header_mgja0",
     "awsui_calendar-next-month-btn_mgja0",
     "awsui_calendar-prev-month-btn_mgja0",
+    "awsui_calendar-week_1afkv",
     "awsui_cancel-button_mgja0",
     "awsui_clear-button_mgja0",
     "awsui_custom-range-duration-input_16zmw",
     "awsui_custom-range-unit-select_16zmw",
-    "awsui_day_1mfbn",
     "awsui_disabled-reason-tooltip_1mfbn",
     "awsui_dropdown_mgja0",
     "awsui_end-date-input_mgja0",
@@ -235,7 +236,6 @@ exports[`test-utils selectors 1`] = `
     "awsui_start-date_1mfbn",
     "awsui_start-time-input_mgja0",
     "awsui_validation-error_mgja0",
-    "awsui_week_1mfbn",
   ],
   "drawer": [
     "awsui_drawer_1sxt8",
diff --git a/src/calendar/__tests__/calendar.test.tsx b/src/calendar/__tests__/calendar.test.tsx
index a2fc95ac45..5811f4e159 100644
--- a/src/calendar/__tests__/calendar.test.tsx
+++ b/src/calendar/__tests__/calendar.test.tsx
@@ -3,6 +3,8 @@
 
 import * as React from 'react';
 import { fireEvent, render } from '@testing-library/react';
+import addMonths from 'date-fns/addMonths';
+import range from 'lodash/range';
 import MockDate from 'mockdate';
 
 import '../../__a11y__/to-validate-a11y';
@@ -42,13 +44,20 @@ function getDayText(wrapper: CalendarWrapper, row: number, col: number) {
   return wrapper.findDateAt(row, col).findByClassName(styles['date-inner'])!.getElement().textContent;
 }
 
-describe('Calendar', () => {
-  test('check a11y', async () => {
-    const { container } = renderCalendar();
-    await expect(container).toValidateA11y();
-  });
+test('check a11y', async () => {
+  const { container } = renderCalendar();
+  await expect(container).toValidateA11y();
 });
 
+const eachMonthOfTheYear = range(0, 11).map(month => addMonths(new Date('2025-01-01'), month).toISOString().split('T')[0]);
+test.each(eachMonthOfTheYear)(
+  'always renders 42 days, value=%s',
+  value => {
+    renderCalendar({ value });
+    expect(document.querySelectorAll(`.${styles['calendar-date']}`)).toHaveLength(42);
+  }
+);
+
 describe('Calendar locale US', () => {
   beforeEach(() => {
     const locale = new Intl.DateTimeFormat('en-US', { timeZone: 'EST' });
@@ -60,6 +69,22 @@ describe('Calendar locale US', () => {
     const { wrapper } = renderCalendar();
     expect(findCalendarWeekdays(wrapper)[0]).toBe('Sun');
   });
+
+  describe('Calendar header', () => {
+    test('previous button navigates to previous month', () => {
+      const { wrapper } = renderCalendar({ value: '2022-01-07' });
+      expect(wrapper.findHeader().getElement()).toHaveTextContent('January 2022');
+      wrapper.findPreviousButton().click();
+      expect(wrapper.findHeader().getElement()).toHaveTextContent('December 2021');
+    });
+
+    test('next button navigates to next month', () => {
+      const { wrapper } = renderCalendar({ value: '2022-01-07' });
+      expect(wrapper.findHeader().getElement()).toHaveTextContent('January 2022');
+      wrapper.findNextButton().click();
+      expect(wrapper.findHeader().getElement()).toHaveTextContent('February 2022');
+    });
+  });
 });
 
 describe('Calendar locale DE', () => {
@@ -75,22 +100,6 @@ describe('Calendar locale DE', () => {
   });
 });
 
-describe('Calendar header', () => {
-  test('previous button navigates to previous month', () => {
-    const { wrapper } = renderCalendar({ value: '2022-01-07' });
-    expect(wrapper.findHeader().getElement()).toHaveTextContent('January 2022');
-    wrapper.findPreviousButton().click();
-    expect(wrapper.findHeader().getElement()).toHaveTextContent('December 2021');
-  });
-
-  test('next button navigates to next month', () => {
-    const { wrapper } = renderCalendar({ value: '2022-01-07' });
-    expect(wrapper.findHeader().getElement()).toHaveTextContent('January 2022');
-    wrapper.findNextButton().click();
-    expect(wrapper.findHeader().getElement()).toHaveTextContent('February 2022');
-  });
-});
-
 describe('aria labels', () => {
   describe('aria-label', () => {
     test('can be set', () => {
diff --git a/src/calendar/grid/use-calendar-grid-rows.ts b/src/calendar/grid/use-calendar-grid-rows.ts
index 66d0e25cdd..efaa6a0b82 100644
--- a/src/calendar/grid/use-calendar-grid-rows.ts
+++ b/src/calendar/grid/use-calendar-grid-rows.ts
@@ -2,8 +2,8 @@
 // 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';
 import { CalendarProps } from '../interfaces.js';
 
@@ -11,7 +11,7 @@ export default function useCalendarGridRows({
   baseDate,
   granularity,
   locale,
-  startOfWeek,
+  startOfWeek: rawStartOfWeek,
 }: {
   baseDate: Date;
   granularity: CalendarProps.Granularity;
@@ -20,21 +20,14 @@ export default function useCalendarGridRows({
 }) {
   const isMonthPicker = granularity === 'month';
 
-  const rows = useMemo<Date[][]>(
-    () =>
-      isMonthPicker
-        ? getCalendarYear(baseDate)
-        : getCalendarMonth(baseDate, { firstDayOfWeek: normalizeStartOfWeek(startOfWeek, locale) }),
-    [baseDate, isMonthPicker, startOfWeek, locale]
-  );
+  const rows = useMemo<Date[][]>(() => {
+    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: Date): Date[][] {
-  const year = date.getFullYear();
-  return new Array(4)
-    .fill(0)
-    .map((_, i: number) => new Array(3).fill(0).map((_, j: number) => new Date(year, i * 3 + j)));
-}
diff --git a/src/date-picker/__tests__/date-picker-calendar.test.tsx b/src/date-picker/__tests__/date-picker-calendar.test.tsx
index 4e0ee91558..f8bbb9d9b6 100644
--- a/src/date-picker/__tests__/date-picker-calendar.test.tsx
+++ b/src/date-picker/__tests__/date-picker-calendar.test.tsx
@@ -18,6 +18,8 @@ import {
 import calendarStyles from '../../../lib/components/calendar/styles.selectors.js';
 import screenreaderOnlyStyles from '../../../lib/components/internal/components/screenreader-only/styles.selectors.js';
 
+const toLocaleDateString = window.Date.prototype.toLocaleDateString;
+
 describe('Date picker calendar', () => {
   const defaultProps: DatePickerProps = {
     i18nStrings: {
@@ -40,7 +42,10 @@ describe('Date picker calendar', () => {
     const locale = new Intl.DateTimeFormat('en-US', { timeZone: 'UTC' });
     jest.spyOn(Intl, 'DateTimeFormat').mockImplementation(() => locale);
   });
-  afterEach(() => jest.restoreAllMocks());
+  afterEach(() => {
+    jest.restoreAllMocks();
+    window.Date.prototype.toLocaleDateString = toLocaleDateString;
+  });
 
   describe('basic calendar interaction', () => {
     let wrapper: DatePickerWrapper, getByTestId: (selector: string) => HTMLElement;
@@ -116,18 +121,18 @@ describe('Date picker calendar', () => {
 
     test('should allow locale override', () => {
       const locale = 'de-DE';
-      const localStringMock = jest.fn().mockReturnValue('März 2018');
-      const oldImpl = window.Date.prototype.toLocaleDateString;
+      const localStringMock = jest.fn().mockReturnValue('translated');
       window.Date.prototype.toLocaleDateString = localStringMock;
 
       const { wrapper } = renderDatePicker({ ...defaultProps, locale });
       wrapper.findOpenCalendarButton().click();
-      expect(findCalendarHeaderText(wrapper)).toBe('März 2018');
-      // we render 2018/03/22 which results in
-      // -> 35 (5 weeks á 7 days) + 7 (weekday names) * 2 + 1 (month name)
-      expect(localStringMock).toHaveBeenCalledTimes(51);
+      expect(findCalendarHeaderText(wrapper)).toBe('translated');
+      // For each calendar we render 6 weeks (42 days) and each requires a label.
+      // Additionally, we generate short and full labels for weekday names (14 in total),
+      // and 2 labels for month name.
+      // 42 + 14 + 2 = 58.
+      expect(localStringMock).toHaveBeenCalledTimes(58);
       expect(localStringMock).toHaveBeenCalledWith(locale, expect.any(Object));
-      window.Date.prototype.toLocaleDateString = oldImpl;
     });
 
     test('should override start day of week', () => {
diff --git a/src/date-range-picker/calendar/grids/index.tsx b/src/date-range-picker/calendar/grids/index.tsx
index 29ec2e393c..b3eaf69ced 100644
--- a/src/date-range-picker/calendar/grids/index.tsx
+++ b/src/date-range-picker/calendar/grids/index.tsx
@@ -175,6 +175,7 @@ export const Grids = ({
       <InternalSpaceBetween size="xs" direction="horizontal">
         {!isSingleGrid && (
           <MonthlyGrid
+            padDates="before"
             className={styles['first-grid']}
             baseDate={addMonths(baseDate, -1)}
             selectedEndDate={selectedEndDate}
@@ -195,6 +196,7 @@ export const Grids = ({
           />
         )}
         <MonthlyGrid
+          padDates="after"
           className={styles['second-grid']}
           baseDate={baseDate}
           selectedEndDate={selectedEndDate}
diff --git a/src/date-range-picker/calendar/grids/monthly-grid.tsx b/src/date-range-picker/calendar/grids/monthly-grid.tsx
index 1ceae51c17..1d8b18e778 100644
--- a/src/date-range-picker/calendar/grids/monthly-grid.tsx
+++ b/src/date-range-picker/calendar/grids/monthly-grid.tsx
@@ -2,25 +2,16 @@
 // 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 { DateRangePickerProps, DayIndex } from '../../interfaces';
 import { GridCell } from './grid-cell';
 
+import testStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 
 /**
@@ -39,6 +30,7 @@ import styles from './styles.css.js';
  */
 
 interface GridProps {
+  padDates: 'before' | 'after';
   baseDate: Date;
   selectedStartDate: Date | null;
   selectedEndDate: Date | null;
@@ -65,6 +57,7 @@ interface GridProps {
 }
 
 export function MonthlyGrid({
+  padDates,
   baseDate,
   selectedStartDate,
   selectedEndDate,
@@ -88,20 +81,23 @@ export function MonthlyGrid({
 
   className,
 }: GridProps) {
-  const baseDateTime = baseDate?.getTime();
   // `baseDateTime` is used as a more stable replacement for baseDate
-  const weeks = useMemo<Date[][]>(
-    () => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),
+  const baseDateTime = baseDate?.getTime();
+  const calendar = useMemo(
+    () => {
+      const startDate = rangeStartDate ?? rangeEndDate;
+      const endDate = rangeEndDate ?? rangeStartDate;
+      const selection = startDate && endDate ? ([startDate, endDate] as [Date, Date]) : null;
+      return new MonthCalendar({ padDates, startOfWeek, baseDate, selection });
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [baseDateTime, startOfWeek]
+    [padDates, startOfWeek, baseDateTime, rangeStartDate, rangeEndDate]
   );
-  const weekdays = weeks[0].map(date => date.getDay());
-
   return (
     <table role="grid" aria-labelledby={ariaLabelledby} className={clsx(styles.grid, className)}>
       <thead>
         <tr>
-          {weekdays.map(dayIndex => (
+          {calendar.weekdays.map(dayIndex => (
             <th key={dayIndex} scope="col" className={clsx(styles['grid-cell'], styles['day-header'])}>
               <span aria-hidden="true">{renderDayName(locale, dayIndex, 'short')}</span>
               <ScreenreaderOnly>{renderDayName(locale, dayIndex, 'long')}</ScreenreaderOnly>
@@ -110,114 +106,112 @@ export function MonthlyGrid({
         </tr>
       </thead>
       <tbody onKeyDown={onGridKeyDownHandler}>
-        {weeks.map((week, weekIndex) => {
+        {calendar.weeks.map(({ days, testIndex }, weekIndex) => {
+          const isWeekBelongsToMonth = days.some(({ date }) => isSameMonth(date, baseDate));
           return (
-            <tr key={weekIndex} className={styles.week}>
-              {week.map((date, 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 onlyOneSelected =
-                  !!rangeStartDate && !!rangeEndDate
-                    ? isSameDay(rangeStartDate, rangeEndDate)
-                    : !selectedStartDate || !selectedEndDate;
-
-                const isEnabled = !isDateEnabled || isDateEnabled(date);
-                const disabledReason = dateDisabledReason(date);
-                const isDisabledWithReason = !isEnabled && !!disabledReason;
-                const isFocusable = isFocused && (isEnabled || isDisabledWithReason);
-
-                const baseClasses = {
-                  [styles.day]: true,
-                  [styles['grid-cell']]: true,
-                  [styles['in-first-row']]: weekIndex === 0,
-                  [styles['in-first-column']]: dateIndex === 0,
-                };
-
-                if (!isSameMonth(date, baseDate)) {
+            <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 isFocused = !!focusedDate && isSameDay(date, focusedDate);
+                  const onlyOneSelected =
+                    !!rangeStartDate && !!rangeEndDate
+                      ? isSameDay(rangeStartDate, rangeEndDate)
+                      : !selectedStartDate || !selectedEndDate;
+
+                  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 (!isVisible) {
+                    return (
+                      <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),
+                          [styles['in-next-month']]: isAfter(date, baseDate),
+                        })}
+                      ></td>
+                    );
+                  }
+
+                  const handlers: React.HTMLAttributes<HTMLDivElement> = {};
+                  if (isEnabled) {
+                    handlers.onClick = () => onSelectDate(date);
+                    handlers.onFocus = () => onFocusedDateChange(date);
+                  }
+
+                  // Can't be focused.
+                  let tabIndex = undefined;
+                  if (isFocusable && (isEnabled || isDisabledWithReason)) {
+                    // Next focus target.
+                    tabIndex = 0;
+                  } else if (isEnabled || isDisabledWithReason) {
+                    // Can be focused programmatically.
+                    tabIndex = -1;
+                  }
+
+                  // Screen-reader announcement for the focused day.
+                  let dayAnnouncement = getDateLabel(locale, date, 'short');
+                  if (isToday(date)) {
+                    dayAnnouncement += '. ' + todayAriaLabel;
+                  }
+
                   return (
-                    <td
-                      key={`${weekIndex}:${dateIndex}`}
+                    <GridCell
                       ref={isFocused ? focusedDateRef : undefined}
+                      key={`${weekIndex}:${dateIndex}`}
                       className={clsx(baseClasses, {
-                        [styles['in-previous-month']]: isBefore(date, baseDate),
-                        [styles['last-day-of-month']]: isLastDayOfMonth(date),
-                        [styles['in-next-month']]: isAfter(date, baseDate),
+                        [styles['in-visible-calendar']]: true,
+                        [styles.enabled]: isEnabled,
+                        [styles.selected]: isSelected,
+                        [styles['start-date']]: isStartDate,
+                        [styles['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]: isToday(date),
                       })}
-                    ></td>
+                      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}
+                    >
+                      <span className={styles['day-inner']} aria-hidden="true">
+                        {date.getDate()}
+                      </span>
+                      <ScreenreaderOnly>{dayAnnouncement}</ScreenreaderOnly>
+                    </GridCell>
                   );
                 }
-
-                const handlers: React.HTMLAttributes<HTMLDivElement> = {};
-                if (isEnabled) {
-                  handlers.onClick = () => onSelectDate(date);
-                  handlers.onFocus = () => onFocusedDateChange(date);
-                }
-
-                // Can't be focused.
-                let tabIndex = undefined;
-                if (isFocusable && (isEnabled || isDisabledWithReason)) {
-                  // Next focus target.
-                  tabIndex = 0;
-                } else if (isEnabled || isDisabledWithReason) {
-                  // Can be focused programmatically.
-                  tabIndex = -1;
-                }
-
-                // Screen-reader announcement for the focused day.
-                let dayAnnouncement = getDateLabel(locale, date, 'short');
-                if (isToday(date)) {
-                  dayAnnouncement += '. ' + todayAriaLabel;
-                }
-
-                return (
-                  <GridCell
-                    ref={isFocused ? focusedDateRef : undefined}
-                    key={`${weekIndex}:${dateIndex}`}
-                    className={clsx(baseClasses, {
-                      [styles['in-current-month']]: isSameMonth(date, baseDate),
-                      [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.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}
-                  >
-                    <span className={styles['day-inner']} aria-hidden="true">
-                      {date.getDate()}
-                    </span>
-                    <ScreenreaderOnly>{dayAnnouncement}</ScreenreaderOnly>
-                  </GridCell>
-                );
-              })}
+              )}
             </tr>
           );
         })}
@@ -225,14 +219,3 @@ export function MonthlyGrid({
     </table>
   );
 }
-
-function isInRange(date: Date, dateOne: Date | null, dateTwo: Date | null) {
-  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);
-}
diff --git a/src/date-range-picker/calendar/grids/styles.scss b/src/date-range-picker/calendar/grids/styles.scss
index 9373a9583e..5b2a9f37d0 100644
--- a/src/date-range-picker/calendar/grids/styles.scss
+++ b/src/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 {
diff --git a/src/date-range-picker/test-classes/styles.scss b/src/date-range-picker/test-classes/styles.scss
new file mode 100644
index 0000000000..3741eefb28
--- /dev/null
+++ b/src/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 */
+}
diff --git a/src/internal/utils/date-time/calendar.ts b/src/internal/utils/date-time/calendar.ts
new file mode 100644
index 0000000000..70df1ef59b
--- /dev/null
+++ b/src/internal/utils/date-time/calendar.ts
@@ -0,0 +1,165 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import addMonths from 'date-fns/addMonths';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+import isSameDay from 'date-fns/isSameDay';
+import isSameMonth from 'date-fns/isSameMonth';
+import subMonths from 'date-fns/subMonths';
+import { getCalendarMonth } from 'mnth';
+
+import { DayIndex } from '../locale';
+
+// Returns a 3-by-4 matrix with dates corresponding to the initial date-time of each month of the year for a given date.
+export function getCalendarYear(date: Date): Date[][] {
+  const year = date.getFullYear();
+  return new Array(4)
+    .fill(0)
+    .map((_, i: number) => new Array(3).fill(0).map((_, j: number) => new Date(year, i * 3 + j)));
+}
+
+interface CalendarWeek {
+  days: CalendarDate[];
+  testIndex?: number;
+}
+
+interface CalendarDate {
+  date: Date;
+  isVisible: boolean;
+  isSelected: boolean;
+  isInRange: boolean;
+  isSelectionTop: boolean;
+  isSelectionBottom: boolean;
+  isSelectionLeft: boolean;
+  isSelectionRight: boolean;
+}
+
+export class MonthCalendar {
+  padDates: 'before' | 'after';
+  weekdays: number[];
+  weeks: CalendarWeek[];
+  range: [Date, Date];
+
+  constructor({
+    padDates,
+    baseDate,
+    startOfWeek,
+    selection,
+  }: {
+    padDates: 'before' | 'after';
+    baseDate: Date;
+    startOfWeek: DayIndex;
+    selection: null | [Date, Date];
+  }) {
+    this.padDates = padDates;
+    this.weeks = [];
+    this.range = [baseDate, baseDate];
+
+    const allCalendarDates = getCalendarMonthWithSixRows(baseDate, { startOfWeek, padDates });
+    this.weekdays = allCalendarDates[0].map(date => date.getDay());
+
+    const isDateVisible = (weekIndex: number, dayIndex: number) => {
+      const week = allCalendarDates[weekIndex];
+      const date = week?.[dayIndex];
+      if (!date) {
+        return false;
+      }
+      switch (padDates) {
+        case 'before':
+          return isSameMonth(date, baseDate) || isBefore(date, baseDate);
+        case 'after':
+          return isSameMonth(date, baseDate) || isAfter(date, baseDate);
+      }
+    };
+
+    const isDateInRange = (weekIndex: number, dayIndex: number) => {
+      const week = allCalendarDates[weekIndex];
+      const date = week?.[dayIndex];
+      return !!(date && selection && checkIsInRange(date, selection[0], selection[1]));
+    };
+
+    // The test index is only set for weeks that have at least one day that belongs to the current month.
+    // It starts from the first such week and counts from 1.
+    const getWeekTestIndex = (weekIndex: number): undefined | number => {
+      const week = allCalendarDates[weekIndex];
+      if (!week) {
+        return undefined;
+      }
+      if (!isSameMonth(week[0], baseDate) && !isSameMonth(week[week.length - 1], baseDate)) {
+        return undefined;
+      }
+      return (getWeekTestIndex(weekIndex - 1) ?? 0) + 1;
+    };
+
+    for (let weekIndex = 0; weekIndex < allCalendarDates.length; weekIndex++) {
+      const daysOfWeek = allCalendarDates[weekIndex];
+      const week: CalendarWeek = { days: [], testIndex: getWeekTestIndex(weekIndex) };
+
+      for (let dayIndex = 0; dayIndex < daysOfWeek.length; dayIndex++) {
+        const date = daysOfWeek[dayIndex];
+        const isVisible = isDateVisible(weekIndex, dayIndex);
+        const isSelected = !!(selection && (isSameDay(date, selection[0]) || isSameDay(date, selection[1])));
+        const isInRange = isDateInRange(weekIndex, dayIndex);
+        const isTop = isVisible && !isDateVisible(weekIndex - 1, dayIndex);
+        const isBottom = isVisible && !isDateVisible(weekIndex + 1, dayIndex);
+        const isLeft = isVisible && !isDateVisible(weekIndex, dayIndex - 1);
+        const isRight = isVisible && !isDateVisible(weekIndex, dayIndex + 1);
+        const isRangeTop = isInRange && !isDateInRange(weekIndex - 1, dayIndex);
+        const isRangeBottom = isInRange && !isDateInRange(weekIndex + 1, dayIndex);
+        const isRangeLeft = isInRange && !isDateInRange(weekIndex, dayIndex - 1);
+        const isRangeRight = isInRange && !isDateInRange(weekIndex, dayIndex + 1);
+        week.days.push({
+          date,
+          isVisible,
+          isSelected,
+          isInRange,
+          isSelectionTop: isTop || isRangeTop,
+          isSelectionBottom: isBottom || isRangeBottom,
+          isSelectionLeft: isLeft || isRangeLeft,
+          isSelectionRight: isRight || isRangeRight,
+        });
+      }
+      this.weeks.push(week);
+    }
+  }
+}
+
+export function getCalendarMonthWithSixRows(
+  date: Date,
+  { startOfWeek, padDates }: { startOfWeek: DayIndex; padDates: 'before' | 'after' }
+) {
+  switch (padDates) {
+    case 'before':
+      return [...getPrevMonthRows(date, startOfWeek), ...getCurrentMonthRows(date, startOfWeek)].slice(-6);
+    case 'after':
+      return [...getCurrentMonthRows(date, startOfWeek), ...getNextMonthRows(date, startOfWeek)].slice(0, 6);
+  }
+}
+
+function checkIsInRange(date: Date, dateOne: Date | null, dateTwo: Date | null) {
+  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);
+}
+
+function getCurrentMonthRows(date: Date, firstDayOfWeek: DayIndex) {
+  return getCalendarMonth(date, { firstDayOfWeek });
+}
+
+function getPrevMonthRows(date: Date, firstDayOfWeek: DayIndex) {
+  const rows = getCalendarMonth(subMonths(date, 1), { firstDayOfWeek });
+  const lastDay = rows[rows.length - 1][rows[rows.length - 1].length - 1];
+  return !isSameMonth(date, lastDay) ? rows : rows.slice(0, -1);
+}
+
+function getNextMonthRows(date: Date, firstDayOfWeek: DayIndex) {
+  const rows = getCalendarMonth(addMonths(date, 1), { firstDayOfWeek });
+  const firstDay = rows[0][0];
+  return !isSameMonth(date, firstDay) ? rows : rows.slice(1);
+}
diff --git a/src/internal/utils/locale/index.ts b/src/internal/utils/locale/index.ts
index db10bf2376..f678a43261 100644
--- a/src/internal/utils/locale/index.ts
+++ b/src/internal/utils/locale/index.ts
@@ -3,4 +3,4 @@
 
 export { mergeLocales } from './merge-locales';
 export { normalizeLocale } from './normalize-locale';
-export { normalizeStartOfWeek } from './normalize-start-of-week';
+export { normalizeStartOfWeek, DayIndex } from './normalize-start-of-week';
diff --git a/src/internal/utils/locale/normalize-start-of-week.ts b/src/internal/utils/locale/normalize-start-of-week.ts
index 62269cc660..3e8f45bc12 100644
--- a/src/internal/utils/locale/normalize-start-of-week.ts
+++ b/src/internal/utils/locale/normalize-start-of-week.ts
@@ -3,7 +3,7 @@
 
 import { getWeekStartByLocale } from 'weekstart';
 
-type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
 export function normalizeStartOfWeek(startOfWeek: number | undefined, locale: string) {
   return (typeof startOfWeek === 'number' ? startOfWeek % 7 : getWeekStartByLocale(locale)) as DayIndex;
diff --git a/src/test-utils/dom/date-range-picker/index.ts b/src/test-utils/dom/date-range-picker/index.ts
index 6fe9db2c0b..9bd96b876e 100644
--- a/src/test-utils/dom/date-range-picker/index.ts
+++ b/src/test-utils/dom/date-range-picker/index.ts
@@ -12,6 +12,7 @@ import SelectWrapper from '../select';
 import gridStyles from '../../../date-range-picker/calendar/grids/styles.selectors.js';
 import relativeRangeStyles from '../../../date-range-picker/relative-range/styles.selectors.js';
 import styles from '../../../date-range-picker/styles.selectors.js';
+import testStyles from '../../../date-range-picker/test-classes/styles.selectors.js';
 
 export class CalendarDateWrapper extends ComponentWrapper {
   findDisabledReason(): ElementWrapper | null {
@@ -122,7 +123,7 @@ export class DrpDropdownWrapper extends ComponentWrapper {
   ): CalendarDateWrapper {
     const gridClassName = grid === 'right' ? styles['second-grid'] : styles['first-grid'];
     return this.findComponent(
-      `.${gridClassName} .${gridStyles.week}:nth-child(${row}) .${gridStyles.day}:nth-child(${column})`,
+      `.${gridClassName} .${testStyles['calendar-week']}[data-awsui-weekindex="${row}"] .${testStyles['calendar-date']}:nth-child(${column})`,
       CalendarDateWrapper
     )!;
   }

From 34cd820aea6133d96a34949e3681dfc046551aa3 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <47106899+georgylobko@users.noreply.github.com>
Date: Tue, 28 Jan 2025 09:35:20 +0100
Subject: [PATCH 4/4] feat: Popover text inline trigger (#3224)

---
 pages/popover/text-wrap.page.tsx              |  1 +
 .../__snapshots__/documenter.test.ts.snap     |  4 ++-
 src/popover/interfaces.ts                     |  5 ++--
 src/popover/internal.tsx                      |  4 +--
 src/popover/styles.scss                       | 26 ++++++++++++++++++-
 5 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/pages/popover/text-wrap.page.tsx b/pages/popover/text-wrap.page.tsx
index 1e21a81c90..e46a4b7bb1 100644
--- a/pages/popover/text-wrap.page.tsx
+++ b/pages/popover/text-wrap.page.tsx
@@ -26,6 +26,7 @@ const triggerPermutations = createPermutations<PopoverProps & { size: PopoverPro
       'Reallylongpopovercontentwithalotoftextbutnospacesthatwillprobablyoverflowthepopovertrigger',
     ],
     wrapTriggerText: [true, false],
+    triggerType: ['text', 'text-inline'],
   },
 ]);
 
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index f83e1c2da5..fcda60b2aa 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -12178,13 +12178,15 @@ that don't have visible text, and to distinguish between multiple triggers with
     {
       "defaultValue": "'text'",
       "description": "Specifies the type of content inside the trigger region. The following types are available:
-- \`text\` - Use for inline text triggers.
+- \`text\` - Use for triggers containing inline components, like status indicator.
+- \`text-inline\` - Use for triggers containing plain text only.
 - \`custom\` - Use for the [button](/components/button/) component.",
       "inlineType": {
         "name": "PopoverProps.TriggerType",
         "type": "union",
         "values": [
           "text",
+          "text-inline",
           "custom",
         ],
       },
diff --git a/src/popover/interfaces.ts b/src/popover/interfaces.ts
index 617ba9f7fd..289277a3e0 100644
--- a/src/popover/interfaces.ts
+++ b/src/popover/interfaces.ts
@@ -23,7 +23,8 @@ export interface PopoverProps extends BaseComponentProps {
 
   /**
    * Specifies the type of content inside the trigger region. The following types are available:
-   * - `text` - Use for inline text triggers.
+   * - `text` - Use for triggers containing inline components, like status indicator.
+   * - `text-inline` - Use for triggers containing plain text only.
    * - `custom` - Use for the [button](/components/button/) component.
    */
   triggerType?: PopoverProps.TriggerType;
@@ -114,7 +115,7 @@ export type Rect = BoundingBox & {
 export namespace PopoverProps {
   export type Position = 'top' | 'right' | 'bottom' | 'left';
   export type Size = 'small' | 'medium' | 'large';
-  export type TriggerType = 'text' | 'custom';
+  export type TriggerType = 'text' | 'text-inline' | 'custom';
 
   export interface Ref {
     /**
diff --git a/src/popover/internal.tsx b/src/popover/internal.tsx
index b9fb844731..3e22356a03 100644
--- a/src/popover/internal.tsx
+++ b/src/popover/internal.tsx
@@ -74,7 +74,7 @@ function InternalPopover(
   const [visible, setVisible] = useState(false);
 
   const focusTrigger = useCallback(() => {
-    if (triggerType === 'text') {
+    if (['text', 'text-inline'].includes(triggerType)) {
       triggerRef.current?.focus();
     } else {
       triggerRef.current && getFirstFocusable(triggerRef.current)?.focus();
@@ -198,7 +198,7 @@ function InternalPopover(
         });
       }}
     >
-      {triggerType === 'text' ? (
+      {['text', 'text-inline'].includes(triggerType) ? (
         <button
           {...triggerProps}
           className={clsx(triggerProps.className, wrapTriggerText === false && styles['overflow-ellipsis'])}
diff --git a/src/popover/styles.scss b/src/popover/styles.scss
index 34c6f92b1c..a389b9bfbe 100644
--- a/src/popover/styles.scss
+++ b/src/popover/styles.scss
@@ -12,6 +12,8 @@
 @import './container';
 @import './motion';
 
+$trigger-underline-offset: 0.25em;
+
 .root {
   @include styles.styles-reset;
   color: inherit;
@@ -36,8 +38,31 @@
   @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 style needs because of the overflow: hidden would otherwise conceal the underline styles.
+    */
+    padding-block-end: calc(#{$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;
@@ -46,7 +71,6 @@
   background-color: transparent;
 
   cursor: pointer;
-  border-block-end: awsui.$border-divider-list-width dashed currentColor;
 
   &:focus {
     outline: none;