From 848a631d25c6393a8d6a17dc61d84e496fce0565 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Thu, 14 Dec 2023 16:24:58 -0500
Subject: [PATCH] Date picker [LG-3864] year input rollover (#2138)

* prevents rollover in year segment

* Update DatePicker.spec.tsx
---
 .../src/DatePicker/DatePicker.spec.tsx        |  8 +--
 .../DateInputSegment.spec.tsx                 | 56 ++++---------------
 .../DateInputSegment/DateInputSegment.tsx     | 14 +++--
 3 files changed, 24 insertions(+), 54 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 58d508efd6..f18de797d8 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1352,7 +1352,7 @@ describe('packages/date-picker', () => {
                 expect(onDateChange).toHaveBeenCalled();
               });
 
-              test('rolls year value over from max prop to min prop', () => {
+              test('does not roll over year', () => {
                 const onDateChange = jest.fn();
                 const { yearInput } = renderDatePicker({
                   onDateChange,
@@ -1363,7 +1363,7 @@ describe('packages/date-picker', () => {
                 userEvent.click(yearInput);
                 userEvent.keyboard(`{arrowup}`);
                 expect(onDateChange).toHaveBeenCalledWith(
-                  newUTC(1969, Month.July, 5),
+                  newUTC(2021, Month.July, 5),
                 );
               });
 
@@ -1522,7 +1522,7 @@ describe('packages/date-picker', () => {
                 );
               });
 
-              test('rolls year value over from min prop to max prop', () => {
+              test('does not roll over year', () => {
                 const onDateChange = jest.fn();
                 const { yearInput } = renderDatePicker({
                   onDateChange,
@@ -1533,7 +1533,7 @@ describe('packages/date-picker', () => {
                 userEvent.click(yearInput);
                 userEvent.keyboard(`{arrowdown}`);
                 expect(onDateChange).toHaveBeenCalledWith(
-                  newUTC(2020, Month.July, 5),
+                  newUTC(1968, Month.July, 5),
                 );
               });
 
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.spec.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.spec.tsx
index 90c6cde9d2..4b32dac90d 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.spec.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.spec.tsx
@@ -273,7 +273,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
             );
           });
 
-          test('calls handler with default `min` when the new value is greater than the `max` value', () => {
+          test('rolls value over to default `min` value if value exceeds `max`', () => {
             const { input } = renderSegment({
               segment: 'day',
               onChange: onChangeHandler,
@@ -300,7 +300,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
             );
           });
 
-          test('calls handler with provided `min` prop when the new value is greater than the `max` value', () => {
+          test('rolls value over to provided `min` value if value exceeds `max`', () => {
             const { input } = renderSegment({
               segment: 'day',
               onChange: onChangeHandler,
@@ -344,7 +344,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
             );
           });
 
-          test('calls handler with default `max` value when the new value is less than the `min` value', () => {
+          test('rolls value over to default `max` value if value exceeds `min`', () => {
             const { input } = renderSegment({
               segment: 'day',
               onChange: onChangeHandler,
@@ -371,7 +371,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
             );
           });
 
-          test('calls handler with provided `max` prop value when the new value is less than the `min` value', () => {
+          test('rolls value over to provided `max` value if value exceeds `min`', () => {
             const { input } = renderSegment({
               segment: 'day',
               onChange: onChangeHandler,
@@ -421,7 +421,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
             );
           });
 
-          test('calls handler with default `min` when the new value is greater than the `max` value', () => {
+          test('rolls value over to default `min` value if value exceeds `max`', () => {
             const { input } = renderSegment({
               segment: 'month',
               onChange: onChangeHandler,
@@ -452,7 +452,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
             );
           });
 
-          test('calls handler with provided `min` prop when the new value is greater than the `max` value', () => {
+          test('rolls value over to provided `min` value if value exceeds `max`', () => {
             const { input } = renderSegment({
               segment: 'month',
               onChange: onChangeHandler,
@@ -500,7 +500,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
             );
           });
 
-          test('calls handler with default `max` value when the new value is less than the `min` value', () => {
+          test('rolls value over to default `max` value if value exceeds `min`', () => {
             const { input } = renderSegment({
               segment: 'month',
               onChange: onChangeHandler,
@@ -531,7 +531,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
             );
           });
 
-          test('calls handler with provided `max` prop value when the new value is less than the `min` value', () => {
+          test('rolls value over to provided `max` value if value exceeds `min`', () => {
             const { input } = renderSegment({
               segment: 'month',
               onChange: onChangeHandler,
@@ -582,7 +582,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
             );
           });
 
-          test('calls handler with default `min` when the new value is greater than the `max` value', () => {
+          test('does _not_ rollover if value exceeds max', () => {
             const { input } = renderSegment({
               segment: 'year',
               onChange: onChangeHandler,
@@ -592,7 +592,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
             userEvent.type(input, '{arrowup}');
             expect(onChangeHandler).toHaveBeenCalledWith(
               expect.objectContaining({
-                value: formatter(defaultMin['year']),
+                value: formatter(defaultMax['year'] + 1),
               }),
             );
           });
@@ -612,22 +612,6 @@ describe('packages/date-picker/shared/date-input-segment', () => {
               }),
             );
           });
-
-          test('calls handler with provided `min` prop when the new value is greater than the `max` value', () => {
-            const { input } = renderSegment({
-              segment: 'year',
-              onChange: onChangeHandler,
-              value: formatter(defaultMax['year']),
-              min: 1969,
-            });
-
-            userEvent.type(input, '{arrowup}');
-            expect(onChangeHandler).toHaveBeenCalledWith(
-              expect.objectContaining({
-                value: formatter(1969),
-              }),
-            );
-          });
         });
 
         describe('Down arrow', () => {
@@ -660,7 +644,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
             );
           });
 
-          test('calls handler with default `max` value when the new value is less than the `min` value', () => {
+          test('does _not_ rollover if value exceeds min', () => {
             const { input } = renderSegment({
               segment: 'year',
               onChange: onChangeHandler,
@@ -670,7 +654,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
             userEvent.type(input, '{arrowdown}');
             expect(onChangeHandler).toHaveBeenCalledWith(
               expect.objectContaining({
-                value: formatter(defaultMax['year']),
+                value: formatter(defaultMin['year'] - 1),
               }),
             );
           });
@@ -690,22 +674,6 @@ describe('packages/date-picker/shared/date-input-segment', () => {
               }),
             );
           });
-
-          test('calls handler with provided `max` prop value when the new value is less than the `min` value', () => {
-            const { input } = renderSegment({
-              segment: 'year',
-              onChange: onChangeHandler,
-              value: formatter(defaultMin['year']),
-              max: 2000,
-            });
-
-            userEvent.type(input, '{arrowdown}');
-            expect(onChangeHandler).toHaveBeenCalledWith(
-              expect.objectContaining({
-                value: formatter(2000),
-              }),
-            );
-          });
         });
       });
     });
diff --git a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
index a3ae38e55d..b754db4d50 100644
--- a/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
+++ b/packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
@@ -104,14 +104,16 @@ export const DateInputSegment = React.forwardRef<
 
           e.preventDefault();
           const valueDiff = key === keyMap.ArrowUp ? 1 : -1;
+          const defaultVal = key === keyMap.ArrowUp ? min : max;
 
-          const currentValue: number = value
-            ? Number(value)
-            : key === keyMap.ArrowUp
-            ? max
-            : min;
+          const incrementedValue: number = value
+            ? Number(value) + valueDiff
+            : defaultVal;
 
-          const newValue = rollover(currentValue + valueDiff, min, max);
+          const newValue =
+            segment === 'year'
+              ? incrementedValue
+              : rollover(incrementedValue, min, max);
           const valueString = formatter(newValue);
 
           onChange({