chore: Gethinw clone of jump to page PR

pages/date-range-picker/common.tsx

@@ -27,6 +27,7 @@ interface DateRangePickerPageSettings {
   disabledDates?: DisabledDate;
   showDisabledReason?: boolean;
   hasValue?: boolean;
+  absoluteMultiGridStartPeriod?: DateRangePickerProps.StartPeriod;
 }
 
 const defaultSettings: Required<DateRangePickerPageSettings> = {
@@ -45,6 +46,7 @@ const defaultSettings: Required<DateRangePickerPageSettings> = {
   disabledDates: 'none',
   showDisabledReason: true,
   hasValue: true,
+  absoluteMultiGridStartPeriod: 'current',
 };
 
 export function useDateRangePickerSettings(
@@ -89,6 +91,7 @@ export function useDateRangePickerSettings(
   const disabledDates = urlParams.disabledDates ?? def('disabledDates');
   const showDisabledReason = parseBoolean(def('showDisabledReason'), urlParams.showDisabledReason);
   const hasValue = parseBoolean(def('hasValue'), urlParams.hasValue);
+  const absoluteMultiGridStartPeriod = urlParams.absoluteMultiGridStartPeriod ?? def('absoluteMultiGridStartPeriod');
   const settings: Required<DateRangePickerPageSettings> = {
     dateOnly,
     monthOnly,
@@ -105,6 +108,7 @@ export function useDateRangePickerSettings(
     disabledDates,
     showDisabledReason,
     hasValue,
+    absoluteMultiGridStartPeriod,
   };
   const setSettings = (settings: DateRangePickerPageSettings) => setUrlParams(settings);
 
@@ -211,6 +215,7 @@ export function useDateRangePickerSettings(
     isValidRange: isValid(monthOnly ? 'month' : 'day'),
     placeholder,
     i18nStrings,
+    absoluteMultiGridStartPeriod,
     locale: 'en-GB',
   };
 
@@ -256,6 +261,7 @@ export function Settings({
     disabledDates,
     showDisabledReason,
     hasValue,
+    absoluteMultiGridStartPeriod,
   },
   setSettings,
 }: {
@@ -274,6 +280,7 @@ export function Settings({
   const dateFormatOptions = [{ value: 'iso' }, { value: 'slashed' }, { value: 'long-localized' }];
   const inputDateFormat = [{ value: 'iso' }, { value: 'slashed' }];
   const timeFormatOptions = [{ value: 'hh:mm:ss' }, { value: 'hh:mm' }, { value: 'hh' }];
+  const absoluteMultiGridStartPeriodOptions = [{ value: 'current' }, { value: 'previous' }, { value: 'auto' }];
   return (
     <SpaceBetween size="m" direction="horizontal">
       <FormField label="Range selector mode">
@@ -332,6 +339,20 @@ export function Settings({
         />
       </FormField>
 
+      <FormField label="Start period">
+        <Select
+          options={absoluteMultiGridStartPeriodOptions}
+          selectedOption={
+            absoluteMultiGridStartPeriodOptions.find(o => o.value === absoluteMultiGridStartPeriod) ?? null
+          }
+          onChange={({ detail }) =>
+            setSettings({
+              absoluteMultiGridStartPeriod: detail.selectedOption.value as DateRangePickerProps.StartPeriod,
+            })
+          }
+        />
+      </FormField>
+
       <SpaceBetween direction="horizontal" size="s">
         <Checkbox checked={hasValue} onChange={({ detail }) => setSettings({ hasValue: detail.checked })}>
           Has initial value

pages/date-range-picker/month-calendar-permutations.page.tsx

@@ -36,6 +36,7 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
     customAbsoluteRangeControl: [undefined],
     timeInputFormat: ['hh:mm:ss'] as const,
     absoluteFormat: ['long-localized'] as const,
+    multiGridStartPeriod: ['current'] as const,
   })),
   // Disabled dates
   {
@@ -45,6 +46,7 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
     customAbsoluteRangeControl: [undefined],
     timeInputFormat: ['hh:mm:ss'] as const,
     absoluteFormat: ['long-localized'] as const,
+    multiGridStartPeriod: ['current'] as const,
   },
   // Date-only
   {
@@ -54,6 +56,7 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
     customAbsoluteRangeControl: [undefined],
     timeInputFormat: ['hh:mm:ss'] as const,
     absoluteFormat: ['long-localized'] as const,
+    multiGridStartPeriod: ['current'] as const,
   },
   // Custom control
   {
@@ -62,6 +65,7 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
     customAbsoluteRangeControl: [() => 'Custom control'],
     timeInputFormat: ['hh:mm:ss'] as const,
     absoluteFormat: ['long-localized'] as const,
+    multiGridStartPeriod: ['current'] as const,
   },
   // Date input formats
   {
@@ -71,6 +75,7 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
     timeInputFormat: ['hh:mm:ss'] as const,
     dateInputFormat: ['iso', 'slashed'] as const,
     absoluteFormat: ['long-localized'] as const,
+    multiGridStartPeriod: ['current'] as const,
   },
   // Time input formats
   {
@@ -79,6 +84,7 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
     customAbsoluteRangeControl: [undefined],
     timeInputFormat: ['hh:mm', 'hh'] as const,
     absoluteFormat: ['long-localized'] as const,
+    multiGridStartPeriod: ['current'] as const,
   },
 ]);
 

pages/date-range-picker/range-calendar.page.tsx

@@ -30,6 +30,7 @@ export default function RangeCalendarScenario() {
           customAbsoluteRangeControl={undefined}
           timeInputFormat="hh:mm:ss"
           absoluteFormat="slashed"
+          multiGridStartPeriod="current"
         />
 
         <Link id="focusable-after">Focusable element after</Link>

pages/date-range-picker/year-calendar-permutations.page.tsx

@@ -19,7 +19,7 @@ const intervals = [
   ['2022-02', '2022-03'], //next
   ['2021-01', '2021-03'], //q1
   ['2022-04', '2022-06'], //q2
-  ['2023-07', '2022-09'], //q3
+  ['2022-07', '2022-09'], //q3
   ['2024-10', '2024-12'], //q4
 ];
 
@@ -33,6 +33,7 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
     customAbsoluteRangeControl: [undefined],
     timeInputFormat: ['hh:mm:ss'] as const,
     absoluteFormat: ['long-localized'] as const,
+    multiGridStartPeriod: ['current', 'previous'] as const,
   })),
   // Disabled dates
   {
@@ -42,6 +43,7 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
     customAbsoluteRangeControl: [undefined],
     timeInputFormat: ['hh:mm:ss'] as const,
     absoluteFormat: ['long-localized'] as const,
+    multiGridStartPeriod: ['current'] as const,
   },
   // Custom control
   {
@@ -50,6 +52,7 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
     customAbsoluteRangeControl: [() => 'Custom control'],
     timeInputFormat: ['hh:mm:ss'] as const,
     absoluteFormat: ['long-localized'] as const,
+    multiGridStartPeriod: ['current'] as const,
   },
   // Input date formats
   {
@@ -59,6 +62,7 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
     timeInputFormat: ['hh:mm:ss'] as const,
     dateInputFormat: ['iso', 'slashed'] as const,
     absoluteFormat: ['long-localized'] as const,
+    multiGridStartPeriod: ['current'] as const,
   },
 ]);
 

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -10818,6 +10818,26 @@ It can take the following values:
       "optional": true,
       "type": "string",
     },
+    {
+      "defaultValue": "'auto'",
+      "description": "Specifies whether to start with the previous or current period (month or year)
+when multiple calendar grids are displayed in absolute mode.
+
+Defaults to 'auto', which starts with previous if no date is selected,
+or current if a selection is present.",
+      "inlineType": {
+        "name": "DateRangePickerProps.StartPeriod",
+        "type": "union",
+        "values": [
+          "auto",
+          "current",
+          "previous",
+        ],
+      },
+      "name": "absoluteMultiGridStartPeriod",
+      "optional": true,
+      "type": "string",
+    },
     {
       "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
 don't set this property because the form field component automatically sets it.