From 58164a3996670990e283a2fb004b2452941b80d1 Mon Sep 17 00:00:00 2001
From: Dennis Pitcock <denpitco@amazon.de>
Date: Thu, 23 Jan 2025 16:54:52 +0100
Subject: [PATCH] updating i18n string for relative range option desc

---
 pages/date-range-picker/common.ts             |  1 +
 .../__snapshots__/documenter.test.ts.snap     |  5 ++
 src/date-range-picker/calendar/grids/grid.tsx | 88 ++++++++++---------
 src/date-range-picker/interfaces.ts           | 10 ++-
 .../relative-range/index.tsx                  | 11 ++-
 src/i18n/messages-types.ts                    |  1 +
 src/i18n/messages/all.en.json                 |  3 +-
 src/test-utils/dom/date-range-picker/index.ts |  4 +-
 8 files changed, 73 insertions(+), 50 deletions(-)

diff --git a/pages/date-range-picker/common.ts b/pages/date-range-picker/common.ts
index b925dc28b2..a1206c940f 100644
--- a/pages/date-range-picker/common.ts
+++ b/pages/date-range-picker/common.ts
@@ -142,6 +142,7 @@ export const i18nStrings: DateRangePickerProps['i18nStrings'] = {
   relativeModeTitle: 'Relative range',
   absoluteModeTitle: 'Absolute range',
   relativeRangeSelectionHeading: 'Choose a range',
+  relativeRangeSelectionMonthlyDescription: 'Each month counts from the first day to the last day.',
   startMonthLabel: 'Start month',
   endMonthLabel: 'End month',
   startDateLabel: 'Start date',
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 538b632d57..43b017cc4e 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -7161,6 +7161,11 @@ Defaults to \`false\`.",
             "optional": true,
             "type": "string",
           },
+          {
+            "name": "relativeRangeSelectionDescription",
+            "optional": true,
+            "type": "string",
+          },
           {
             "name": "relativeRangeSelectionHeading",
             "optional": true,
diff --git a/src/date-range-picker/calendar/grids/grid.tsx b/src/date-range-picker/calendar/grids/grid.tsx
index 9ef3411aa0..bf5d9d61ba 100644
--- a/src/date-range-picker/calendar/grids/grid.tsx
+++ b/src/date-range-picker/calendar/grids/grid.tsx
@@ -75,8 +75,7 @@ export function Grid({
   const baseDateTime = baseDate?.getTime();
   // `baseDateTime` is used as a more stable replacement for baseDate
   const weeks = useMemo<Date[][]>(
-    () => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    () => getCalendarMonth(new Date(baseDateTime), { firstDayOfWeek: startOfWeek }),
     [baseDateTime, startOfWeek]
   );
   const i18n = useInternalI18n('date-range-picker');
@@ -204,31 +203,31 @@ export function Grid({
                     : -1; // Can be focused programmatically.
                 }
 
-                const hasTopBorder = (
-                  granularity: DateRangePickerProps['granularity'],
-                  date: Date,
-                  inSpecifiedRow: boolean
-                ): boolean => !!inSpecifiedRow || isInFirstGrouping(granularity, date);
-
-                const hasBottomBorder = (
-                  granularity: DateRangePickerProps['granularity'],
-                  date: Date,
-                  inSpecifiedRow: boolean
-                ): boolean => !!inSpecifiedRow || isInLastGrouping(granularity, date);
-                const hasLeftBorder = (
-                  granularity: DateRangePickerProps['granularity'],
-                  date: Date,
-                  itemIndex: number,
-                  isFirstItemInRange: boolean
-                ): boolean => itemIndex === 0 || isFirstItemInRange || isFirstItem(granularity, date);
-
-                const hasRightBorder = (
-                  granularity: DateRangePickerProps['granularity'],
-                  date: Date,
-                  itemIndex: number,
-                  rowLength: number,
-                  isLastItemInRange: boolean
-                ): boolean => itemIndex === rowLength - 1 || isLastItemInRange || isLastItemInPage(granularity, date);
+                // const hasTopBorder = (
+                //   granularity: DateRangePickerProps['granularity'],
+                //   date: Date,
+                //   inSpecifiedRow: boolean
+                // ): boolean => !!inSpecifiedRow || isInFirstGrouping(granularity, date);
+
+                // const hasBottomBorder = (
+                //   granularity: DateRangePickerProps['granularity'],
+                //   date: Date,
+                //   inSpecifiedRow: boolean
+                // ): boolean => !!inSpecifiedRow || isInLastGrouping(granularity, date);
+                // const hasLeftBorder = (
+                //   granularity: DateRangePickerProps['granularity'],
+                //   date: Date,
+                //   itemIndex: number,
+                //   isFirstItemInRange: boolean
+                // ): boolean => itemIndex === 0 || isFirstItemInRange || isFirstItem(granularity, date);
+
+                // const hasRightBorder = (
+                //   granularity: DateRangePickerProps['granularity'],
+                //   date: Date,
+                //   itemIndex: number,
+                //   rowLength: number,
+                //   isLastItemInRange: boolean
+                // ): boolean => itemIndex === rowLength - 1 || isLastItemInRange || isLastItemInPage(granularity, date);
 
                 return (
                   <GridCell
@@ -246,21 +245,26 @@ export function Grid({
                       [styles['range-end-date']]: isRangeEndDate,
                       [styles['no-range']]: isSelected && onlyOneSelected,
                       [styles['in-range']]: dateIsInRange,
-                      [styles['in-range-border-block-start']]: hasTopBorder(granularity, date, !!inRangeStartRow),
-                      [styles['in-range-border-block-end']]: hasBottomBorder(granularity, date, !!inRangeEndRow),
-                      [styles['in-range-border-inline-start']]: hasLeftBorder(
-                        granularity,
-                        date,
-                        rowItemIndex,
-                        isRangeStartDate
-                      ),
-                      [styles['in-range-border-inline-end']]: hasRightBorder(
-                        granularity,
-                        date,
-                        rowItemIndex,
-                        row.length,
-                        isRangeEndDate
-                      ),
+                      [styles['in-range-border-block-start']]:
+                        !!inRangeStartRow || isInFirstGrouping(granularity, date), // hasTopBorder(granularity, date, !!inRangeStartRow),
+                      [styles['in-range-border-block-end']]: !!inRangeEndRow || isInLastGrouping(granularity, date), //hasBottomBorder(granularity, date, !!inRangeEndRow),
+                      [styles['in-range-border-inline-start']]:
+                        rowItemIndex === 0 || isRangeStartDate || isFirstItem(granularity, date),
+                      // hasLeftBorder(
+                      //   granularity,
+                      //   date,
+                      //   rowItemIndex,
+                      //   isRangeStartDate
+                      // ),
+                      [styles['in-range-border-inline-end']]:
+                        rowItemIndex === row.length - 1 || isRangeEndDate || isLastItemInPage(granularity, date),
+                      // hasRightBorder(
+                      //   granularity,
+                      //   date,
+                      //   rowItemIndex,
+                      //   row.length,
+                      //   isRangeEndDate
+                      // ),
                       [styles.today]: isCurrentDay,
                       [testutilStyles.today]: isCurrentDay,
                       [styles['this-month']]: isCurrentMonth,
diff --git a/src/date-range-picker/interfaces.ts b/src/date-range-picker/interfaces.ts
index 596be2f7e5..caf9a5e569 100644
--- a/src/date-range-picker/interfaces.ts
+++ b/src/date-range-picker/interfaces.ts
@@ -9,7 +9,7 @@ import { FormFieldValidationControlProps } from '../internal/context/form-field-
 import { NonCancelableEventHandler } from '../internal/events';
 import { TimeInputProps } from '../time-input/interfaces';
 
-export type Granularity = CalendarProps.Granularity; //'day' | 'month';
+export type Granularity = CalendarProps.Granularity;
 
 export interface DateRangePickerBaseProps {
   /**
@@ -298,6 +298,7 @@ export namespace DateRangePickerProps {
      * Adds `aria-label` to the trigger and dropdown.
      */
     ariaLabel?: string;
+
     /**
      * Adds `aria-labelledby` to the trigger and dropdown.
      */
@@ -331,9 +332,14 @@ export namespace DateRangePickerProps {
      * Heading for the relative range selection area
      * @i18n
      */
-
     relativeRangeSelectionHeading?: string;
 
+    /**
+     * Description for the relative range selection area
+     * @i18n
+     */
+    relativeRangeSelectionMonthlyDescription?: string;
+
     /**
      * Visible label of the Cancel button
      * @i18n
diff --git a/src/date-range-picker/relative-range/index.tsx b/src/date-range-picker/relative-range/index.tsx
index 5b3de83076..008b03e35f 100644
--- a/src/date-range-picker/relative-range/index.tsx
+++ b/src/date-range-picker/relative-range/index.tsx
@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import InternalBox from '../../box/internal';
+import { CalendarProps } from '../../calendar/interfaces';
 import InternalFormField from '../../form-field/internal';
 import { useInternalI18n } from '../../i18n/context';
 import InternalInput from '../../input/internal';
@@ -13,7 +14,7 @@ import { RadioGroupProps } from '../../radio-group/interfaces';
 import InternalRadioGroup from '../../radio-group/internal';
 import InternalSelect from '../../select/internal';
 import InternalSpaceBetween from '../../space-between/internal';
-import { DateRangePickerProps, Granularity } from '../interfaces';
+import { DateRangePickerProps } from '../interfaces';
 
 import testutilStyles from '../test-classes/styles.css.js';
 import styles from './styles.css.js';
@@ -26,7 +27,7 @@ interface RelativeRangePickerProps {
   i18nStrings?: DateRangePickerProps.I18nStrings;
   isSingleGrid: boolean;
   customUnits?: DateRangePickerProps.TimeUnit[];
-  granularity?: Granularity;
+  granularity?: CalendarProps.Granularity;
 }
 
 interface UnitSelectOption {
@@ -126,7 +127,11 @@ export default function RelativeRangePicker({
             label={i18n('i18nStrings.relativeRangeSelectionHeading', i18nStrings?.relativeRangeSelectionHeading)}
             description={
               granularity === 'month' &&
-              'Each month counts from the first day of this month to the last day of this month'
+              granularity === 'month' &&
+              i18n(
+                'i18nStrings.relativeRangeSelectionMonthlyDescription',
+                i18nStrings?.relativeRangeSelectionMonthlyDescription
+              )
             }
           >
             <InternalRadioGroup
diff --git a/src/i18n/messages-types.ts b/src/i18n/messages-types.ts
index 5b2ddf2d82..986f6c6772 100644
--- a/src/i18n/messages-types.ts
+++ b/src/i18n/messages-types.ts
@@ -165,6 +165,7 @@ export interface I18nFormatArgTypes {
     "i18nStrings.relativeModeTitle": never;
     "i18nStrings.absoluteModeTitle": never;
     "i18nStrings.relativeRangeSelectionHeading": never;
+    "i18nStrings.relativeRangeSelectionMonthlyDescription": never;
     "i18nStrings.cancelButtonLabel": never;
     "i18nStrings.clearButtonLabel": never;
     "i18nStrings.applyButtonLabel": never;
diff --git a/src/i18n/messages/all.en.json b/src/i18n/messages/all.en.json
index f3ad868a5f..2c1beb3f94 100644
--- a/src/i18n/messages/all.en.json
+++ b/src/i18n/messages/all.en.json
@@ -129,6 +129,7 @@
     "i18nStrings.relativeModeTitle": "Relative mode",
     "i18nStrings.absoluteModeTitle": "Absolute mode",
     "i18nStrings.relativeRangeSelectionHeading": "Choose a range",
+    "i18nStrings.relativeRangeSelectionMonthlyDescription": "Each month counts from the first day to the last day.",
     "i18nStrings.cancelButtonLabel": "Cancel",
     "i18nStrings.clearButtonLabel": "Clear and dismiss",
     "i18nStrings.applyButtonLabel": "Apply",
@@ -427,4 +428,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Loading next step",
     "i18nStrings.submitButtonLoadingAnnouncement": "Submitting form"
   }
-}
\ No newline at end of file
+}
diff --git a/src/test-utils/dom/date-range-picker/index.ts b/src/test-utils/dom/date-range-picker/index.ts
index b83436e9f2..2b086297ed 100644
--- a/src/test-utils/dom/date-range-picker/index.ts
+++ b/src/test-utils/dom/date-range-picker/index.ts
@@ -107,7 +107,7 @@ export class DrpDropdownWrapper extends ComponentWrapper {
   }
 
   /**
-   * Alias for findPreviousButton for compatibility with previous versions
+   * Alias for findPreviousButton for compatibility with previous versions.
    * @deprecated
    */
   findPreviousMonthButton(): ButtonWrapper {
@@ -115,7 +115,7 @@ export class DrpDropdownWrapper extends ComponentWrapper {
   }
 
   /**
-   * Alias for findNextButton for compatibility with previous versions
+   * Alias for findNextButton for compatibility with previous versions.
    * @deprecated
    */
   findNextMonthButton(): ButtonWrapper {