[LG-5504] refactor(date-picker): migrate to use InputBox component (#3286)

* refactor(date-picker): extract reusable logic from DateInputSegment, wip

* refactor(date-picker): extract reusable logic from DateInputSegment, wip

* refactor(date-picker): enhance InputSegment and DateInputSegment with improved type handling and event management

* refactor(date-picker): update InputSegment types and enhance DateInputSegment with additional props

* refactor(date-picker): WIP enhance InputBox and DateInput components with improved type handling and segment management

* refactor(date-picker): integrate InputBox into DateInputBox for improved segment management and type handling

* refactor(date-picker): clean up DateInputBox and enhance InputBox types for better segment management

* refactor(date-picker): enhance DatePicker components with improved type handling and segment management

* refactor(date-picker): enhance InputSegment and DateInputSegment with new props for step handling and rollover management

* refactor(input-box): move utils into input-box

* refactor(input-box): move utils into input-box

* refactor(date-picker): integrate InputBox and InputSegment into DatePicker components for improved segment management and type handling

* refactor(date-picker): migrate utility functions to InputBox and enhance segment validation logic for improved date handling

* refactor(date-picker): improve type safety in DateInputSegment and clean up InputBox component

* refactor(input-box): update exports in utils to include new segment validation and formatting functions

* refactor(input-box): add devDependencies for palette and enhance InputSegment and InputBox tests for better coverage

* refactor(input-box): simplify styling logic in InputBox and InputSegment components by introducing utility functions

* refactor(input-box): enhance type definitions in InputBox and InputSegment components for improved clarity and documentation

* refactor(input-box): improve documentation for InputBox and InputSegment types with clearer examples

* refactor(input-box): update documentation for segmentRefs and segmentRules in InputBox types for better clarity

* refactor(input-box, date-picker): streamline value formatting by updating getValueFormatter to accept segment-specific character counts

* refactor(input-box, date-picker): update utils to allow zero values

* refactor(input-box, date-picker): introduce shouldSkipValidation flag for year segment and enhance validation logic

* refactor(input-box): enhance renderSegment return type for improved type safety and clarity

* refactor(input-box): improve InputBox tests to verify segment rendering and props validation

* refactor(input-box): remove unused getLgIds utility and clean up InputSegment props

* refactor(input-box, date-picker): rename segmentObj to segmentEnum for consistency and clarity across components

* refactor(input-box, date-picker): update type annotations and enhance tests for InputBox and InputSegment components

* refactor(input-box): update README and improve InputBox documentation for clarity

* feat(input-box): adds input-box package and utils

* refactor(input-box): consolidate InputBox stories into a single file and enhance control parameters

* refactor(date-picker): remove input-box dependency and streamline date segment handling

* feat(date-picker): integrate input-box for date segment handling and enhance validation logic

* refactor(date-picker, input-box): implement context for segment management and streamline props handling in DateInput components

* refactor(input-box): update InputBox and InputSegment components to use context for segment rendering and streamline prop handling

* refactor(input-box): clarify type handling in InputBoxContext with detailed comments on type assertions

* refactor(input-box): enhance type handling in InputBox and InputSegment components for improved clarity and consistency

* refactor(input-box): update InputSegment and InputBox components to utilize context for segment values and enhance prop handling

* refactor(date-picker): implement DateInputBoxContext for improved state management and enhance DateInputSegment integration

* refactor(date-picker, input-box): enhance DateInput components by integrating context for segment management and improving prop handling

* refactor(date-picker, input-box): improve DateInputSegment tests and stories by enhancing prop handling and integrating context for segment management

* refactor(date-picker): reorganize DateInputBox context imports and remove unused DateInputBoxContext file

* docs(input-box): expand README with detailed component descriptions, features, and usage examples for InputBox, InputBoxContext, and InputSegment

* docs(input-box): update README to reflect changes in component structure and props for InputBox and InputSegment

* refactor(input-box): rename `shouldRollover` to `shouldWrap` for clarity and update related documentation and tests

* refactor(date-picker, input-box): reorganize imports and enhance prop handling in DateInputBox and InputBox components for improved clarity and functionality

* test(input-box): add comprehensive tests for segment navigation and rendering behavior in InputBox component

* fix(input-box, date-picker): address validation and formatting issues in InputBox and DateInputBox components; enhance tests for edge cases and input behavior

* refactor(input-box, date-picker): remove defaultMin prop and enhance validation logic for segment inputs; update tests for improved coverage and clarity

* refactor(input-box): standardize parameter naming from `allowsZero` to `allowZero` across components and utility functions for consistency

* refactor(input-box): enhance createExplicitSegmentValidator documentation by adding parameter descriptions and examples for improved clarity

* test(input-box): enhance mouse and keyboard interaction tests for segment focus behavior in InputBox component

* test(input-box): add tests for Up and Down arrow key interactions to maintain focus in InputBox segments

* refactor(input-box, date-picker): streamline InputBoxContext structure and enhance type definitions; update InputBox and InputSegment components for improved clarity and functionality

* docs(input-box): update README.md to enhance installation instructions, usage examples, and component prop descriptions for better clarity and usability

* feat(input-box): enhance InputBox and InputSegment components with new features and documentation.

* feat(input-box): add '@leafygreen-ui/a11y' as a dependency in pnpm-lock.yaml

* fix(input-box): fix lint errors

* feat(input-box): set default size for InputBox in stories and refactor InputSegment styles for improved class handling

* refactor(date-picker): simplify ProviderWrapper in DateInputSegment stories for better segment handling

* feat(input-box): implement InputBoxContext and InputBoxProvider with associated types and tests

* remove segement files

* feat(input-box): implement InputSegment component with styles, tests, and stories

* feat(input-box): add @leafygreen-ui/a11y dependency and update InputSegment component references

* refactor(input-box): update createExplicitSegmentValidator tests to use object parameter format for improved clarity and consistency

* test(input-box): refactor InputBoxContext tests for improved readability by destructuring context values

* refactor(input-box): update InputBoxContext types to extend SharedInputBoxTypes and remove deprecated InputSegment types

* fix(input-box): correct comment formatting in testutils.mocks.ts for clarity

* feat(input-box): add InputSegment component for modular input handling

* feat(input-box): add placeholder for InputSegment types

* refactor(input-box): move InputSegmentChangeEventHandler import to shared types for better organization

* refactor(input-box): rename min and max props to minSegmentValue and maxSegmentValue for consistency

* refactor(input-box): simplify placeholder logic in InputSegment stories using defaultPlaceholderMock

* refactor(input-box): update InputSegment styles to use dynamic theme styles and improve organization

* feat(input-box): extend InputSegmentProps to include hours, minutes, and seconds segments

* refactor(input-box): rename onChange and onBlur props in InputSegment to improve clarity

* refactor(input-box): rename shouldSkipValidation prop to shouldValidate for clarity and consistency

* refactor(input-box): reorganize imports in testutils for better clarity and structure

* refactor(input-box): remove deprecated InputSegment types and update imports in InputBoxContext

* refactor(input-box): update InputSegmentChangeEventHandler import to use type alias from shared.types

* refactor(input-box): enhance InputSegment types and documentation, adding isInputSegment utility and improving component descriptions

* refactor(input-box): streamline InputSegment exports by removing unused types

* test(input-box): add accessibility test for InputSegment to ensure no violations when tooltip is closed

* refactor(input-box): update InputSegment to remove size prop and enhance type definitions for better clarity

* refactor(input-box): enhance InputSegment types by adding onChange and onBlur event handlers with detailed documentation

* refactor(input-box): update InputSegment types to extend from 'div' and include additional props for improved functionality

* refactor(input-box): simplify SharedInputBoxTypes by removing redundant properties and enhancing type clarity

* refactor(input-box): remove InputBoxContext and related tests to streamline input box functionality

* wip

* refactor(input-box): simplify InputSegment types by removing Value generic and updating related components for improved clarity

* refactor(input-box): update InputSegment and InputBox types to include value prop and streamline segment handling

* refactor(date-picker): streamline DateInput components by simplifying props and enhancing context usage

* refactor(input-box): update InputSegment types to include value prop and remove unused segmentRefs and segments properties for improved clarity

* refactor(input-box): remove unused Size import from InputBox.spec.tsx for cleaner code

* refactor(input-box): enhance InputBox and InputSegment documentation, update props for clarity, and streamline type exports

* testing

* refactor(input-box): remove unused dependencies and update InputSegment types for consistency

* update lock file

* testing

* testing build

* testing build

* test(input-segment): add test for resetting value with complete zeros and update InputSegment story with segmentEnum

* refactor(input-box): update separator literal styles to use new token-based approach

* fix(input-segment): add missing line to check for number input handling

* refactor(input-segment): update comments and variable name for clarity in digit input handling

* refactor(input-box): update comment to reflect correct component responsible for increment/decrement logic

* refactor(input-segment): utilize isSingleDigit utility for digit input handling

* refactor(input-box): enhance documentation for InputBox component to clarify functionality and usage

* refactor(input-box): integrate size prop into InputBox and InputSegment components for enhanced customization

* refactor(input-box): migrate Size import to shared.types for consistent usage across components

* refactor(input-box): enhance InputBox and InputSegment tests with segmentRefs integration for improved focus handling

* feat(input-box): add comprehensive mocks for date and time segments in testutils for enhanced testing capabilities

* feat(input-box): integrate lodash for utility functions and enhance InputBox stories with date and time segment examples

* refactor(input-box): remove unused props from InputBox stories and testutils for cleaner code

* fix(input-box): ensure segments prop is required and handle error logging in InputBox component

* refactor(date-input): remove unused charsPerSegment prop and update related references to charsCount for consistency

* refactor(date-input): remove onKeyDown prop from DateInputBox and update DateInputBoxProviderProps to extend PropsWithChildren for better type handling

* fix(date-input): import DateType and add comment about allowing any 4-digit year value in custom validation for date segments

* refactor(date-picker, input-box): standardize usage of charsCount instead of charsPerSegment across components and tests for consistency

* refactor(date-input): simplify DateInputBox by removing unused props for cleaner implementation

* fix(date-picker): correct parameter name from disableSnapshots to disableSnapshot in DatePicker stories and pass size prop to InputBox

* remove isSingleDigit utility and its associated tests

* test(date-picker): ensure real timers are used after tests in keyboard and mouse interaction specs

* refactor(date-picker): rename context value from `value` to `dateValue` in DateInputBox components

Author: shaneeza

.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.stories.tsx

@@ -134,7 +134,7 @@ export const LiveExample: StoryFn<typeof DatePicker> = props => {
 };
 LiveExample.parameters = {
   chromatic: {
-    disableSnapshots: true,
+    disableSnapshot: true,
   },
 };
 
@@ -143,7 +143,7 @@ export const Uncontrolled: StoryFn<typeof DatePicker> = props => {
 };
 Uncontrolled.parameters = {
   chromatic: {
-    disableSnapshots: true,
+    disableSnapshot: true,
   },
 };
 
@@ -163,7 +163,7 @@ export const InModal: StoryFn<typeof DatePicker> = props => {
 };
 InModal.parameters = {
   chromatic: {
-    disableSnapshots: true,
+    disableSnapshot: true,
   },
 };
 

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

@@ -26,6 +26,9 @@ describe('DatePicker keyboard interaction', () => {
   afterEach(() => {
     jest.restoreAllMocks();
   });
+  afterAll(() => {
+    jest.useRealTimers();
+  });
 
   describe('focuses the current value', () => {
     test("when month returns to value's month", async () => {

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

@@ -27,6 +27,9 @@ describe('DatePicker keyboard interaction', () => {
   afterEach(() => {
     jest.restoreAllMocks();
   });
+  afterAll(() => {
+    jest.useRealTimers();
+  });
 
   describe('focuses the current value', () => {
     test("when month returns to value's month", async () => {

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 {
@@ -33,6 +33,9 @@ describe('DatePicker keyboard interaction', () => {
   afterEach(() => {
     jest.restoreAllMocks();
   });
+  afterAll(() => {
+    jest.useRealTimers();
+  });
 
   describe('arrow keys interaction when Input is focused', () => {
     describe('Left Arrow', () => {
@@ -79,7 +82,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({
+        charsCount: 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/DatePicker.keyboard4.spec.tsx

@@ -19,6 +19,9 @@ describe('DatePicker keyboard interaction', () => {
   afterEach(() => {
     jest.restoreAllMocks();
   });
+  afterAll(() => {
+    jest.useRealTimers();
+  });
 
   describe('arrow keys interaction when Menu is focused', () => {
     describe('basic arrow key behavior', () => {

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

@@ -23,6 +23,9 @@ describe('DatePicker mouse interaction', () => {
   afterEach(() => {
     jest.restoreAllMocks();
   });
+  afterAll(() => {
+    jest.useRealTimers();
+  });
 
   describe('Clicking the input', () => {
     test('opens the menu', async () => {

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

@@ -19,6 +19,9 @@ describe('DatePicker mouse interaction', () => {
   afterEach(() => {
     jest.restoreAllMocks();
   });
+  afterAll(() => {
+    jest.useRealTimers();
+  });
 
   describe('Clicking a Calendar cell', () => {
     test('closes the menu', async () => {

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

@@ -18,6 +18,9 @@ describe('DatePicker mouse interaction', () => {
   afterEach(() => {
     jest.restoreAllMocks();
   });
+  afterAll(() => {
+    jest.useRealTimers();
+  });
 
   describe('Month select menu', () => {
     test('menu opens over the calendar menu', async () => {