[LG-5504] refactor(date-picker): migrate to use input-box component

.changeset/input-box.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/input-box': minor
+---
+
+Initial release of `InputBox`

packages/date-picker/package.json

@@ -22,6 +22,7 @@
     "@leafygreen-ui/hooks": "workspace:^",
     "@leafygreen-ui/icon": "workspace:^",
     "@leafygreen-ui/icon-button": "workspace:^",
+    "@leafygreen-ui/input-box": "workspace:^",
     "@leafygreen-ui/lib": "workspace:^",
     "@leafygreen-ui/palette": "workspace:^",
     "@leafygreen-ui/popover": "workspace:^",

packages/date-picker/src/DatePicker/DatePicker.keyboard3.spec.tsx

@@ -3,14 +3,14 @@ import userEvent from '@testing-library/user-event';
 
 import { Month, newUTC } from '@leafygreen-ui/date-utils';
 import { getLgIds as getLgFormFieldIds } from '@leafygreen-ui/form-field';
+import { getValueFormatter } from '@leafygreen-ui/input-box';
 import { eventContainingTargetValue } from '@leafygreen-ui/testing-lib';
 
 import { DateSegment } from '../shared';
-import { defaultMax, defaultMin } from '../shared/constants';
+import { charsPerSegment, defaultMax, defaultMin } from '../shared/constants';
 import {
   getFormattedDateString,
   getFormattedSegmentsFromDate,
-  getValueFormatter,
 } from '../shared/utils';
 
 import {
@@ -79,7 +79,9 @@ describe('DatePicker keyboard interaction', () => {
 
     const segmentCases = ['year', 'month', 'day'] as Array<DateSegment>;
     describe.each(segmentCases)('%p segment', segment => {
-      const formatter = getValueFormatter(segment);
+      const formatter = getValueFormatter({
+        charsPerSegment: charsPerSegment[segment],
+      });
       /** Utility only for this suite. Returns the day|month|year element from the render result */
       const getRelevantInput = (renderResult: RenderDatePickerResult) =>
         segment === 'year'

packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx

@@ -8,6 +8,7 @@ import React, {
 import isNull from 'lodash/isNull';
 
 import { isInvalidDateObject, isSameUTCDay } from '@leafygreen-ui/date-utils';
+import { isElementInputSegment } from '@leafygreen-ui/input-box';
 import { createSyntheticEvent, keyMap } from '@leafygreen-ui/lib';
 
 import {
@@ -17,11 +18,7 @@ import {
 } from '../../shared/components/DateInput';
 import { DateInputSegmentChangeEventHandler } from '../../shared/components/DateInput/DateInputSegment';
 import { useSharedDatePickerContext } from '../../shared/context';
-import {
-  getFormattedDateStringFromSegments,
-  getRelativeSegmentRef,
-  isElementInputSegment,
-} from '../../shared/utils';
+import { getFormattedDateStringFromSegments } from '../../shared/utils';
 import { useDatePickerContext } from '../DatePickerContext';
 import { getSegmentToFocus } from '../utils/getSegmentToFocus';
 
@@ -110,77 +107,11 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       // if target is not a segment, do nothing
       if (!isSegment) return;
 
-      const isSegmentEmpty = !target.value;
-
       switch (key) {
-        case keyMap.ArrowLeft: {
-          // Without this, the input ignores `.select()`
-          e.preventDefault();
-          // if input is empty,
-          // set focus to prev input (if it exists)
-          const segmentToFocus = getRelativeSegmentRef('prev', {
-            segment: target,
-            formatParts,
-            segmentRefs,
-          });
-
-          segmentToFocus?.current?.focus();
-          segmentToFocus?.current?.select();
-          // otherwise, use default behavior
-
-          break;
-        }
-
-        case keyMap.ArrowRight: {
-          // Without this, the input ignores `.select()`
-          e.preventDefault();
-          // if input is empty,
-          // set focus to next. input (if it exists)
-          const segmentToFocus = getRelativeSegmentRef('next', {
-            segment: target,
-            formatParts,
-            segmentRefs,
-          });
-
-          segmentToFocus?.current?.focus();
-          segmentToFocus?.current?.select();
-          // otherwise, use default behavior
-
-          break;
-        }
-
-        case keyMap.ArrowUp:
-        case keyMap.ArrowDown: {
-          // increment/decrement logic implemented by DateInputSegment
-          break;
-        }
-
-        case keyMap.Backspace: {
-          if (isSegmentEmpty) {
-            // prevent the backspace in the previous segment
-            e.preventDefault();
-
-            const segmentToFocus = getRelativeSegmentRef('prev', {
-              segment: target,
-              formatParts,
-              segmentRefs,
-            });
-            segmentToFocus?.current?.focus();
-            segmentToFocus?.current?.select();
-          }
-          break;
-        }
-
         case keyMap.Space: {
           openMenu();
           break;
         }
-
-        case keyMap.Enter:
-        case keyMap.Escape:
-        case keyMap.Tab:
-          // Behavior handled by parent or menu
-          break;
       }
 
       // call any handler that was passed in
@@ -232,17 +163,17 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       <DateFormField
         ref={fwdRef}
         buttonRef={calendarButtonRef}
-        onKeyDown={handleInputKeyDown}
         onInputClick={handleInputClick}
-        onBlur={handleInputBlur}
         onIconButtonClick={handleIconButtonClick}
+        onBlur={handleInputBlur}
         {...rest}
       >
         <DateInputBox
           value={value}
           setValue={handleInputValueChange}
           segmentRefs={segmentRefs}
           onSegmentChange={handleSegmentChange}
+          onKeyDown={handleInputKeyDown}
         />
       </DateFormField>
     );

packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx

@@ -1,4 +1,4 @@
-import React, { FocusEventHandler, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import isEqual from 'lodash/isEqual';
 import isNull from 'lodash/isNull';
 
@@ -7,37 +7,20 @@ import {
   isInvalidDateObject,
   isValidDate,
 } from '@leafygreen-ui/date-utils';
-import { cx } from '@leafygreen-ui/emotion';
-import { useForwardedRef } from '@leafygreen-ui/hooks';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import { keyMap } from '@leafygreen-ui/lib';
+import { InputBox } from '@leafygreen-ui/input-box';
 
+import { charsPerSegment, dateSegmentRules } from '../../../constants';
 import { useSharedDatePickerContext } from '../../../context';
 import { useDateSegments } from '../../../hooks';
+import { DateSegment, DateSegmentsState } from '../../../types';
 import {
-  DateSegment,
-  DateSegmentsState,
-  DateSegmentValue,
-  isDateSegment,
-} from '../../../types';
-import {
-  getMaxSegmentValue,
-  getMinSegmentValue,
-  getRelativeSegment,
-  getValueFormatter,
   isEverySegmentFilled,
   isEverySegmentValueExplicit,
-  isExplicitSegmentValue,
   newDateFromSegments,
 } from '../../../utils';
+import { DateInputBoxProvider } from '../DateInputBoxContext';
 import { DateInputSegment } from '../DateInputSegment';
-import { DateInputSegmentChangeEventHandler } from '../DateInputSegment/DateInputSegment.types';
 
-import {
-  segmentPartsWrapperStyles,
-  separatorLiteralDisabledStyles,
-  separatorLiteralStyles,
-} from './DateInputBox.styles';
 import { DateInputBoxProps } from './DateInputBox.types';
 
 /**
@@ -62,25 +45,13 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
       labelledBy,
       segmentRefs,
       onSegmentChange,
+      onKeyDown,
       ...rest
     }: DateInputBoxProps,
     fwdRef,
   ) => {
-    const { isDirty, formatParts, disabled, min, max, setIsDirty } =
+    const { isDirty, formatParts, disabled, setIsDirty, size } =
       useSharedDatePickerContext();
-    const { theme } = useDarkMode();
-
-    const containerRef = useForwardedRef(fwdRef, null);
-
-    /** Formats and sets the segment value */
-    const getFormattedSegmentValue = (
-      segmentName: DateSegment,
-      segmentValue: DateSegmentValue,
-    ): DateSegmentValue => {
-      const formatter = getValueFormatter(segmentName);
-      const formattedValue = formatter(segmentValue);
-      return formattedValue;
-    };
 
     /** if the value is a `Date` the component is dirty */
     useEffect(() => {
@@ -118,92 +89,32 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
       }
     };
 
+    /** State Management for segments using a useReducer instead of useState */
     /** Keep track of each date segment */
     const { segments, setSegment } = useDateSegments(value, {
       onUpdate: handleSegmentUpdate,
     });
 
-    /** Fired when an individual segment value changes */
-    const handleSegmentInputChange: DateInputSegmentChangeEventHandler =
-      segmentChangeEvent => {
-        let segmentValue = segmentChangeEvent.value;
-        const { segment: segmentName, meta } = segmentChangeEvent;
-        const changedViaArrowKeys =
-          meta?.key === keyMap.ArrowDown || meta?.key === keyMap.ArrowUp;
-
-        // Auto-format the segment if it is explicit and was not changed via arrow-keys
-        if (
-          !changedViaArrowKeys &&
-          isExplicitSegmentValue(segmentName, segmentValue)
-        ) {
-          segmentValue = getFormattedSegmentValue(segmentName, segmentValue);
-
-          // Auto-advance focus (if possible)
-          const nextSegmentName = getRelativeSegment('next', {
-            segment: segmentName,
-            formatParts,
-          });
-
-          if (nextSegmentName) {
-            const nextSegmentRef = segmentRefs[nextSegmentName];
-            nextSegmentRef?.current?.focus();
-            nextSegmentRef?.current?.select();
-          }
-        }
-
-        setSegment(segmentName, segmentValue);
-        onSegmentChange?.(segmentChangeEvent);
-      };
-
-    /** Triggered when a segment is blurred */
-    const handleSegmentInputBlur: FocusEventHandler<HTMLInputElement> = e => {
-      const segmentName = e.target.getAttribute('id');
-      const segmentValue = e.target.value;
-
-      if (isDateSegment(segmentName)) {
-        const formattedValue = getFormattedSegmentValue(
-          segmentName,
-          segmentValue,
-        );
-        setSegment(segmentName, formattedValue);
-      }
-    };
-
     return (
-      <div
-        className={cx(segmentPartsWrapperStyles, className)}
-        ref={containerRef}
-        {...rest}
-      >
-        {formatParts?.map((part, i) => {
-          if (part.type === 'literal') {
-            return (
-              <span
-                className={cx(separatorLiteralStyles, {
-                  [separatorLiteralDisabledStyles[theme]]: disabled,
-                })}
-                key={'literal-' + i}
-              >
-                {part.value}
-              </span>
-            );
-          } else if (isDateSegment(part.type)) {
-            return (
-              <DateInputSegment
-                key={part.type}
-                ref={segmentRefs[part.type]}
-                aria-labelledby={labelledBy}
-                min={getMinSegmentValue(part.type, { date: value, min })}
-                max={getMaxSegmentValue(part.type, { date: value, max })}
-                segment={part.type}
-                value={segments[part.type]}
-                onChange={handleSegmentInputChange}
-                onBlur={handleSegmentInputBlur}
-              />
-            );
-          }
-        })}
-      </div>
+      <DateInputBoxProvider value={value}>
+        <InputBox
+          ref={fwdRef}
+          onKeyDown={onKeyDown}
+          segmentRefs={segmentRefs}
+          segmentEnum={DateSegment}
+          charsPerSegment={charsPerSegment}
+          formatParts={formatParts}
+          segments={segments}
+          setSegment={setSegment}
+          disabled={disabled}
+          segmentRules={dateSegmentRules}
+          onSegmentChange={onSegmentChange}
+          labelledBy={labelledBy}
+          segmentComponent={DateInputSegment}
+          size={size}
+          {...rest}
+        />
+      </DateInputBoxProvider>
     );
   },
 );

packages/date-picker/src/shared/components/DateInput/DateInputBoxContext/DateInputBoxContext.spec.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { isReact17, renderHook } from '@leafygreen-ui/testing-lib';
+
+import {
+  DateInputBoxProvider,
+  useDateInputBoxContext,
+} from './DateInputBoxContext';
+
+describe('DateInputBoxContext', () => {
+  test('throws error when used outside of DateInputBoxProvider', () => {
+    /**
+     * The version of `renderHook` imported from "@testing-library/react-hooks", (used in React 17)
+     * has an error boundary, and doesn't throw errors as expected:
+     * https://github.com/testing-library/react-hooks-testing-library/blob/main/src/index.ts#L5
+     * */
+    if (isReact17()) {
+      const { result } = renderHook(() => useDateInputBoxContext());
+      expect(result.error.message).toEqual(
+        'useDateInputBoxContext must be used within a DateInputBoxProvider',
+      );
+    } else {
+      expect(() => renderHook(() => useDateInputBoxContext())).toThrow(
+        'useDateInputBoxContext must be used within a DateInputBoxProvider',
+      );
+    }
+  });
+
+  test('provides context values that match the props passed to the provider', () => {
+    const value = new Date();
+    const { result } = renderHook(() => useDateInputBoxContext(), {
+      wrapper: ({ children }) => (
+        <DateInputBoxProvider value={value}>{children}</DateInputBoxProvider>
+      ),
+    });
+    expect(result.current.value).toEqual(value);
+  });
+});